Flutter 动态修改应用图标功能指南

视频

https://youtu.be/LaK38SrwJ7w

https://www.bilibili.com/video/BV1yu4m1u7eP/

前言

原文 https://ducafecat.com/blog/flutter-dynamic-app-icons-guide

探索Flutter中动态应用图标的实现方法，了解如何为用户提供独特体验，促进用户升级和应用内购买。

参考

https://pub.dev/packages/flutter_dynamic_icon

flutter_launcher_icons | Dart package

https://flutter.ducafecat.com

准备3种APP图标

https://icon.kitchen

设置APP图标

https://pub-web.flutter-io.cn/packages/flutter_launcher_icons

保存图片

pubspec.yaml

dev_dependencies:
   flutter_launcher_icons: ^0.13.1

flutter_icons:
   android: true
   ios: true
   image_path_ios: "assets/ios.png"
   image_path_android: "assets/android.png"

运行生成图表

$ flutter pub run flutter_launcher_icons:main

保存 Xcode 图标

图标尺寸

@2x 120x120

@3x 180x180

拖动到 xcode 目录

图标目录

ios/Runner/Info.plist

<key>CFBundleIcons</key>
     <dict>
       <key>CFBundlePrimaryIcon</key>
       <dict>
         <key>CFBundleIconFiles</key>
         <array>
           <string>default</string>
         </array>
         <key>UIPrerenderedIcon</key>
         <false />
       </dict>
       <key>CFBundleAlternateIcons</key>
       <dict>
         <key>default</key>
         <dict>
           <key>CFBundleIconFiles</key>
           <array>
             <string>default</string>
           </array>
           <key>UIPrerenderedIcon</key>
           <false />
         </dict>
         <key>vip</key>
         <dict>
           <key>CFBundleIconFiles</key>
           <array>
             <string>vip</string>
           </array>
           <key>UIPrerenderedIcon</key>
           <false />
         </dict>
         <key>svip</key>
         <dict>
           <key>CFBundleIconFiles</key>
           <array>
             <string>svip</string>
           </array>
           <key>UIPrerenderedIcon</key>
           <false />
         </dict>
       </dict>
     </dict>

配置 default vip svip 三张图片

切换图标

安装包

pubspec.yaml

dependencies:
   flutter_dynamic_icon: ^2.1.0

读取动态图标名称

lib/icons.dart

String curIconName = "";

@override
   void initState() {
     // 读取动态图标名称
     FlutterDynamicIcon.getAlternateIconName().then((iconName) {
       setState(() {
         curIconName = iconName ?? "---";
       });
     });
     
     super.initState();
   }

设置图标

// 设置图标
   Future<void> setAlternateIcon(String iconName) async {
     try {
       if (await FlutterDynamicIcon.supportsAlternateIcons) {
         await FlutterDynamicIcon.setAlternateIconName(
           iconName,
           showAlert: false,
         );
         setState(() {
           curIconName = iconName;
         });
       }
     } on PlatformException catch (_) {
       print('Failed to change app icon');
     }
   }

视图界面

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Dynamic Icons'),
      ),
      body: _buildMain(),
    );
  }

// 主视图
  Widget _buildMain() {
    return Center(
      child: Column(
        children: [
          // 图标名称
          Text(curIconName),

          // 设置图标
          ElevatedButton(
            onPressed: () {
              setAlternateIcon("default");
            },
            child: const Text('default'),
          ),
          ElevatedButton(
            onPressed: () {
              setAlternateIcon("vip");
            },
            child: const Text('Vip'),
          ),
          ElevatedButton(
            onPressed: () {
              setAlternateIcon("svip");
            },
            child: const Text('svip'),
          ),
        ],
      ),
    );
  }

设置Badge

初始读取

int batchNumber = -1;

@override
  void initState() {
    // 读取 badge 数字
    FlutterDynamicIcon.getApplicationIconBadgeNumber().then((value) {
      setState(() {
        batchNumber = value;
      });
    });

    super.initState();
  }

设置更新

// 主视图
  Widget _buildMain() {
    return Center(
      child: Column(
        children: [
          ...

          // 动态 badge 数字
          Text("$batchNumber"),
          // 文本输入框
          TextField(
            onSubmitted: (value) async {
              await FlutterDynamicIcon.setApplicationIconBadgeNumber(
                  int.parse(value));
              setState(() {
                batchNumber = int.parse(value);
              });
            },
            textAlign: TextAlign.center,
          ),
        ],
      ),
    );
  }

代码

https://github.com/ducafecat/flutter_develop_tips/tree/main/flutter_application_dynamic_icon

小结

本文通过创建图标、设置图标、保存 xcode 图标、动态设置图标、设置 Badge，让你的 App 更丰富，提供更好的用户体验。

感谢阅读本文

如果有什么建议，请在评论中让我知道。我很乐意改进。

flutter 学习路径

• Flutter 优秀插件推荐 https://flutter.ducafecat.com
• Flutter 基础篇1 — Dart 语言学习 https://ducafecat.com/course/dart-learn
• Flutter 基础篇2 — 快速上手 https://ducafecat.com/course/flutter-quickstart-learn
• Flutter 实战1 — Getx Woo 电商APP https://ducafecat.com/course/flutter-woo
• Flutter 实战2 — 上架指南 Apple Store、Google Play https://ducafecat.com/course/flutter-upload-apple-google
• Flutter 基础篇3 — 仿微信朋友圈 https://ducafecat.com/course/flutter-wechat
• Flutter 实战3 — 腾讯 tim 即时通讯开发 https://ducafecat.com/course/flutter-tim

© 猫哥 ducafecat.com

end