Flutter 動態更改應用程式啟動圖示

會煮咖啡的貓發表於2022-11-24

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多平臺釋出

相關文章