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

简介: 探索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 = "";
  
  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');
    }
  }

视图界面

  
  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;
  
  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 更丰富,提供更好的用户体验。

感谢阅读本文

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


© 猫哥
ducafecat.com

end

相关文章
|
2月前
|
传感器 缓存 监控
Stream 组件在 Flutter 中的应用场景有哪些?
Stream 组件在 Flutter 中的应用场景有哪些?
168 58
|
5天前
|
移动开发 Dart 搜索推荐
打造个性化安卓应用:从零开始的Flutter之旅
【10月更文挑战第20天】本文将引导你开启Flutter开发之旅,通过简单易懂的语言和步骤,让你了解如何从零开始构建一个安卓应用。我们将一起探索Flutter的魅力,实现快速开发,并见证代码示例如何生动地转化为用户界面。无论你是编程新手还是希望扩展技能的开发者,这篇文章都将为你提供价值。
|
21天前
|
缓存 监控 前端开发
怎样提升 Flutter 应用的性能
【10月更文挑战第4天】
|
2月前
|
开发框架 搜索推荐 开发工具
打造个性化安卓应用:从零开始的Flutter之旅
【8月更文挑战第51天】本文是一篇面向初学者的Flutter入门教程,旨在通过简单易懂的语言和实际代码示例,引导读者步入跨平台移动应用开发的世界。文章首先介绍了Flutter的基本概念和优势,然后逐步展示了如何搭建开发环境、创建第一个Flutter应用,并实现了一个简单的待办事项列表。最后,文章探讨了Flutter在实现高性能和美观界面方面的潜力,鼓励读者发挥创意,探索更多可能。
84 15
|
18天前
|
开发者
flutter:功能性组件 (八)
本文介绍了Flutter中常用的UI组件和功能,包括进度指示器(线性和圆形)、下拉刷新、选项按钮(单选按钮、复选框、开关)、手势识别(GestureDetector、Ink和InkWell)以及提示和Offstage组件的使用方法和示例代码。这些组件和功能可以帮助开发者快速构建交互丰富的应用程序界面。
|
2月前
|
JSON Dart Java
flutter开发多端平台应用的探索
flutter开发多端平台应用的探索
47 6
|
2月前
|
JSON Dart Java
flutter开发多端平台应用的探索 下 (跨模块、跨语言通信之平台通道)
flutter开发多端平台应用的探索 下 (跨模块、跨语言通信之平台通道)
|
2月前
|
编解码 Dart 网络协议
Flutter如何玩转超低延迟RTSP/RTMP播放,跨平台视频流体验大升级,让你的应用秒变直播神器!
【9月更文挑战第3天】Flutter作为谷歌推出的跨平台移动UI框架,凭借高性能和丰富的生态系统广受好评。本文详细介绍如何在Flutter应用中实现低延迟的跨平台RTSP/RTMP播放,并提供具体示例代码。首先介绍了如何使用`flutter_vlc_player`播放RTSP流,然后讨论了优化视频播放以降低延迟的方法,包括调整播放器配置等。通过选用合适的播放器插件并进行优化,Flutter可在视频流播放领域提供卓越的用户体验。随着生态的发展,Flutter有望成为视频流媒体开发的首选框架。
257 6
|
2月前
|
Dart 搜索推荐 API
打造个性化天气应用:从零开始的Flutter之旅
【9月更文挑战第3天】探索Flutter的强大功能,我们将一步步构建一个动态的天气应用。通过这个实践项目,你将学习到如何从无到有地设计用户界面、处理数据流和集成第三方API。本指南适合所有水平的开发者,无论你是Flutter新手还是寻求提高的资深开发者,都能在这里找到价值。让我们开始吧,创造属于你的天气小助手!
|
3月前
|
搜索推荐 IDE 开发工具
打造个性化安卓应用:从零开始的Flutter之旅
在数字时代的浪潮中,拥有一款个性化且高效的移动应用已成为许多创业者和企业的梦想。本文将引导你使用Flutter框架,从零基础开始构建一个安卓应用,不仅涉及界面设计、功能实现,还包括性能优化的关键技巧。通过简洁易懂的语言和实用的代码示例,我们将一起探索如何让你的应用在众多竞争者中脱颖而出。 【8月更文挑战第31天】