Flutter动态应用图标插件variable_app_icon的使用

variable_app_icon 是一个Flutter插件，允许在Android和iOS上使用多个应用图标。以下是如何设置和使用这个插件的详细步骤。

Getting Started

添加依赖

首先，在pubspec.yaml文件中添加variable_app_icon作为依赖项：

dependencies:
  variable_app_icon: ^0.0.1

然后运行flutter pub get来获取新添加的依赖项。

Usage

1. 设置应用图标（Android）

将你的应用图标放入mipmap文件夹中。然后在AndroidManifest.xml中为每个图标添加如下配置：

<!-- Use this for each icon -->
<activity-alias
    android:name="appicon.DEFAULT" <!-- 这里是你的图标ID，可以是任何内容，但至少要包含一个点 -->
    android:enabled="true" <!-- 将默认图标设置为true，其他设置为false -->
    android:exported="true"
    android:icon="@mipmap/ic_launcher" <!-- 图标位置 -->
    android:label="variable_app_icon_example"
    android:targetActivity=".MainActivity"> <!-- 主活动 -->
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity-alias>

移除application标签中的label和icon属性。

从主活动的<intent-filter>中移除<category android:name="android.intent.category.LAUNCHER" />。

2. 设置应用图标（iOS）

打开你的iOS项目（即Runner）在Xcode中，然后前往Build Settings标签。 现在搜索图标，你会找到Assets Catalog Compiler Options。将Include All App Icon Assets设置为Yes。 然后将所有图标的名称添加到Alternate App Icon Sets。

3. 在Flutter侧的操作

在main函数中设置这两个变量：

VariableAppIcon.iOSDefaultAppIcon = iosAppIcons[0]; // 默认iOS图标
VariableAppIcon.androidAppIconIds = androidIconIds; // 所有安卓图标ID，这是你在`AndroidManifest.xml`文件中指定的android:name，例如 ["appicon.DEFAULT", others]

调用此方法更改应用图标：

await VariableAppIcon.changeAppIcon(
androidIconId: "appicon.TEAL",
iosIcon: "AppIcon2");

查看示例应用程序以获取完整示例。

Demo

Android

iOS

Support the package (optional)

如果你觉得这个包有用，可以通过给它加星来支持它。

Credits

这个包是由Shahriar Nasim Nafi创建的。

示例代码

下面是一个完整的示例demo，展示了如何使用variable_app_icon插件更改应用图标：

import 'dart:io';
import 'package:flutter/material.dart';
import 'dart:async';
import 'package:flutter/services.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:variable_app_icon/variable_app_icon.dart';

const List<String> iosAppIcons = ["AppIcon", "AppIcon2", "AppIcon3"];
const List<String> androidIconIds = ["appicon.DEFAULT", "appicon.TEAL", "appicon.ORANGE"];

void main() {
  VariableAppIcon.iOSDefaultAppIcon = iosAppIcons[0];
  VariableAppIcon.androidAppIconIds = androidIconIds;

  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int currentIconIndex = 0;

  @override
  void initState() {
    super.initState();
    loadCurrentIcon();
  }

  Future<void> loadCurrentIcon() async {
    final prefs = await SharedPreferences.getInstance();
    final index = prefs.getInt("currentIconIndex") ?? currentIconIndex;
    setState(() {
      currentIconIndex = index;
    });
  }

  Future<void> changeIcon(int? value) async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.setInt("currentIconIndex", value!);
    print(value);
    setState(() {
      currentIconIndex = value;
    });
    await VariableAppIcon.changeAppIcon(
        androidIconId: androidIconIds[currentIconIndex],
        iosIcon: iosAppIcons[currentIconIndex]);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin Example App'),
        ),
        body: Center(
          child: DropdownButton<int>(
            value: currentIconIndex,
            items: [0, 1, 2]
                .map((index) => DropdownMenuItem<int>(
                      value: index,
                      child: Text(Platform.isAndroid
                          ? androidIconIds[index]
                          : iosAppIcons[index]),
                    ))
                .toList(),
            onChanged: changeIcon,
          ),
        ),
      ),
    );
  }
}

通过上述步骤和示例代码，你可以轻松地在Flutter项目中实现动态应用图标的功能。希望这对你有所帮助！