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

2024-03-13 100

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

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

视频

前言

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

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

默认图标

VIP 图标

参考

https://pub.dev/packages/flutter_dynamic_icon

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

准备3种APP图标

https://icon.kitchen

设置APP图标

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

保存图片

assets

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 目录

copy files

图标目录

xcode appicons

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,
          ),
        ],
      ),
    );
  }