Flutter动态图标插件live_icon的使用

Flutter动态图标插件live_icon的使用

插件简介

live_icon 是一个用于在运行时动态更改应用图标的Flutter插件。通过这个插件，你可以在应用程序运行时切换不同的图标和标签，而无需重新安装应用。

功能特性

• ✅ 更改应用图标
• ✅ 更改应用标签

快速开始

步骤 1: 将插件添加到项目中

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

dependencies:
  live_icon: ^<latest version>

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

为了支持动态图标切换，你需要在 AndroidManifest.xml 中为每个图标变体添加 activity-alias。例如：

<application
    android:label="live_icon_example"
    android:icon="@mipmap/ic_launcher">
    
    <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>

步骤 3: 创建对应的 Java/Kotlin 类

为每个 activity-alias 创建相应的 Java 或 Kotlin 类。例如：

1. DarkTheme.java

package com.hackthedeveloper.live_icon_example;

public class DarkTheme {
}

1. LightTheme.java

package com.hackthedeveloper.live_icon_example;

public class LightTheme {
}

步骤 4: 初始化插件

在 Dart 代码中初始化 live_icon 插件，并传入所有 activity-alias 的类名。注意，MainActivity 也需要包含在内，因为它包含了启动意图。

import 'package:live_icon/live_icon.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  LiveIcon liveIcon = LiveIcon();

  [@override](/user/override)
  void initState() {
    LiveIcon.initialize(
      classNames: ['MainActivity', 'DarkTheme', 'LightTheme'],
    );
    super.initState();
  }

  void switchAppIcon(String className) async {
    await liveIcon.switchIconTo(
      className: className,
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                child: Text('切换到深色主题图标'),
                onPressed: () {
                  switchAppIcon('DarkTheme');
                },
              ),
              SizedBox(height: 20),
              ElevatedButton(
                child: Text('切换到浅色主题图标'),
                onPressed: () {
                  switchAppIcon('LightTheme');
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

完整示例 Demo

以下是一个完整的示例代码，展示了如何使用 live_icon 插件在运行时切换应用图标：

import 'package:flutter/material.dart';
import 'package:live_icon/live_icon.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  LiveIcon liveIcon = LiveIcon();

  [@override](/user/override)
  void initState() {
    // 初始化插件并传入所有 activity-alias 的类名
    LiveIcon.initialize(
      classNames: ['MainActivity', 'DarkTheme', 'LightTheme'],
    );
    super.initState();
  }

  // 切换应用图标的方法
  void switchAppIcon(String className) async {
    try {
      await liveIcon.switchIconTo(
        className: className,
      );
      // 成功切换后显示提示信息
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('已切换到 $className 图标')),
      );
    } catch (e) {
      // 如果切换失败，显示错误信息
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('切换图标失败: $e')),
      );
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('动态图标示例'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                child: Text('切换到深色主题图标'),
                onPressed: () {
                  switchAppIcon('DarkTheme');
                },
              ),
              SizedBox(height: 20),
              ElevatedButton(
                child: Text('切换到浅色主题图标'),
                onPressed: () {
                  switchAppIcon('LightTheme');
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}