Until recently, setting up app icons in Flutter app projects was a long and arduous process. Each respective Android and iOS version of a project required copying and replacing default icons in your res & assets folders. Fortunately, this has changed. With the release of Flutter Launcher Icons by the Flutter development team, app icon generation can be automated and executed instantly.
What is an App Icon?
App, or application, icons represent your app in stores and in the user’s app drawer when installed. They’re the first things we see before clicking on or developing an application. As such, it’s extremely important to set clean and unique icons for a great first impression.
Below, I outline the step-by-step process of setting up app icons for both iOS and Android using the flutter_launcher_icons package. Read on to find out more.
Installing Flutter Launcher Icons
After creating a standard Android Studio project, installing the flutter_launcher_icons package is the next step.
Go to the root of your Flutter project and open your pubspec.yaml file. Paste the following under dev_dependencies to signal the build script to use the flutter_launcher_icons package.
dev_dependencies: flutter_launcher_icons: ^0.7.4
Next comes configuration. This involves stating where to find your icons and whether to apply them to iOS, Android or both. There’s three variables to set: android, ios and image_path. In the same pubspec.yaml file, add the following configuration:
flutter_icons: android: true ios: true image_path: "assets/icon.png"
Assuming you’ve already designed your icons, the image_path attribute is the location of your icon file in the project folder. In this case, we’ve named our icon icon.png and placed it under the assets folder.
Setting android and ios attributes to true indicates that we want to generate icons for both platforms. Bear in mind that there are requirements for both Android and iOS applications. Any icons applicable to iOS applications should conform to Apple’s requirements needing icon sizes to be at least 1024x1024px.
Should you choose to use different icons for iOS and Android, you can use the image_path_ios and image_path_android attributes:
flutter_icons: android: true ios: true image_path_ios: 'assets/ios_icon.png' image_path_android: 'assets/android_icon.png'
After configuration, icon generation takes just a few simple commands:
# Get the flutter_launcher_icons package specified in dev_depencies flutter pub get # Generate icons according to our configuration flutter pub run flutter_launcher_icons:main
Be sure to confirm the icons have changed by re-building your application or running flutter run. Your icons should now be visible on both Android and iOS platforms depending on your configuration settings. With the time you saved, it may be a good idea to grab a coffee and admire your work.
For more information on Flutter packages, visit pub.dev to see a comprehensive list of interesting packages for your next project.