Flutter图标更换插件changeicon的使用

插件概述

Change Icon 是一个用于在Flutter应用中动态更改应用图标的插件。它支持Android和iOS平台，并且可以在运行时执行以下操作：

• 更改应用图标
• 更改应用标签（仅限iOS）
• 设置批处理编号（仅限iOS）

GitHub

兼容性

• ✅   Android
• ✅   iOS

功能

所有列出的功能都可以在运行时执行：

• ✅   更改应用图标
• ✅   更改应用标签（仅限iOS）
• ✅   设置批处理编号（仅限iOS）

示例演示

平台	演示
iOS
Android

安装与配置

Android 配置

Step 1: 将插件添加到项目中

在 pubspec.yaml 文件中添加依赖项：

dependencies:
  changeicon: <latest version>

Step 2: 在 AndroidManifest.xml 中添加 activity-alias

<application
    android:label="changeicon_example"
    android:icon="@mipmap/ic_launcher">
    <!-- MainActivity -->
    <activity
        android:name=".MainActivity"
        android:launchMode="singleTop"
        android:theme="@style/LaunchTheme"
        android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
        android:hardwareAccelerated="true"
        android:windowSoftInputMode="adjustResize">
        <meta-data
            android:name="io.flutter.embedding.android.NormalTheme"
            android:resource="@style/NormalTheme" />
        <meta-data
            android:name="io.flutter.embedding.android.SplashScreenDrawable"
            android:resource="@drawable/launch_background" />
        <intent-filter>
            <action android:name="android.intent.action.MAIN"/>
            <category android:name="android.intent.category.LAUNCHER"/>
        </intent-filter>
    </activity>

    <!-- Live Icon Addition -->
    <activity-alias
        android:name=".DarkTheme"
        android:enabled="false"
        android:icon="@mipmap/dark_theme"
        android:label="DarkThemeLabel"
        android:targetActivity=".MainActivity">
        <intent-filter>
            <action android:name="android.intent.action.MAIN"/>
            <category android:name="android.intent.category.LAUNCHER"/>
        </intent-filter>
    </activity-alias>

    <activity-alias
        android:name=".LightTheme"
        android:enabled="false"
        android:icon="@mipmap/light_theme"
        android:label="LightThemeLabel"
        android:targetActivity=".MainActivity">
        <intent-filter>
            <action android:name="android.intent.action.MAIN"/>
            <category android:name="android.intent.category.LAUNCHER"/>
        </intent-filter>
    </activity-alias>
    <!-- Live Icon Addition -->

    <meta-data
        android:name="flutterEmbedding"
        android:value="2" />
</application>

Step 3: 创建类文件

创建与 activity-alias 名称相同的 Java/Kotlin 文件。例如：

1. DarkTheme.java

package com.example.changeicon_example;

public class DarkTheme {
}

1. LightTheme.java

package com.example.changeicon_example;

public class LightTheme {
}

Step 4: 初始化插件

在 Dart 代码中初始化插件：

Changeicon.initialize(
    classNames: ['MainActivity', 'DarkTheme', 'LightTheme'],
);

Step 5: 切换应用图标

使用 switchIconTo 方法切换应用图标：

await _changeiconPlugin.switchIconTo(
    className: 'DarkTheme',
);

iOS 配置

Step 1: 将插件添加到项目中

在 pubspec.yaml 文件中添加依赖项：

dependencies:
  changeicon: <latest version>

Step 2: 添加图标到项目

将图标文件添加到项目中，确保它们不在 Assets.xcassets 文件夹内，而是放在项目的根目录下。例如：

• teamfortress@2x.png, teamfortress@3x.png
• photos@2x.png, photos@3x.png
• chills@2x.png, chills@3x.png

Step 3: 配置 Info.plist

编辑 Info.plist 文件以支持替代图标：

<key>CFBundleIcons</key>
<dict>
    <key>CFBundleAlternateIcons</key>
    <dict>
        <key>chills</key>
        <dict>
            <key>CFBundleIconFiles</key>
            <array>
                <string>chills</string>
            </array>
            <key>UIPrerenderedIcon</key>
            <false/>
        </dict>
        <key>photos</key>
        <dict>
            <key>CFBundleIconFiles</key>
            <array>
                <string>photos</string>
            </array>
            <key>UIPrerenderedIcon</key>
            <false/>
        </dict>
        <key>teamfortress</key>
        <dict>
            <key>CFBundleIconFiles</key>
            <array>
                <string>teamfortress</string>
            </array>
            <key>UIPrerenderedIcon</key>
            <false/>
        </dict>
    </dict>
    <key>CFBundlePrimaryIcon</key>
    <dict>
        <key>CFBundleIconFiles</key>
        <array>
            <string>chills</string>
        </array>
        <key>UIPrerenderedIcon</key>
        <false/>
    </dict>
</dict>

Dart/Flutter 集成

在 Dart 代码中导入并使用插件的方法：

import 'package:flutter_dynamic_icon/flutter_dynamic_icon.dart';

try {
  if (await FlutterDynamicIcon.supportsAlternateIcons) {
    await FlutterDynamicIcon.setAlternateIconName("photos");
    print("App icon change successful");
    return;
  }
} on PlatformException {} catch (e) {}
print("Failed to change app icon");

// 设置批处理编号
try {
	await FlutterDynamicIcon.setApplicationIconBadgeNumber(9399);
} on PlatformException {} catch (e) {}

// 获取当前设置的批处理编号
int batchNumber = FlutterDynamicIcon.getApplicationIconBadgeNumber();

完整示例代码

以下是完整的 main.dart 示例代码：

import 'dart:io';
import 'package:changeicon_example/src/android_config.dart';
import 'package:changeicon_example/src/ios_configuration.dart';
import 'package:changeicon_example/src/theme/theme_widget.dart';
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

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

class _MyAppState extends State<MyApp> {
  GlobalKey<ScaffoldState> scaffoldKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return ThemeWidgetBuilder(
      builder: (theme) {
        return MaterialApp(
          themeMode: theme.themeMode,
          theme: ThemeData.light(useMaterial3: true),
          darkTheme: ThemeData.dark(useMaterial3: true),
          home: Scaffold(
            key: scaffoldKey,
            appBar: AppBar(
              title: const Text('Change App Icon'),
            ),
            body: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 28),
              child: ListView(
                children: <Widget>[
                  Visibility(
                    visible: Platform.isIOS,
                    child: const IOSConfiguration(),
                  ),
                  Visibility(
                    visible: Platform.isAndroid,
                    child: const AndroidConfiguration(),
                  ),
                ],
              ),
            ),
          ),
        );
      },
    );
  }
}

通过以上步骤和代码，您可以在Flutter应用中实现动态更改应用图标的功能。希望这些信息对您有所帮助！