Flutter. Adding assets and changing the application icon

Artem Diashkin
Apr 17, 2020 · 3 min read

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 them 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 the 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!

LITSLINK Mobile Development

LITSLINK’s team is sharing their experience regarding Mobile development

Artem Diashkin

Written by

Java, Spring, Node.js, AdonisJs, React.js and Flutter developer

LITSLINK Mobile Development

Hands-on up to date experience sharing of the most skilled & talented software developers right here, right now. Subscribe to learn & understand more about the Software World.

Artem Diashkin

Written by

Java, Spring, Node.js, AdonisJs, React.js and Flutter developer

LITSLINK Mobile Development

Hands-on up to date experience sharing of the most skilled & talented software developers right here, right now. Subscribe to learn & understand more about the Software World.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store