A flutter plugin for dynamically changing app icon and app icon batch number in the mobile platform. Supports iOS (with version > 10.3
) and Android.
To use this plugin, add flutter_dynamic_icon
as a dependency in your pubspec.yaml file.
Check out the example
directory for a sample app using flutter_dynamic_icon
.
2x
-120px x 120px
3x
-180px x 180px
To integrate your plugin into the iOS part of your app, follow these steps
- First let us put a few images for app icons, they are
teamfortress@2x.png
,teamfortress@3x.png
photos@2x.png
,photos@3x.png
,chills@2x.png
,chills@3x.png
,
- These icons shouldn't be kept in
Assets.xcassets
folder, but outside. Here is my directory structure:
- Next, we need to setup the
Info.plist
- Add
Icon files (iOS 5)
to the Information Property List - Add
CFBundleAlternateIcons
as a dictionary, it is used for alternative icons - Set 3 dictionaries under
CFBundleAlternateIcons
, they are correspond toteamfortress
,photos
, andchills
- For each dictionary, two properties —
UIPrerenderedIcon
andCFBundleIconFiles
need to be configured
- Add
Note that if you need it work for iPads, You need to add these icon declarations in CFBundleIcons~ipad
as well. See here for more details.
Here is my Info.plist
after adding Alternate Icons
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>CFBundleDevelopmentRegion</key>
<string>en</string>
<key>CFBundleExecutable</key>
<string>$(EXECUTABLE_NAME)</string>
<key>CFBundleIcons</key>
<dict>
<key>CFBundleAlternateIcons</key>
<dict>
<key>chills</key>
<dict>
<key>CFBundleIconFiles</key>
<array>
<string>chills</string>
</array>
<key>UIPrerenderedIcon</key>
<false/>
</dict>
<key>photos</key>
<dict>
<key>CFBundleIconFiles</key>
<array>
<string>photos</string>
</array>
<key>UIPrerenderedIcon</key>
<false/>
</dict>
<key>teamfortress</key>
<dict>
<key>CFBundleIconFiles</key>
<array>
<string>teamfortress</string>
</array>
<key>UIPrerenderedIcon</key>
<false/>
</dict>
</dict>
<key>CFBundlePrimaryIcon</key>
<dict>
<key>CFBundleIconFiles</key>
<array>
<string>chills</string>
</array>
<key>UIPrerenderedIcon</key>
<false/>
</dict>
</dict>
<key>CFBundleIdentifier</key>
<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
<key>CFBundleInfoDictionaryVersion</key>
<string>6.0</string>
<key>CFBundleName</key>
<string>flutter_dynamic_icon_example</string>
<key>CFBundlePackageType</key>
<string>APPL</string>
<key>CFBundleShortVersionString</key>
<string>$(FLUTTER_BUILD_NAME)</string>
<key>CFBundleSignature</key>
<string>????</string>
<key>CFBundleVersion</key>
<string>$(FLUTTER_BUILD_NUMBER)</string>
<key>LSRequiresIPhoneOS</key>
<true/>
<key>UILaunchStoryboardName</key>
<string>LaunchScreen</string>
<key>UIMainStoryboardFile</key>
<string>Main</string>
<key>UISupportedInterfaceOrientations</key>
<array>
<string>UIInterfaceOrientationPortrait</string>
<string>UIInterfaceOrientationLandscapeLeft</string>
<string>UIInterfaceOrientationLandscapeRight</string>
</array>
<key>UISupportedInterfaceOrientations~ipad</key>
<array>
<string>UIInterfaceOrientationPortrait</string>
<string>UIInterfaceOrientationPortraitUpsideDown</string>
<string>UIInterfaceOrientationLandscapeLeft</string>
<string>UIInterfaceOrientationLandscapeRight</string>
</array>
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>
</dict>
</plist>
-
First let us put a few images for app icons, they are
./android/app/src/main/res/mipmap/teamfortress.png
./android/app/src/main/res/mipmap/photos.png
./android/app/src/main/res/mipmap/chills.png
-
We need to setup the
AndroidManifest.xml
<activity-alias
android:icon="@mipmap/teamfortress"
android:name=".teamfortress"
android:enabled="false"
android:targetActivity="io.flutter.embedding.android.FlutterActivity">
<meta-data
android:name="io.flutter.app.android.SplashScreenUntilFirstFrame"
android:value="true" />
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity-alias>
<activity-alias
android:icon="@mipmap/photos"
android:name=".photos"
android:enabled="false"
android:targetActivity="io.flutter.embedding.android.FlutterActivity">
<meta-data
android:name="io.flutter.app.android.SplashScreenUntilFirstFrame"
android:value="true" />
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity-alias>
<activity-alias
android:icon="@mipmap/chills"
android:name=".chills"
android:enabled="false"
android:targetActivity="io.flutter.embedding.android.FlutterActivity">
<meta-data
android:name="io.flutter.app.android.SplashScreenUntilFirstFrame"
android:value="true" />
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity-alias>
Now, you can call FlutterDynamicIcon.setAlternateIconName
with the CFBundleAlternateIcons
key as the argument to set that icon.
From your Dart code, you need to import the plugin and use it's static methods:
import 'package:flutter_dynamic_icon/flutter_dynamic_icon.dart';
try {
if (await FlutterDynamicIcon.supportsAlternateIcons) {
await FlutterDynamicIcon.setAlternateIconName("photos");
print("App icon change successful");
return;
}
} on PlatformException {} catch (e) {}
print("Failed to change app icon");
...
// set batch number
try {
await FlutterDynamicIcon.setApplicationIconBadgeNumber(9399);
} on PlatformException {} catch (e) {}
// gets currently set batch number
int batchNumber = FlutterDynamicIcon.getApplicationIconBadgeNumber();
Check out the example
app for more details
This was made possible because this blog. I borrowed a lot of words from this blog. https://medium.com/ios-os-x-development/dynamically-change-the-app-icon-7d4bece820d2