A Design And DevOPS Way Of Generating Flutter Launch Icons
Flutter SDK has app launcher icons wrong, this is a way to fix them
Flutter Launcher Icons Package
The Flutter Launcher Icons package is here, at pub dev website:
flutter launcher icons package
https://pub.dev/packages/flutter_launcher_icons
This package was created by Mark O'Sullivan via his Flutter work experience at the London UK agency, DevAngels.
Mark O'Sullivan's Twitter is at:
https://twitter.com/MarkOSullivan94
And Mark O'Sullivan's Bluesky is at:
https://bsky.app/profile/marko.dev
Now, let's see how to use it.
Using Flutter Launcher Icons Package
To use the package we need an entry in the dev dependencies block of the pubspec YAML of our flutter app project:
| name: launcher_icons_demo | |
| description: "A new Flutter project." | |
| # Prevent accidental publishing to pub.dev. | |
| publish_to: 'none' | |
| version: 1.0.0+1 | |
| environment: | |
| sdk: '>=3.2.0-210.2.beta <4.0.0' | |
| dependencies: | |
| flutter: | |
| sdk: flutter | |
| flutter_localizations: | |
| sdk: flutter | |
| dev_dependencies: | |
| flutter_test: | |
| sdk: flutter | |
| flutter_launcher_icons: "^0.13.1" | |
| flutter_lints: ^2.0.0 | |
| flutter: | |
| uses-material-design: true | |
| # Enable generation of localized Strings from arb files. | |
| generate: true | |
| assets: | |
| # Add assets from the images directory to the application. | |
| - assets/images/ |
Then we have to define a flutter launcher icons YAML configuration file:
| flutter_launcher_icons: | |
| image_path_android: "assets/ic_logo_border.png" | |
| image_path_ios: "assets/ic_squircle.png" | |
| android: true | |
| ios: true | |
| adaptive_icon_background: "assets/ic_background.png" | |
| adaptive_icon_foreground: "assets/ic_foreground.png" | |
| min_sdk_android: 21 | |
| remove_alpha_ios: true | |
| background_color_ios: "#ffffff" | |
| web: | |
| generate: true | |
| image_path: "assets/ic_squircle.png" | |
| background_color: "#hexcode" | |
| theme_color: "#hexcode" | |
| windows: | |
| generate: true | |
| image_path: "assets/ic_squircle.png" | |
| icon_size: 48 | |
| macos: | |
| generate: true | |
| image_path: "assets/ic_squircle.png" |
Now, let me explain my design twists. I use an iOS squircle shape for the platforms of iOS, MacOS, Web, Windows, and Linux. With android I use a border shape.
The templates for the shapes are in the app_artwork subfolder of the launcher icons demo project.And that project is a subfolder named code infrastructure in the following repo:
Flutter Bytes DevOPS
https://github.com/fredgrott/flutter_bytes_devops
Now, we need to deal with the Android 13 Themed icons workaround. An example of the workaround is in the appropriate resource folders in the android portion of the project and in the subfolder of the app_artwork folder named, android monochrome resizing.
The workaround consists of file to put in the resource folder named mipmap anydpi 26:
IC Launcher XML file
| <?xml version="1.0" encoding="utf-8"?> | |
| <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android"> | |
| <background android:drawable="@drawable/ic_launcher_background"/> | |
| <foreground android:drawable="@drawable/ic_launcher_foreground"/> | |
| <monochrome android:drawable="@drawable/ic_launcher_monochrome"/> | |
| </adaptive-icon |
Then the icon logo monochrome version is resized for the following resource folders:
-drawable hdpi 162x162
-drawable mdpi 108x108
-drawable xhdpi 216x216
-drawable xxhdpi 324x324
-drawable xxxhdpi 432x432
Once has the correct launcher icons inserting the assets subfolder matching the flutter launcher icons xml file you need to open a terminal and type these commands to generate the launcher icons:
flutter pub get
flutter pub run flutter_launcher_icons -f flutter_launcher_icons.yaml
Thoughts
This is just the first part of the DevOPS tasks to complete in setting up a flutter app project. The plan is to go through rest of devOPS, including a new way to do storyboarding that Google just adapted and how to re-use it for widget testing.
In fact, that adaption of storyboarding by Google is so new that is not yet in the Flutter docs. I only found it as I was exploring the Google cloud powered Flutter IDE based on VSCode.