Flutter Dynamic Icon: A Step-by-Step Guide to Dynamic App Icons

Have you ever wondered how some apps have the magical ability to change their app icon based on certain conditions? Whether it's a special event, a feature update, or an app icon batch number notification, dynamically changing app icons can make your app stand out.

In this blog, we’ll walk you through everything you need to know about adding dynamic icons to your Flutter app using the flutter_dynamic_icon package.

What Will We Cover?

This guide will cover how to set up your Flutter project to support dynamically changing app icons, including detailed steps for both Android and iOS. We'll also provide code examples and tips to help you avoid common pitfalls. By the end of this blog, you’ll know how to use the Flutter plugin for dynamically changing your app icon based on your app's needs.

What are Dynamic App Icons?

Dynamic app icons allow your app to switch between different icons based on specific conditions or user actions. This feature enhances user engagement and provides a more personalized experience. In Flutter, you can achieve this using the flutter_dynamic_icon plugin.

Implementing Dynamic App Icons

Step 1: Setting Up Your Flutter Project

First, ensure you have a Flutter project set up. If not, create one using the following command:

Copy
1
2
flutter create dynamic_icon_example
cd dynamic_icon_example

Adding Dependencies

Add the flutter_dynamic_icon dependency to your pubspec.yaml file:

Copy
1
2
3
4
dependencies:
  flutter:
    sdk: flutter
  flutter_dynamic_icon: latest_version

Run flutter pub get to fetch the new dependency.

Step 2: Configuring for Android

Adding Icons

Place your alternate icons in the appropriate directories. Typically, you need to add different sizes for different screen resolutions. Place your icon files in the android/app/src/main/res/mipmap directory.

Updating AndroidManifest.xml

In your AndroidManifest.xml, you need to define multiple activity-alias tags for each app icon you want to support:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.dynamic_icon_example">
    <application
        android:icon="@mipmap/ic_launcher"
        android:label="Dynamic Icon Example"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:theme="@style/LaunchTheme">

        <!-- Default Activity -->
        <activity
            android:name=".MainActivity"
            android:exported="true"
            android:theme="@style/LaunchTheme">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

        <!-- Alternate Icons -->
        <activity-alias
            android:enabled="false"
            android:icon="@mipmap/ic_alternate_icon"
            android:roundIcon="@mipmap/ic_alternate_icon_round"
            android:label="Dynamic Icon Example"
            android:name=".MainActivityAlias1"
            android:targetActivity=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity-alias>

    </application>
</manifest>

Step 3: Configuring for iOS

Adding Icons

For iOS, you need to add your alternate icons to the ios/Runner/Assets.xcassets directory. Create new image sets for each alternate icon.

Updating Info.plist

Update your Info.plist to include references to your alternate icons:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<key>CFBundleIcons</key>
<dict>
    <key>CFBundlePrimaryIcon</key>
    <dict>
        <key>CFBundleIconFiles</key>
        <array>
            <string>AppIcon</string>
        </array>
        <key>UIPrerenderedIcon</key>
        <false/>
    </dict>
    <key>CFBundleAlternateIcons</key>
    <dict>
        <key>AlternateIcon</key>
        <dict>
            <key>CFBundleIconFiles</key>
            <array>
                <string>AlternateIcon</string>
            </array>
            <key>UIPrerenderedIcon</key>
            <false/>
        </dict>
    </dict>
</dict>

Step 4: Implementing the Dart Code

Now, let’s write the Dart code to switch between different icons. Open your main.dart file and set up your app to use the flutter_dynamic_icon plugin.

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
import 'package:flutter/material.dart';
import 'package:flutter_dynamic_icon/flutter_dynamic_icon.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dynamic Icon Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () async {
                await FlutterDynamicIcon.setAlternateIconName('AlternateIcon');
              },
              child: Text('Change to Alternate Icon'),
            ),
            ElevatedButton(
              onPressed: () async {
                await FlutterDynamicIcon.setAlternateIconName(null);
              },
              child: Text('Change to Default Icon'),
            ),
          ],
        ),
      ),
    );
  }
}

Handling Errors

Ensure you handle potential errors when changing the icon:

Copy
1
2
3
4
5
try {
  await FlutterDynamicIcon.setAlternateIconName('AlternateIcon');
} catch (e) {
  print('Error changing icon: $e');
}

Conclusion

Adding a flutter dynamic icon to your app can significantly enhance user experience by providing a more interactive and personalized interface. By following this step-by-step guide, you can implement dynamically changing app icons in your Flutter app seamlessly. Dive into the world of dynamic icons and make your app stand out in the crowded app stores.

By incorporating this flutter plugin for dynamically changing app icons, your app will not only look more engaging but also keep your users intrigued with constant visual updates. Happy coding!