Flutter 动态修改应用图标功能指南
视频
https://www.bilibili.com/video/BV1yu4m1u7eP/
前言
原文 https://ducafecat.com/blog/flutter-dynamic-app-icons-guide
探索Flutter中动态应用图标的实现方法，了解如何为用户提供独特体验，促进用户升级和应用内购买。
参考
https://pub.dev/packages/flutter_dynamic_icon
https://pub-web.flutter-io.cn/packages/flutter_launcher_icons
准备3种APP图标
设置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