Flutter SDK is an open-source software development kit for building beautiful UI which is natively compiled. When we create a Flutter Project, it comes with the default Flutter icon. In order to get the app published in stores like Google Play Store, Apple App Store, etc the default icon can be changed. In this article, we will look into a few possible approaches to achieve the same.
There are Two ways to change the App Icon:
- Manually changing the files of Icon in Both Android and IOS folder by uploading all the required sizes of the icon.
2. Using Package which will add all the sizes of Icons in Android and IOS folders Automatically.
Approach 1: Manually changing Icons
Step 1: Generating Different Sized Icons
Go to https://appicon.co/ and upload the icon image and tick the iPhone and Android options and click on Generate. This site generates different sized Icons for both android and IOS at the same time.
It will Download the Zip file named AppIcons with the android and Assets.xcassets named folders along with images for appstore and playstore which can be directly uploaded as an icon in both the stores
Now, open your Project in Vs Code.
Step 2: Adding Icons in Android
Navigate to android/app/src/main/res and right-click on res folder and click “reveal in Explorer”. Now delete all the mipmap folders in res folder and paste the mipmap folders from AppIcon/android folder which you have downloaded.
Step 3: Adding Icons in IOS
Now navigate to the ios/Runner/Assets.xcassets. Now after you are in Runner folder, right-click on Runner folder and click “reveal in Explorer”. Now delete the Assets.xcassets folder and paste the Assets.xcassets folder from AppIcon/Assets.xcassets which you have downloaded.
Step 4: Run the Application
After manually changing the images in android and IOS folders now go to lib/main.dart and run the flutter project using the below command in the flutter console.
Approach 2: Using Package ” Flutter Launcher Icons “
By using the package we can generate the different sized Icons at a time for both android and IOS.
Step 1: Navigate to pubspec.yaml file.
Open your Project in Vs Code and Go to pubspec.yaml file.
Step 2: Update the dev_dependencies.
Go to dev_dependencies and add flutter_launcher_icons: “^0.8.0” dependency and save the file. It will get the dependency.
Step 3: Add the dependency.
Now add the flutter_icons: and save.
Step 4: Add the Assets
Now create assets folder -> create icon folder -> add icon.png file
Note: If you are not having .png image, then change the image format in image_path: as shown in the above image.
Step 5: Download the dependencies.
Open the Terminal in Vs Code and run
flutter pub get
After the command is executed successfully then run
flutter pub run flutter_launcher_icons:main
After both the commands are executed successfully then go to lib/main.dart file and run the app