Flutter. Adding assets and changing the application icon

Artem Diashkin

·Apr 17, 2020

Let’s take a look at how we can add assets to the Flutter project and change the app’s logo icon

Hide “Debug”

In Flutter Inspector menu -> More Actions -> Hide Debug Mode Banner

Adding Assets

To add assets to your application you will need to register it in /pubspec.yaml file:

⚠️ If you are getting no errors, but the image doesn’t appear in the app, you could add an additional line of the root folder to assets config:

flutter:
  assets:
    - images/
    - images/LOK-SR.png

If you want to include just everything from images folder, you could specify just the root folder of your images, with no file names:

flutter:
  assets:
    - images/

Changing icon of your application

Let’s download some png image here:

Next, generate app icons from this image using https://appicon.co/:

After that you will get a whole bunch of different sized icons:

For Android application, you will need to replace folders in /android/app/src/main/res/ with folders with the same names:

For iOS we will need to do the exact same thing, just with a folder with another name, which is /ios/Runner/Assets.xcassets .

After that, restart your application and then you could see icon changes:

If you want to customize the icon for Android applications, you could use Android Studio.

Customization of Android app icon

Create a new “Image Asset” in /android/app/src/main/res folder:

Select your icon file:

And customize it as you wish:

After clicking “Next” Android Studio will replace your previous files:

Great job!