头图

在Flutter中动态地改变应用启动器图标

在本文中,我们将讨论如何在 Flutter 应用程序的运行时动态更改多个应用程序启动器图标。

在 pubspec.yaml 文件中添加以下依赖项。

flutter_dynamic_icon:https://pub.dev/packages/flutter_dynamic_icon

考虑我们已经准备好基本的 UI(包含图像和按钮小部件)。

import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int iconIndex = 0;

  List iconName = <String>['icon1', 'icon2', 'icon3'];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: buildAppBar(appBarTitle: widget.title),
      body: Padding(
          padding: EdgeInsets.all(kSpacing),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              buildIconTile(0, 'red'),
              buildIconTile(1, 'dark'),
              buildIconTile(2, 'blue'),
              HeightSpacer(myHeight: kSpacing),
              PrimaryBtn(
                  btnFun: () => changeAppIcon(), btnText: 'Set as app icon'),
            ],
          )),
    );
  }

  Widget buildIconTile(int index, String themeTxt) => Padding(
        padding: EdgeInsets.all(kSpacing / 2),
        child: GestureDetector(
          onTap: () => setState(() => iconIndex = index),
          child: ListTile(
              contentPadding: const EdgeInsets.only(left: 0.0, right: 0.0),
              leading: Image.asset(
                imagefiles[index],
                width: 45,
                height: 45,
              ),
              title: Text(themeTxt, style: const TextStyle(fontSize: 25)),
              trailing: iconIndex == index
                  ? const Icon(
                      Icons.check_circle_rounded,
                      color: Colors.green,
                      size: 30,
                    )
                  : Icon(
                      Icons.circle_outlined,
                      color: Colors.grey.withOpacity(0.5),
                      size: 30,
                    )),
        ),
      );

  changeAppIcon()  {}

image.png

现在我们需要在按钮小部件的 onpress 事件 [changeAppIcon{}] 中编写更改应用启动器图标的逻辑。

changeAppIcon() async {
  try {
    if (await FlutterDynamicIcon.supportsAlternateIcons) {
      await FlutterDynamicIcon.setAlternateIconName(iconName[iconIndex]);
      debugPrint("App icon change successful");
      return;
    }
  } catch (e) {
    debugPrint("Exception: ${e.toString()}");
  }
  debugPrint("Failed to change app icon ");
}

至此,我们完成了配置动态应用图标的编码部分。

现在要使该功能正常工作,我们需要在项目的 ios 文件夹中的 info.plist 文件中添加一些更改。

因此,我们需要通过右键单击 ios 文件夹在 xCode 中打开项目。

⚠️(注意:此功能针对 iOS 平台,因此我们需要 macOS 设备进行设置)。

image.png

在 xCode 中打开项目后,尝试在 Runner/Runner 文件夹中添加应用程序图标图像,如下所示。

image.png

接下来我们需要设置 info.plist 文件(按照下面给出的步骤)。

👉将 Icon files (iOS 5) 添加到信息属性列表。

image.png

👉将 CFBundleAlternateIcons作为一个字典添加到上面创建的 icon files(ios 5) 中。

image.png

👉在 CFBundleAlternateIcons下创建3个字典,其名称与图标图像文件名相似(在我们的例子中是 icon1icon2icon3)。

image.png

👉对于每个字典(icon1icon2icon3),需要创建两个属性——UIPrerenderedIconCFBundleIconFiles

image.png

👉最后将 CFBundleIconFiles 改成一个 array ,并将 item0 的值添加到各自的字典中,作为 icon1icon2icon3

image.png

现在运行命令行

flutter clean
flutter pub get

就是这样。 🎉 运行代码以查看它的实际效果。🥳

请参阅我的视频教程以获取完整指南:https://www.youtube.com/watch...
在此处获取完整的源代码:https://github.com/vijayinyou...


前端全栈开发者
专栏首发于公众号《前端全栈开发者》,订阅关注第一时间阅读好文

Web/Flutter/独立开发者/铲屎官

11.7k 声望
6.6k 粉丝
0 条评论
推荐阅读
Flutter canvas 绘制虚线
绘制虚线直接上图:代码 {代码...} 微信公众号【前端学馆】程序员IT编程书籍分享!参考:[链接]

Wei12阅读 6.5k

Flutter build failed android:AAPT2 aapt2-3.2.1-4818971-osx
笔者作为小白入坑Flutter,在Flutter写了一个入门demo,在进行Android编译的时候报错code如下: {代码...} 截图解决方案:进入项目工程的android/app/build.gradle文件,修改编译的sdk版本为28,重新编译即可。代码...

似水流年阅读 1.8k

一个 JSer 的 Dart 学习日志(四):异步编程
本文是“一个 JSer 的 Dart 学习日志”系列的第四篇,本系列文章主要以挖掘 JS 与 Dart 异同点的方式,在复习和巩固 JS 的同时平稳地过渡到 Dart 语言。鉴于作者尚属 Dart 初学者,所以认识可能会比较肤浅和片面,...

知名喷子阅读 1.5k

封面图
Android 开发中的SSL pinning
在日常的安全渗透过程中,我们经常会遇到瓶颈无处下手,这时候如果攻击者从APP进行突破,往往会有很多惊喜。但是目前市场上的APP都会为防止别人恶意盗取和恶意篡改进行一些保护措施,比如模拟器检测、root检测、A...

xiangzhihong阅读 1k

flutter系列之:在flutter中使用流式布局
我们在开发web应用的时候,有时候为了适应浏览器大小的调整,需要动态对页面的组件进行位置的调整。这时候就会用到flow layout,也就是流式布局。

flydean阅读 788

Flutter for Web 首次首屏优化——JS 分片优化
Flutter for Web(FFW)从 2021 年发布至今,在国内外互联网公司已经得到较多的应用。作为 Flutter 技术在 Web 领域的有力扩充,FFW 可以让熟悉 Flutter 的客户端同学直接上手写 H5,复用 App 端代码高效支撑业务...

阿里巴巴终端技术阅读 762

封面图
Flutter 这一年:2022 亮点时刻
2022 年,我们非常兴奋的看到 Flutter 社区持续发展壮大,也因此让更多人体验到了令人难以置信的体验。每天有超过 1000 款使用 Flutter 的新移动应用发布到 App Store 和 Google Play,Web 平台和桌面应用程序数...

Flutter阅读 706

Web/Flutter/独立开发者/铲屎官

11.7k 声望
6.6k 粉丝
宣传栏