Flutter应用图标更改插件flutter_app_icon_changer的使用

Flutter应用图标更改插件flutter_app_icon_changer的使用

Description

本项目展示了如何在Flutter应用程序中实现Android和iOS平台上的应用图标更改功能。

Android	iOS

Getting Started

要开始使用这些示例，请克隆仓库并导航到项目目录：

git clone https://github.com/Innim/flutter_app_icon_changer.git
cd flutter_app_icon_changer

Setup

Adding Assets to pubspec.yaml

确保在pubspec.yaml文件中正确声明您的图标资源，以便它们可以在您的Flutter应用程序中使用。

flutter:
  assets:
    - assets/icons/

Setup Android

要在您的Android应用程序中启用更改应用图标的功能，请按照以下步骤操作：

1. 修改AndroidManifest.xml:

   打开文件android/app/src/main/AndroidManifest.xml并添加以下内容：

   <!-- Main Activity -->
   <activity
       android:name=".MainActivity"
       android:exported="true"
       android:launchMode="singleTop"
       android:theme="@style/LaunchTheme"
       android:hardwareAccelerated="true"
       android:windowSoftInputMode="adjustResize">
       <meta-data
           android:name="io.flutter.embedding.android.NormalTheme"
           android:resource="@style/NormalTheme"
       />
       <intent-filter>
           <action android:name="android.intent.action.MAIN"/>
           <category android:name="android.intent.category.LAUNCHER"/>
       </intent-filter>
   </activity>
   
   <!-- Alternate Icon 1 -->
   <activity-alias
       android:name=".MainActivityAlias1"
       android:enabled="false"
       android:exported="true"
       android:icon="@mipmap/ic_launcher1"
       android:targetActivity=".MainActivity">
       <intent-filter>
           <action android:name="android.intent.action.MAIN" />
           <category android:name="android.intent.category.LAUNCHER" />
       </intent-filter>
   </activity-alias>
   
   <!-- Alternate Icon 2 -->
   <activity-alias
       android:name=".MainActivityAlias2"
       android:enabled="false"
       android:exported="true"
       android:icon="@mipmap/ic_launcher2"
       android:targetActivity=".MainActivity">
       <intent-filter>
           <action android:name="android.intent.action.MAIN" />
           <category android:name="android.intent.category.LAUNCHER" />
       </intent-filter>
   </activity-alias>
   

   解释:

   • .MainActivityAlias1 和 .MainActivityAlias2 是用于切换图标的活动别名。
   • android:icon 指定了要显示的图标资源。
   • android:enabled="false" 表示别名默认禁用，并将在更改图标时通过编程启用。

2. 添加替换图标:

   在 android/app/src/main/res/mipmap- 文件夹中创建新的图标文件，命名为 ic_launcher1.png 和 ic_launcher2.png。这些名称应与 android:icon 中的值匹配。

   示例文件夹结构:

   android/app/src/main/res/
       mipmap-mdpi/
           ic_launcher.png
           ic_launcher1.png
           ic_launcher2.png
       mipmap-hdpi/
           ic_launcher.png
           ic_launcher1.png
           ic_launcher2.png
       ...
   

   提示:

   • 确保图标尺寸适合每个屏幕密度。
   • 您可以使用图标生成器简化此过程。

3. 更新 build.gradle (如果需要):

   确保在 android/app/build.gradle 文件中的最小SDK版本设置为21或更高：

   defaultConfig {
       applicationId "com.example.flutter_app_icon_changer"
       minSdkVersion 21
       targetSdkVersion 33
       // ...
   }
   

4. 清理并重新构建项目:

   完成上述更改后，运行以下命令：

   flutter clean
   flutter pub get
   flutter run
   

Setup iOS

要在您的iOS应用程序中启用更改应用图标的功能，请按照以下步骤操作：

1. 将替换图标添加到资源中:

   在Xcode中打开项目：

   open ios/Runner.xcworkspace
   

   在Xcode中:

   • 导航到 Runner/Assets.xcassets。
   • 右键单击并选择 New App Icon 添加每个替换图标。
   • 将新应用图标命名为与Info.plist中指定的完全一致（例如，AppIcon1, AppIcon2）。
   • 向每个应用图标集添加适当大小的图标图像。 重要: 图标必须是AppIcon类型（应用图标集），而不是普通图像集。

2. 修改Info.plist:

   打开文件 ios/Runner/Info.plist 并在 CFBundleIcons 下添加替换图标：

   <key>CFBundleIcons</key>
   <dict>
       <key>CFBundlePrimaryIcon</key>
       <dict>
           <key>CFBundleIconFiles</key>
           <array>
               <string>AppIcon</string>
           </array>
       </dict>
       <key>CFBundleAlternateIcons</key>
       <dict>
           <key>Icon1</key>
           <dict>
               <key>CFBundleIconFiles</key>
               <array>
                   <string>AppIcon1</string>
               </array>
           </dict>
           <key>Icon2</key>
           <dict>
               <key>CFBundleIconFiles</key>
               <array>
                   <string>AppIcon2</string>
               </array>
           </dict>
       </dict>
   </dict>
   

   解释:

   • CFBundlePrimaryIcon 定义了默认的应用图标（AppIcon）。
   • CFBundleAlternateIcons 包含一个包含替换图标的字典。
   • Icon1 和 Icon2 是在代码中使用的替换图标标识符。
   • CFBundleIconFiles 包含一个对应于Assets.xcassets中的集合的图标名称数组。

3. 确保命名一致性:

   确保Info.plist中的名称与Assets.xcassets中的图标集名称完全一致。

4. 重新构建项目:

   完成更改后，运行以下命令：

   flutter clean
   flutter pub get
   flutter run
   

Usage

在完成平台设置后，您可以在Flutter应用程序中使用图标更改功能。

示例用法

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

import 'package:flutter/services.dart';
import 'package:flutter_app_icon_changer/flutter_app_icon_changer.dart';
import 'package:flutter_app_icon_changer_example/src/models/models.dart';

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final _flutterAppIconChangerPlugin = FlutterAppIconChangerPlugin(
    iconsSet: CustomIcons.list,
  );

  CustomIcon _currentIcon = CustomIcons.defaultIcon;
  var _isSupported = false;

  [@override](/user/override)
  void initState() {
    super.initState();
    initPlatformState();
  }

  Future<void> initPlatformState() async {
    _isSupported = await _flutterAppIconChangerPlugin.isSupported();
    if (_isSupported) {
      final currentIcon = await _flutterAppIconChangerPlugin.getCurrentIcon();

      if (!mounted) return;

      setState(() {
        _currentIcon = CustomIcon.fromString(currentIcon);
      });
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('图标更改示例'),
        ),
        body: Column(
          children: <Widget>[
            const Spacer(),
            if (!_isSupported) ...[
              const Text('更改图标在此设备上不受支持'),
              const SizedBox(height: 8),
            ],
            FittedBox(
              child: Opacity(
                opacity: _isSupported ? 1 : .5,
                child: Padding(
                  padding:
                      const EdgeInsetsDirectional.symmetric(horizontal: 24),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      _buildIcon(CustomIcons.redIcon),
                      const SizedBox(width: 8),
                      _buildIcon(CustomIcons.purpleIcon),
                      const SizedBox(width: 8),
                      _buildIcon(CustomIcons.defaultIcon),
                    ],
                  ),
                ),
              ),
            ),
            const Spacer(),
          ],
        ),
      ),
    );
  }

  Widget _buildIcon(CustomIcon icon) {
    final border = BorderRadius.circular(8.0);

    return InkWell(
      borderRadius: border,
      onTap: _isSupported ? () => _changeIcon(icon) : null,
      child: Card(
        shape: icon == _currentIcon ? _buildBorder(border) : null,
        child: Padding(
          padding: const EdgeInsets.all(4.0),
          child: _buildPreviewIcon(
            icon,
          ),
        ),
      ),
    );
  }

  OutlinedBorder _buildBorder(BorderRadius borderRadius) {
    return RoundedRectangleBorder(
      borderRadius: borderRadius,
      side: BorderSide(
        color: Theme.of(context).primaryColor,
        width: 4.0,
      ),
    );
  }

  Widget _buildPreviewIcon(CustomIcon icon, {double size = 100}) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(8),
      child: Image.asset(
        icon.previewPath,
        fit: BoxFit.contain,
        width: size,
        height: size,
      ),
    );
  }

  Future<void> _changeIcon(CustomIcon icon) async {
    final currentIcon = icon.currentIcon;
    try {
      await _flutterAppIconChangerPlugin.changeIcon(currentIcon);
      setState(() {
        _currentIcon = icon;
      });
    } on PlatformException catch (e) {
      debugPrint("更改图标失败: '${e.message}'.");
    }
  }
}