Dynamic App Launcher Icons In Flutter

You’ve probably come across those apps that can pull off a neat trick — changing their app icon, perhaps at the festival Or when they’re celebrating something special, and then seamlessly switching back to the regular one. Let’s change the dynamic app launcher icons in Flutter.

It’s the kind of feature that piques your curiosity, making you wonder, ‘How on earth do they do that?’ Well, you’re not alone in your curiosity.

So in this article, we’re going to unravel the mystery behind changing the dynamic app launcher icons in Flutter at runtime. We’ll break it down for you, step by step, and show you that it’s not just doable, but also pretty manageable.

Additionally, you may read more about Mobikul’s Flutter app development services.

We’ll break this into two parts:

• First For the Android
• Second For the iOS

Note: We’re going to use the Method Channel for this Process. You can also check the Blog for the Method Channel.

Android Part

Here is a simple way to change your Android app’s Launcher icon and Application name dynamically.

Step 1

Create an empty class each for the number of icons wanted to declare. In my example, I want to create 3 launcher icon which I would be changing it dynamically. So I created FirstLauncherAlias.kt, SecondLauncherAlias.kt and ThirdLauncherAlias.kt

Step 2

Add activity-alias in your AndroidManifest.xml

NOTE: Generate the different launcher icons for the alias.

This we’ll be our complete AndroidManifest.xml File.

Step 3

Enable and disable the activity alias based on your requirements. In my example, On clicking on one layout, I am enabling the activity-alias FirstLauncherAlias and disabling the rest.

This we’ll be our complete MainActivity.kt File.

Step 4

This we’ll be our complete AppSharedPref.kt File.

iOS Part

In iOS 10.3 version, Apple introduced an amazing feature using which developers can now change the app’s icon with predefined additional icons through code, without re-submitting the app to the App store.

Step 1

Create alternate app icons of specific sizes

We just need two sizes of our alternate icon

• [email protected] = 120 x 120 pixels
• DefaultAppIcon@3x.png = 180 x 180 pixels

We need to add @2x and @3x after our icon name for the system to know which one to use on different screens.

We are supposed to add these icons inside our project folder and not in the Assets.xcassets, as we do with other icons/images.

Step 2

Now we have to add the alternate icon in our Info.plist file.

1. Add Icon files (iOS 5)/CFBundleIcons to the Info.plist
2. Add CFBundleAlternateIcons as a Dictionary which will be used for alternative icons

For each alternate icon, add a new entry in the info.plist file, under CFBundleAlternateIcons.

Here we have kept the same name for both for easy to use & simplicity.

Step 3

Used this piece of code to update the app icon in the iOS app.

This will be our complete AppDelegate file.

Let’s Move on to the Flutter side code.

This will be our dynamic_launcher.dart file code.

Here is the final output for the Android App.

Conclusion

Now you also know how to change Dynamic App Launcher Icons In Flutter.

Thanks for reading this blog. You can also check other blogs from here for more knowledge.

Always be ready for learning