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
https://pub-web.flutter-io.cn/packages/flutter_launcher_icons
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
@2x 120x120
@3x 180x180
<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'), ), ], ), ); }
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
Copyright 2024 ducafecat. All rights reserved.
微信: ducafecat, line: ducafecat,京ICP备2021009050号-3