In todays' article, we will see how you can add an app icon to your Flutter app. Every app has its own unique icon and an app icon is one of the most important parts of an app.
Earlier, adding an app icon was a time taking task because we had to generate app icons via an external website and then store it in a particular folder in your project directory but since the arrival of flutter_launcher_icons, everything has changed.
How? let's find out.
So first of all we will add the flutter_launcher_icons package in pubspec under the dev_dependencies tag.
dev_dependencies: flutter_launcher_icons: "^0.9.2"
Now, add these lines of code in your pubspec
flutter_icons: android: "launcher_icon" ios: true image_path: "assets/icon/appicon.png"
This whole code block comes after the dev_dependencies part. So your code will look something like this
dev_dependencies: flutter_launcher_icons: "^0.9.2" flutter_icons: android: "launcher_icon" // name of your icon ios: true // creates an ios icon as well if true image_path: "assets/icon/appicon.png" // path to the image
As you can see the image_path attribute needs a path to the image. For that, add an image first. Create a new assets folder then create an icon folder and add your image there. You can name it anything you want. Just make sure that name of the file and image_path attribute has the same name.
Whatever we did above in the pubspec file can also be done in a new YAML file. All you need to do is create a file called flutter_launcher_icons.yaml and add the above block of code to it.
Now let's generate our icons. We do that by typing 4 simple commands. The first command is flutter pub get. Once done with pub get, type this command in your terminal.
// config file will be pubspec.yaml or flutter_launcher_icons.yaml. flutter pub run flutter_launcher_icons:main -f <your config file name>
This will generate your icons. It will take some time. Once it is done again type flutter pub get. Once pub get is done successfully, type this command in your terminal
flutter pub run flutter_launcher_icons:main
This will run your package and add the icon to your app. Once you are done with running all 4 commands successfully, build an APK of your flutter app and install it on your phone. You will successfully see the launcher icon of your app.
To build an APK version, type this command
flutter build apk
If you are getting some errors while running the build commands then try reading the troubleshooting part of this page
If you were successful in generating app icons and seeing them then CONGRATULATIONS! You have learned how to add launch icons to your app in the easiest way.
You can appreciate and support my blogs via.
Also, let's connect on Twitter. Follow CSwithIyush for more amazing tutorials, tips/tricks on Flutter & DSA.