Flutter 動態更改應用程式啟動圖示
前言
在這篇文章中,我們將討論如何在執行時在我們的 flutter 應用程式中動態更改多個應用程式啟動器圖示。
依賴包
一個用於動態更改移動平臺上應用程式圖示 flutter 外掛。
https://pub.dev/packages/flut...
正文
實施
考慮到我們已經準備好了基本的 UI (包含影像和提升的按鈕 widget )。
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() {}
onpress 事件
現在我們需要在提升按鈕 widget 的 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 資料夾中。
因此,我們需要透過右鍵單擊 IOS 資料夾在 xCode 中開啟該專案。
Something (注意: 這個特性針對 iOS 平臺,所以我們需要一個 macOS 裝置來設定它)。
在 xCode 中開啟專案之後,嘗試在 Runner/Runner 資料夾中新增應用程式圖示影像,如下所示。
接下來,我們需要設定 info.plist 檔案(按照下面給出的步驟)。
將圖示檔案(iOS5)新增到資訊屬性列表。
在上面建立的圖示檔案(ios 5)中新增 CFBundleAlternateIcon 作為字典。
在 CFBundleAlternateIcon 下建立 3 個字典,名稱與圖示影像檔名相似(在我們的示例中是 icon1、 icon2 和 icon3)
對於每個字典(icon1、 icon2 和 icon3) ,需要建立兩個屬性ーー UIPrerenderedIcon 和 CFBundleIconFiles。
最後,將 CFBundleIconFiles 更改為和一個陣列,並將 item0 的值作為 icon1、 icon2 和 icon3 新增到各自的字典中。
現在執行 cmds,
flutter clean
flutter pub get
就是這樣,執行程式碼檢視它的執行情況
結束語
如果本文對你有幫助,請轉發讓更多的朋友閱讀。
也許這個操作只要你 3 秒鐘,對我來說是一個激勵,感謝。
祝你有一個美好的一天~
© 貓哥
本文由mdnice多平臺釋出