Design Converter
Education
Last updated on Jul 3, 2024
Last updated on Jul 1, 2024
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.
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.
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.
First, ensure you have a Flutter project set up. If not, create one using the following command:
1flutter create dynamic_icon_example 2cd dynamic_icon_example
Add the flutter_dynamic_icon dependency to your pubspec.yaml file:
1dependencies: 2 flutter: 3 sdk: flutter 4 flutter_dynamic_icon: latest_version
Run flutter pub get to fetch the new dependency.
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.
In your AndroidManifest.xml, you need to define multiple activity-alias tags for each app icon you want to support:
1<manifest xmlns:android="http://schemas.android.com/apk/res/android" 2 package="com.example.dynamic_icon_example"> 3 <application 4 android:icon="@mipmap/ic_launcher" 5 android:label="Dynamic Icon Example" 6 android:roundIcon="@mipmap/ic_launcher_round" 7 android:theme="@style/LaunchTheme"> 8 9 <!-- Default Activity --> 10 <activity 11 android:name=".MainActivity" 12 android:exported="true" 13 android:theme="@style/LaunchTheme"> 14 <intent-filter> 15 <action android:name="android.intent.action.MAIN" /> 16 <category android:name="android.intent.category.LAUNCHER" /> 17 </intent-filter> 18 </activity> 19 20 <!-- Alternate Icons --> 21 <activity-alias 22 android:enabled="false" 23 android:icon="@mipmap/ic_alternate_icon" 24 android:roundIcon="@mipmap/ic_alternate_icon_round" 25 android:label="Dynamic Icon Example" 26 android:name=".MainActivityAlias1" 27 android:targetActivity=".MainActivity"> 28 <intent-filter> 29 <action android:name="android.intent.action.MAIN" /> 30 <category android:name="android.intent.category.LAUNCHER" /> 31 </intent-filter> 32 </activity-alias> 33 34 </application> 35</manifest>
For iOS, you need to add your alternate icons to the ios/Runner/Assets.xcassets directory. Create new image sets for each alternate icon.
Update your Info.plist to include references to your alternate icons:
1<key>CFBundleIcons</key> 2<dict> 3 <key>CFBundlePrimaryIcon</key> 4 <dict> 5 <key>CFBundleIconFiles</key> 6 <array> 7 <string>AppIcon</string> 8 </array> 9 <key>UIPrerenderedIcon</key> 10 <false/> 11 </dict> 12 <key>CFBundleAlternateIcons</key> 13 <dict> 14 <key>AlternateIcon</key> 15 <dict> 16 <key>CFBundleIconFiles</key> 17 <array> 18 <string>AlternateIcon</string> 19 </array> 20 <key>UIPrerenderedIcon</key> 21 <false/> 22 </dict> 23 </dict> 24</dict>
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.
1import 'package:flutter/material.dart'; 2import 'package:flutter_dynamic_icon/flutter_dynamic_icon.dart'; 3 4void main() { 5 runApp(MyApp()); 6} 7 8class MyApp extends StatelessWidget { 9 10 Widget build(BuildContext context) { 11 return MaterialApp( 12 home: MyHomePage(), 13 ); 14 } 15} 16 17class MyHomePage extends StatelessWidget { 18 19 Widget build(BuildContext context) { 20 return Scaffold( 21 appBar: AppBar( 22 title: Text('Dynamic Icon Example'), 23 ), 24 body: Center( 25 child: Column( 26 mainAxisAlignment: MainAxisAlignment.center, 27 children: <Widget>[ 28 ElevatedButton( 29 onPressed: () async { 30 await FlutterDynamicIcon.setAlternateIconName('AlternateIcon'); 31 }, 32 child: Text('Change to Alternate Icon'), 33 ), 34 ElevatedButton( 35 onPressed: () async { 36 await FlutterDynamicIcon.setAlternateIconName(null); 37 }, 38 child: Text('Change to Default Icon'), 39 ), 40 ], 41 ), 42 ), 43 ); 44 } 45}
Ensure you handle potential errors when changing the icon:
1try { 2 await FlutterDynamicIcon.setAlternateIconName('AlternateIcon'); 3} catch (e) { 4 print('Error changing icon: $e'); 5}
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!
Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!
You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.