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

相关文章
|
6天前
|
缓存 监控 前端开发
【Flutter 前端技术开发专栏】Flutter 应用的启动优化策略
【4月更文挑战第30天】本文探讨了Flutter应用启动优化策略,包括理解启动过程、资源加载优化、减少初始化工作、界面布局简化、异步初始化、预加载关键数据、性能监控分析以及案例和未来优化方向。通过这些方法,可以缩短启动时间,提升用户体验。使用Flutter DevTools等工具可助于识别和解决性能瓶颈,实现持续优化。
【Flutter 前端技术开发专栏】Flutter 应用的启动优化策略
|
6天前
|
移动开发 JavaScript 前端开发
【Uniapp 专栏】Uniapp 与 Flutter 的功能特点对比
【5月更文挑战第15天】Uniapp 和 Flutter 是跨平台开发的热门框架。Uniapp 以其强大的跨平台兼容性和基于 Vue.js 的易学性著称,适合快速开发适用于 iOS、Android 和 H5 的应用。其丰富的组件生态简化了功能集成。然而,在复杂场景下,性能可能不及原生。Flutter 则以其全新渲染引擎实现流畅界面和高度自定义,性能接近原生,但学习成本较高,需处理特定平台适配。适用于高要求的项目。两者各有优势,选择应考虑项目需求、技术储备和开发周期。
【Uniapp 专栏】Uniapp 与 Flutter 的功能特点对比
|
6天前
|
Dart 前端开发 开发工具
【Flutter前端技术开发专栏】Flutter入门指南:搭建开发环境与第一个应用
【4月更文挑战第30天】本文介绍了Flutter SDK的安装和配置过程,以及如何创建并运行第一个Flutter应用。首先确保安装了Dart SDK和Flutter SDK,支持macOS、Linux和Windows。安装完成后,设置环境变量,然后通过`flutter doctor`验证安装。接着,使用`flutter create`命令创建新项目,进入项目目录并运行`flutter run`启动应用。在`main.dart`中修改代码以自定义应用。Flutter支持热重载和DevTools调试。本文为Flutter初学者提供了快速入门的指导。
【Flutter前端技术开发专栏】Flutter入门指南:搭建开发环境与第一个应用
|
6天前
|
缓存 监控 前端开发
【Flutter前端技术开发专栏】Flutter应用的性能调优与测试
【4月更文挑战第30天】本文探讨了Flutter应用的性能调优策略和测试方法。性能调优对提升用户体验、降低能耗和增强稳定性至关重要。优化布局(避免复杂嵌套,使用`const`构造函数)、管理内存、优化动画、实现懒加载和按需加载,以及利用Flutter的性能工具(如DevTools)都是有效的调优手段。性能测试包括基准测试、性能分析、压力测试和电池效率测试。文中还以ListView为例,展示了如何实践这些优化技巧。持续的性能调优是提升Flutter应用质量的关键。
【Flutter前端技术开发专栏】Flutter应用的性能调优与测试
|
6天前
|
前端开发 Android开发 开发者
【Flutter前端技术开发专栏】Flutter中的混合应用(Hybrid Apps)开发
【4月更文挑战第30天】本文探讨了使用Flutter开发混合应用的方法。混合应用结合Web技术和原生容器,提供快速开发和低成本维护。Flutter,一款现代前端框架,以其插件系统和高性能渲染引擎支持混合应用开发。通过创建Flutter项目、添加平台代码、使用WebView、处理平台间通信以及发布应用,开发者可构建跨平台混合应用。虽然混合应用有性能和用户体验的局限,但Flutter的跨平台兼容性和丰富的插件生态降低了开发成本。开发者应根据项目需求权衡选择。
【Flutter前端技术开发专栏】Flutter中的混合应用(Hybrid Apps)开发
|
6天前
|
开发框架 Dart 前端开发
【Flutter前端技术开发专栏】Flutter中的Web支持:构建跨平台Web应用
【4月更文挑战第30天】Flutter,Google的开源跨平台框架,已延伸至Web领域,让开发者能用同一代码库构建移动和Web应用。Flutter Web通过将Dart代码编译成JavaScript和WASM运行在Web上。尽管性能可能不及原生Web应用,但适合交互性强、UI复杂的应用。开发者应关注性能优化、兼容性测试,并利用Flutter的声明式UI、热重载等优势。随着其发展,Flutter Web为跨平台开发带来更多潜力。
【Flutter前端技术开发专栏】Flutter中的Web支持:构建跨平台Web应用
|
6天前
|
前端开发 搜索推荐 UED
【Flutter前端技术开发专栏】Flutter中的高级UI组件应用
【4月更文挑战第30天】探索Flutter的高级UI组件,如`TabBar`、`Drawer`、`BottomSheet`,提升应用体验和美观度。使用高级组件能节省开发时间,提供内置交互逻辑和优秀视觉效果。示例代码展示了如何实现底部导航栏、侧边导航和底部弹出菜单。同时,自定义组件允许个性化设计和功能扩展,但也带来性能优化和维护挑战。参考Flutter官方文档和教程,深入学习并有效利用这些组件。
【Flutter前端技术开发专栏】Flutter中的高级UI组件应用
|
6天前
|
存储 自然语言处理 API
Flutter应用的国际化支持:实现多语言环境的优雅策略
【4月更文挑战第26天】Flutter提供强大的国际化(i18n)和本地化(l10n)支持,使开发者能轻松实现应用多语言特性。通过定义`.arb`文件来管理字符串资源,使用`LocalizationsDelegate`加载资源,设置应用语言环境,以及在UI中使用`S.of(context).someString`访问字符串。进阶技巧包括字符串格式化、复数形式、双向文本和Unicode支持。充分测试确保所有语言正确显示。随着全球化需求增长,Flutter的国际化支持成为应用开发关键。
|
6天前
|
Dart
Flutter 中优雅切换应用主题的组件
【Flutter】使用adaptive_theme组件优雅切换应用主题:封装MaterialApp,支持light/dark/system模式,自定义色彩,保存选择,含调试按钮。安装配置、设置主题、监听切换、自定义颜色、读取配置步骤详细。代码示例与学习路径推荐。[查看完整教程](https://flutter.ducafecat.com/blog/flutter-app-theme-switch)
Flutter 中优雅切换应用主题的组件
|
6天前
|
运维 监控 安全
应用研发平台EMAS常见问题之sophix ios flutter热更新如何解决
应用研发平台EMAS(Enterprise Mobile Application Service)是阿里云提供的一个全栈移动应用开发平台,集成了应用开发、测试、部署、监控和运营服务;本合集旨在总结EMAS产品在应用开发和运维过程中的常见问题及解决方案,助力开发者和企业高效解决技术难题,加速移动应用的上线和稳定运行。
84 0

相关实验场景

更多