Before starting double check that the sdk and simulators/emulators are correctly installed and setup by running
For this tutorial we are going to take the Markdown Editor Application that we have built in a previous article and release it to both AppStores.
Entries in the serie:
You can use the flutterlaunchericons package to automatically generate all the icons for your application. Before doing that you need to have your android icon file and your iOS icon file. Remember that the iOS file can’t have any transparency (all the background needs to be filled).
Open your “pubspec.yaml” and under “dev_dependencies” add:
dev_dependencies: flutter_test: sdk: flutter flutter_launcher_icons:#<- add
Right under you need to add the configuration:
flutter_icons: android: "ic_launcher" ios: true image_path: "icons/android.png" image_path_ios: "icons/iOS.png" adaptive_icon_background: "#4D92F7"
“android:” is the filename of the generated android icon “ios:” if you also need to generate the iOS icons “imagepath:” the location of the source image used to generate the android icons “imagepathios:” the location of the source image used to generate the iOS icons “adaptiveicon_background:” the main background color of the image used to fill the background for bigger launch images
Now we need to manually execute the package to generate the icons. Open your terminal (also navigate to the directory of your project) and run
flutter packages pub run flutter_launcher_icons:main.
After a short while you will find the generated icons already included in both Android and iOS applications.
That’s it. You can open the projects manually if you want to only change specific icons. The nice thing about this package is that it doesn’t force you to have only one icon across both platforms and that you can customize a lot about how your icons are going to look and feel.
If you don’t want to use a specific package and prefer to do everything manually you can follow the steps below. It will be obviously more time consuming, but you will have control on how every single icon so you can make different icons for different sizes if you so prefer.
Generate the icons
The first step is to generate all the icons in the various screen sizes. You can do it manually using your favorite image editor like Photoshop or command line tool such as ImageMagick. Otherwise you can use one of the many free websites to automatically generate them. The advantage of most websites is that they’re already going to export the icons in the correct folder so that they get automatically recognized by both Xcode and Android Studio.
For this tutorial we are going to use a website from this list:
Any other website or tool with similar functionality is fine as well. If could even be a custom script using Image Magick.
You can choose any between them, the result is basically the same. Always be wary when using an external tool since you give them access to your images and you never know what they do with them.
Each websites asks for a different input image, but usually a single image 1024x1024 px is going to be fine anywhere.
Embed the icons in your application
The next step is to include the generated files in your application.
To open the project in Xcode and Android Studio respectively simply drag the ios and android folders on top of their icons. To include the icons and upload the application to the stores you should (and in the case of iOS must) use Xcode and Android Studio.
If you’ve generated the icons using a website or an automatic tool that is going to generate the whole folder structure for you it is enough to simply drag the android and ios folders to their right place in the filesystem. Otherwise you would need to manually drag each icon yourself.
On iOS you’d need to open the “Assets.xcassets” folder, inside you will find the “AppIcon” folder which includes the icons necessary for iOS. Remember that on top of these icons you are also are going to need graphic assets for the App Store page.
On Android you’d need to open the “res” folder, inside you will find all the various folders for the different screen resolutions: “hdpi”, “mdpi”, “xhdpi”, “xxhdpi” and “xxxhdpi”. Remember that on top of these icons you are also are going to need graphic assets for the Play Store page.
On top of the icons you can also include a custom launch screen shown to the user while your application is launched and it was not in the background.
On iOS you will find the “LaunchScreen.storyboard” file in the “Runner” folder. Open it with Xcode to edit.
On Android you will find the “launch_background.xml” file alongside the icons inside the “res” folder, in the “drawable” subfolder.
Be aware that your iOS and especially your Android application will run on many different screen dimensions. You should at least test on both a smartphone and a tablet to check the two form factor and if the images that you have added do not stretch and look off on a bigger screen.
You’ve learned how to add app icons to both the Android and the iOS application. Stay tuned for the next entry in the series when we are going to release the completed app to both stores.
Subscribe to Learning Flutter
Get the latest posts delivered right to your inbox