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.
- Add Assets Directory
Create new assets directory in projects root directory and add a subdirectory icons.
- Add Image Assets
2. Add Dependencies
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).
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 …
Building complex applications in Flutter demands a basic understanding of the core concepts. Those concepts include the…www.inovex.de
2D Animation Repository
Bring your apps and games to life with real-time animation. Flare is a powerful design and animation tool, which allows…www.2dimensions.com
Sources & Quotes: