Flutter 动态修改应用图标功能指南
视频
前言
原文 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
AI 代码解读
flutter_icons:
android: true
ios: true
image_path_ios: "assets/ios.png"
image_path_android: "assets/android.png"
AI 代码解读
运行生成图表
$ flutter pub run flutter_launcher_icons:main
AI 代码解读
保存 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>
AI 代码解读
配置 default vip svip 三张图片
切换图标
安装包
pubspec.yaml
dependencies:
flutter_dynamic_icon: ^2.1.0
AI 代码解读
读取动态图标名称
lib/icons.dart
String curIconName = "";
AI 代码解读
@override
void initState() {
// 读取动态图标名称
FlutterDynamicIcon.getAlternateIconName().then((iconName) {
setState(() {
curIconName = iconName ?? "---";
});
});
super.initState();
}
AI 代码解读
设置图标
// 设置图标
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');
}
}
AI 代码解读
视图界面
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Dynamic Icons'),
),
body: _buildMain(),
);
}
AI 代码解读
// 主视图
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'),
),
],
),
);
}
AI 代码解读
设置Badge
初始读取
int batchNumber = -1;
AI 代码解读
@override
void initState() {
// 读取 badge 数字
FlutterDynamicIcon.getApplicationIconBadgeNumber().then((value) {
setState(() {
batchNumber = value;
});
});
super.initState();
}
AI 代码解读
设置更新
// 主视图
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,
),
],
),
);
}
AI 代码解读
代码
https://github.com/ducafecat/flutter_develop_tips/tree/main/flutter_application_dynamic_icon
小结
本文通过创建图标、设置图标、保存 xcode 图标、动态设置图标、设置 Badge，让你的 App 更丰富，提供更好的用户体验。
感谢阅读本文
如果有什么建议，请在评论中让我知道。我很乐意改进。
© 猫哥
ducafecat.com
end
