Set App Icon

Introduction

 
In this blog, we are going to learn how to change the app icon of a flutter app. App icon is the first impression of any app and it should be eye catching. It plays a very crucial part in terms of app downloads. Please note that I said app download, users download your app by only seeing your app icon but it depends on your app features that user will continue using your app.
 
So now let’s see how we can set app icon in flutter.
 

Steps

 
Step 1
 
First and basic step is to create a new application in flutter. If you are a beginner in flutter, please check my blog Create your first app in Flutter. I have created app named as “flutter_app_icon”
 
Step 2
 
I found one plugin to set app icon in flutter named “flutter_launcher_icons”. We'll use this plugin to set the app icon in flutter.
 
Add this plugin in pubspec.yaml file in project root directory. Please check below code,
  1. dependencies:    
  2.  flutter:    
  3.    sdk: flutter    
  4.  cupertino_icons: ^0.1.2    
  5.  flutter_launcher_icons: ^0.7.2+1    

Save the file and run flutter pub get on terminal.

Step 3
 
Create a folder assets in the root of the project in folder assets also create a folder icon and place your app icon inside this folder. I will recommend to user 1024x1024 app icon size. I have placed app icon inside icon folder and now I have app icon path as assets/icon/icon.png
 
Step 4
 
Now, in pubspec.yaml add the below code,
  1. flutter_icons:    
  2.  android: "launcher_icon"    
  3.  ios: true    
  4.  image_path: "assets/icon/icon.png"   

Save the file and run flutter pub get on terminal. After running command run second command as below

flutter pub run flutter_launcher_icons:main -f pubspec.yaml 

OUTPUT
 
Android minSdkVersion = 16
Creating default icons Android
Adding a new Android launcher icon
Overwriting default iOS launcher icon with new icon
 
Step 5
 
Below is the code of pubspec.yaml file so you can have more idea where to put all settings. I have highlighted important code lines with bold fonts.
  1. name: flutter_app_icon    
  2. description: App Icon Demonstration.    
  3.     
  4. version: 1.0.0+1    
  5.     
  6. environment:    
  7.  sdk: ">=2.1.0 <3.0.0"    
  8.     
  9. dependencies:    
  10.  flutter:    
  11.    sdk: flutter    
  12.  cupertino_icons: ^0.1.2    
  13.  flutter_launcher_icons: ^0.7.2+1    
  14.     
  15. dev_dependencies:    
  16.  flutter_test:    
  17.    sdk: flutter    
  18.     
  19. flutter_icons:    
  20.  android: "launcher_icon"    
  21.  ios: true    
  22.  image_path: "assets/icon/icon.png"    
  23.     
  24. flutter:    
  25.  uses-material-design: true    

 

Step 6
 
Run the code and check the icon. If you have already run the app then uninstall the app and rerun it so you can find that you get the app icon that you have placed in assets/icon folder. Great you have learned another small but important thing of flutter. Keep learning, keep sharing….
 

Conclusion

 
In this blog, we have seen how easily we can set the app icon in flutter. I have found some of the developer set the app icon by replacing all the existing icon by manually which will take more time and that is not a good way to do this. This is a recommended way to set app icon in flutter. 
Author
Mahesh Chand
1 269.3k 239.8m
Next » Bottom Navigation Tab Bar

©2024 C# Corner.