Nowadays, almost every application includes premium features, providing additional benefits for users. For premium users, it's a great idea to change the app icon, as many apps like Zomato, Swiggy etc. do. However, changing the app icon dynamically requires some effort. For Android or iOS applications, we simply update the respective native files. But for cross-platform frameworks like Flutter, we need to work on both Android and iOS to reflect the changes. Now, let's discuss a step-by-step guide to adding dynamic icons in Flutter. ## Android ### Step 1: For now, I would like to add an icon for a Premium User. First, we need to add a new activity-alias for the Premium activity to display the new app icon for the premium user. We need to add a new icons set for the premium app icon in your folder `android->app->src->main->res`. You can also add a separate round icon if required. ```xml

``` > **Note:** > Add all your app deeplinks inside the activity alias, just as you have them inside the main activity, to ensure that deeplinks work correctly. ### Step 2: Now, let's create the plugin to change the icon. ```kotlin class PremiumIconPlugin(private val context: Context) { private lateinit var channel: MethodChannel private val packageName = context.packageName fun initWith(binaryMessenger: BinaryMessenger) { channel = MethodChannel(binaryMessenger, "premium_icon") channel.setMethodCallHandler { call, result -> when (call.method) { "updateToPremiumIcon" -> { updateToPremiumIcon() result.success(true) } "updateToDefaultIcon" -> { updateToDefaultIcon() result.success(true) } else -> result.notImplemented() } } } private fun updateToPremiumIcon() { changeIcon("PremiumActivity", "MainActivity") } private fun updateToDefaultIcon() { changeIcon("MainActivity", "PremiumActivity") } private fun changeIcon(newActivity: String, oldActivity: String) { val packageManager = context.packageManager val newComponentName = ComponentName(context, "$packageName.$newActivity") val oldComponentName = ComponentName(context, "$packageName.$oldActivity") // Enable the new activity alias packageManager.setComponentEnabledSetting( newComponentName, PackageManager.COMPONENT_ENABLED_STATE_ENABLED, PackageManager.DONT_KILL_APP ) // Disable the old activity alias packageManager.setComponentEnabledSetting( oldComponentName, PackageManager.COMPONENT_ENABLED_STATE_DISABLED, PackageManager.DONT_KILL_APP ) } } ``` And initialize the plugin in `MainActivity`. That's all we need to do for Android. ## iOS ### Step 1: Add the premium app icon set in the `Assets.xcassets`. Navigate to Assets -> New iOS App Icon -> add all the icon variations. Next, open `Info.plist` [open as source code] and add `CFBundleIcons` as shown below: ```xml CFBundleIcons CFBundlePrimaryIcon CFBundleIconFiles UIPrerenderedIcon CFBundleAlternateIcons PremiumAppIcon CFBundleIconFiles PremiumAppIcon UIPrerenderedIcon ``` You need to add your alternate icons [premium, festival, event etc..] in `CFBundleAlternateIcons`. Ensure the string name matches the app icon name in the Assets. In this case, I used `PremiumAppIcon`, so the string is `PremiumAppIcon`. ### Step 2: Now, let's create the Swift Plugin. In Swift, we use the `setAlternateIconName()` method to change the app icon, which simplifies our task. Here's the plugin code: ```swift public class PremiumIconPlugin: NSObject, FlutterPlugin { public static func register(with registrar: FlutterPluginRegistrar) { let channel = FlutterMethodChannel(name: "premium_icon", binaryMessenger: registrar.messenger()) let instance = PremiumIconPlugin() registrar.addMethodCallDelegate(instance, channel: channel) } public func handle(_ call: FlutterMethodCall, result: @escaping FlutterResult) { switch call.method { case "updateToPremiumIcon": updateToPremiumIcon(result: result) case "updateToDefaultIcon": updateToDefaultIcon(result: result) default: result(FlutterMethodNotImplemented) } } private func updateToPremiumIcon(result: @escaping FlutterResult) { setAlternateIconName(iconName: "PremiumAppIcon", result: result) } private func updateToDefaultIcon(result: @escaping FlutterResult) { setAlternateIconName(iconName: nil, result: result) // Passing nil to reset to default } private func setAlternateIconName(iconName: String?, result: @escaping FlutterResult) { if UIApplication.shared.supportsAlternateIcons { UIApplication.shared.setAlternateIconName(iconName) { error in DispatchQueue.main.async { if let error = error { print("Error changing app icon: \(error.localizedDescription)") // Report the error back to Flutter result(FlutterError(code: "Icon Change Error", message: "Failed to change icon: \(error.localizedDescription)", details: nil)) } else { // Success, return true result(true) } } } } else { DispatchQueue.main.async { // If alternate icons are not supported, report it back to Flutter result(FlutterError(code: "Unsupported", message: "Alternate icons not supported", details: nil)) } } } } ``` Make sure the method channel name is consistent in both Android and iOS, as we use this method channel name in Flutter. Use the same method names for both Android and iOS to maintain consistency. To change the app icon to the default, pass `nil` to the `setAlternateIconName` method. To change to a specific icon, provide the IconName. > **Note:** > There is an important setting to update for dynamic app icons: > Open XCode -> Runner -> TARGETS -> Select your Runner -> General -> App Icons and Launch Screen -> Select the check box with name **include all app icon assets**. > Don't forget to initialize the plugin in `AppDelegate.swift`. With these steps, we have successfully created the plugins for both Android and iOS. ## Final Part: Setting Up in Flutter Let's create a `premium_icon_changer.dart` file and add the necessary methods to change the app icon. ```dart class PremiumIconChanger { static const MethodChannel _channel = MethodChannel('premium_icon'); static Future updateToDefaultIcon() async { try { await _channel.invokeMethod('updateToDefaultIcon'); } on PlatformException catch (e) { //add if required print("Failed to change icon: ${e.message}"); } on MissingPluginException catch (e) { //add if required print("Failed to change icon: ${e.message}"); } } static Future updateToPremiumIcon() async { try { await _channel.invokeMethod('updateToPremiumIcon'); } on PlatformException catch (e) { //add if required print("Failed to change icon: ${e.message}"); } on MissingPluginException catch (e) { //add if required print("Failed to change icon: ${e.message}"); } } } ``` ### Explanation: 1. **Method Channel:** We define a `MethodChannel` named `'premium_icon'` to communicate with the platform-specific code. 2. **Update to Default Icon:** The `updateToDefaultIcon` method invokes the `updateToDefaultIcon` method on the native side. If an error occurs, it prints the error message. 3. **Update to Premium Icon:** The `updateToPremiumIcon` method invokes the `updateToPremiumIcon` method on the native side. Similarly, it prints any error messages that occur. Now, our class is complete. We just need to use these methods to update the app icon according to our requirements. For instance, you might call `updateToPremiumIcon` when a user purchases a premium subscription and `updateToDefaultIcon` when the premium subscription expires or is canceled. ## Conclusion Dynamic app icons can make your app more engaging by showing updates or special features. This guide covered how to set up dynamic icons for both Android and iOS and how to manage them from your Flutter app. By following these steps, you can provide a more personalized experience for your users.

All Posts

Implementing Dynamic App Icons in Flutter: A Step-by-Step Guide