Flutter: Custom Icon

Creating a mobile application demands an app icon. In Flutter its not drag and drop process like in iOS. It is more like in android, where you declare a image in a assets folder and call set it programmatically.


In order to add a custom icon to you Flutter project you need a image first. Please be advised that you use only images which have the appropriate

li-cense or design your own image. The image size should be considered as well, since the image will be a small icon. Your focus should be on sharpness and less details. Even your app theme plays a part in the design of your icon, specially if your designing a icon in a company brand context.

Lets assume you have an appropriate image which will we can use as icon, then we can start to attach it to the Flutter project.

We can use the community plugin flutter_launcher_icons for this task.

  1. Add Assets Directory

Create new assets directory in projects root directory and add a subdirectory icons.

<project_root_directory/assets/icons>
  1. Add Image Assets
// pubspec.yaml
flutter:

uses-material-design:
true
assets:
- assets/icons/your_icon_image.png

2. Add Dependencies

//pubspec.yaml
dev_dependencies:
flutter_test:
sdk:
flutter

flutter_launcher_icons: any

flutter_icons:
android:
true
ios: true
image_path: "assets/icons/your_icon_image.png"

3. Platform Icons

As you can see above in Flutter we separate the icons in ios and android. Here you can segregate the icons with a simple boolean tag (true / false).

// pubspec.yaml
flutter_icons:
android:
true
ios: true
...

4. Run Flutter command

Get Dart package ‘flutter_launcher_icons’and run command in your projects root directory.

$ flutter pub get

5. Set Custom Icon

Run Flutter command in your projects root directory to set the icon for your project.

$ flutter packages pub run flutter_launcher_icons:main 

Now you have set your own icon to your Flutter project.

A simple task which goes quite deep into each platform. The process of changing the app icon by Google’s new framework Flutter is pretty straight forward. Since Flutter is a plugin bases framework, it becomes clear that the quality of the projects are driven by the community efforts to contribute to plugins and packages.

I hope you enjoyed this article and I could help you to get started with Flutter.

Happy coding …

Business Blog

2D Animation Repository

Github Repository

Sources & Quotes: