Platform-Specific Setup
In this section we’ll see how to change the app name and launcher icon of a Flutter app by editing the platform-specific configuration.
Setting a Custom App Name
The Dart package name (which is also the default app name) has to be composed of just lowercase letters and underscore, which isn’t really much. That’s why we are going to set our own app name by digging into the platform-specific configuration.
Setting the Android App Name
The app name displayed on Android can be changed by changing the android:label attribute of the application tag in the AndroidManifest.xml file found in appdir/android/app/src/main. This is what it would look like if we were configuring the Chat on Fire app we built in the last chapter of the book:
| | <application |
| | android:name="io.flutter.app.FlutterApplication" |
| | android:label="Chat on Fire" |
| | android:icon="@mipmap/ic_launcher"> |
Setting the iOS App Name
The app name displayed on iOS is usually changed by opening the Runner.xcworkspace Xcode project in the ios directory in Xcode and changing the Display name project-level setting. Alternatively, add a key called CFBundleDisplayName followed by a string to the Info.plist file in the appdir/ios/Runner directory, like in the following example:
| | <key>CFBundleDisplayName</key> |
| | <string>Chat on Fire</string> |
Setting the Launcher Icon
Any decent app needs a custom icon, and Flutter apps certainly don’t make for an exception to that. There is a CLI tool on Pub called flutter_launcher_icons that simplifies this, but you may choose to do that manually. This section will cover both cases.
Using Flutter Launcher Icons to Change the Launcher Icon
The Flutter Launcher Icons package is the typical example of a package that should be added to the dev_dependencies section in pubspec.yaml:
| | dev_dependencies: |
| | flutter_launcher_icons: |
| | flutter_test: |
| | sdk: flutter |
After doing that and running:
| | $ flutter packages get |
it’s time to configure the package.
A Quick and Simple Example
This can be done either in pubspec.yaml or in a new file by adding a flutter_icons section:
| | flutter_icons: |
| | image_path: "icons/launcher_icon.png" |
| | android: true |
| | ios: true |
This is what you’ll use most of the time: the image_path will be the path to the image that will be used to overwrite the default launcher image for both Android and iOS when you run:
| | $ flutter packages run flutter_launcher_icons:main |
Choosing a Different Path for the Configuration File
That command will work if the configuration is either in pubspec.yaml or in a file you create called flutter_launcher_icons.yaml. If you want to use a custom file with a different name you can use the -f option in the following way:
| | $ flutter packages run flutter_launcher_icons:main -f filename.yaml |
Using Different Files for Android and iOS
Instead of providing one image_path for both Android and iOS, you might choose to set an image_path_android for Android and an image_path_ios for iOS. You might want to do that because, unlike Android, iOS will replace any transparency with black, meaning that iOS app icons have to fill the entire image and not have transparent borders, unlike Android icons.
Changing the Launcher Icon Manually
Instead of using the flutter_launcher_icons package, you might want to change the launcher icon yourself. This is very time-consuming to do 100% manually: for Android, you can change the app icon by providing different resolutions of the launcher icon for devices with different pixel density values in the appdir/android/app/src/main/res/mipmap-*dpi (following the official Android Developer guidelines[59]). A similar process is required for iOS icons to replace the ones in the appdir/ios/Runner/Assets.xcassets/Appicon.appiconset.
A way to bypass some of that is by using Android Studio’s Image Asset creation tool that will automatically generate different resolutions of the icon, and by opening Assets.xcassets in appdir/ios/Runner with Xcode and using that to replace the default icons.
With that, your app should be ready for distribution to your users, whatever operating system their phone runs on.
Footnotes
How did you enjoy this book? Please let us know. Take a moment and email us at [email protected] with your feedback. Tell us your story and you could win free ebooks. Please use the subject line “Book Feedback.”
Ready for your next great Pragmatic Bookshelf book? Come on over to https://pragprog.com and use the coupon code BUYANOTHER2020 to save 30% on your next ebook.
Void where prohibited, restricted, or otherwise unwelcome. Do not use ebooks near water. If rash persists, see a doctor. Doesn’t apply to The Pragmatic Programmer ebook because it’s older than the Pragmatic Bookshelf itself. Side effects may include increased knowledge and skill, increased marketability, and deep satisfaction. Increase dosage regularly.
And thank you for your continued support,
Andy Hunt, Publisher
