Flutter应用图标切换插件app_icon_switcher的使用

Flutter应用图标切换插件app_icon_switcher的使用

Application icon switcher, 仅适用于Android。

开始使用

本插件由 deynerreinoso 和 jhoanse7 开发。

步骤1：创建图标资源文件

在项目中创建带有 ic_launcher_3 名称的图像文件，并将其放置在以下目录中：

  • android/app/src/main/res/mipmap- 各个尺寸的文件夹内。

步骤2：修改 AndroidManifest.xml 文件

在你的 AndroidManifest.xml 文件中，添加以下内容：

<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>

步骤3：使用插件更改默认图标

在你的 Dart 代码中，你可以通过调用 AppIconSwitcher.updateIcon('ALT') 方法来更改默认图标。例如：

void _updateIcon() async {
  await AppIconSwitcher.updateIcon('ALT');
}

步骤4：设置新的应用名称

android:label 属性用于设置新的应用名称。你可以在 AndroidManifest.xml 中进行相应配置。

步骤5：重置为默认图标

如果需要将图标重置为默认值，可以调用 AppIconSwitcher.resetIcon() 方法：

void _resetIcon() async {
  await AppIconSwitcher.resetIcon();
}

完整示例代码

以下是完整的示例代码，展示了如何在 Flutter 应用中使用 app_icon_switcher 插件来切换应用图标。

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

import 'package:flutter/services.dart';
import 'package:app_icon_switcher/app_icon_switcher.dart';

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

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

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

class _MyAppState extends State<MyApp> {

  // 更新图标的方法
  void _updateIcon() async {
    await AppIconSwitcher.updateIcon('ALT');
  }

  // 重置图标的方
  void _resetIcon() async {
    await AppIconSwitcher.resetIcon();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter 图标切换器'),
        ),
        body: Center(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 更改图标按钮
              TextButton(
                onPressed: _updateIcon,
                child: Text("更改图标"),
              ),
              // 重置图标按钮
              TextButton(
                onPressed: _resetIcon,
                child: Text("重置图标"),
              ),
            ]
          ),
        ),
      ),
    );
  }
}

更多关于Flutter应用图标切换插件app_icon_switcher的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter应用图标切换插件app_icon_switcher的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


app_icon_switcher 是一个 Flutter 插件，允许你在应用中动态切换应用图标。这个功能可以在某些场景下非常有用，比如根据用户偏好、节日主题、或应用的不同模式来更改应用图标。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 app_icon_switcher 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  app_icon_switcher: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

2. 配置 Android 和 iOS 项目

对于 Android

在 android/app/src/main/AndroidManifest.xml 文件中，为每个备用图标配置 <activity-alias>。例如：

<application
    android:name="io.flutter.app.FlutterApplication"
    android:label="Your App"
    android:icon="@mipmap/ic_launcher">

    <activity
        android:name=".MainActivity"
        android:launchMode="singleTop"
        android:theme="@style/LaunchTheme"
        android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|screenLayout|density|uiMode"
        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>

    <!-- 添加备用图标 -->
    <activity-alias
        android:name=".MainActivityAlias1"
        android:label="App Icon 1"
        android:icon="@mipmap/ic_launcher_1"
        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=".MainActivityAlias2"
        android:label="App Icon 2"
        android:icon="@mipmap/ic_launcher_2"
        android:targetActivity=".MainActivity">
        <intent-filter>
            <action android:name="android.intent.action.MAIN"/>
            <category android:name="android.intent.category.LAUNCHER"/>
        </intent-filter>
    </activity-alias>

</application>

在 android/app/src/main/res/mipmap-* 目录下放置不同分辨率的图标文件（如 ic_launcher_1.png 和 ic_launcher_2.png）。

对于 iOS

在 ios/Runner/Info.plist 文件中，配置备用图标：

<key>CFBundleIcons</key>
<dict>
    <key>CFBundlePrimaryIcon</key>
    <dict>
        <key>CFBundleIconFiles</key>
        <array>
            <string>AppIcon</string>
        </array>
    </dict>
    <key>CFBundleAlternateIcons</key>
    <dict>
        <key>AppIcon1</key>
        <dict>
            <key>CFBundleIconFiles</key>
            <array>
                <string>AppIcon1</string>
            </array>
        </dict>
        <key>UIPrerenderedIcon</key>
        <true/>
        <key>UISupportsAlternateIcons</key>
        <true/>
    </dict>
    <key>AppIcon2</key>
    <dict>
        <key>CFBundleIconFiles</key>
        <array>
            <string>AppIcon2</string>
        </array>
        <key>UIPrerenderedIcon</key>
        <true/>
        <key>UISupportsAlternateIcons</key>
        <true/>
    </dict>
</dict>

在 ios/Runner/Assets.xcassets 目录下，放置不同图标的 .appiconset（如 AppIcon1.appiconset 和 AppIcon2.appiconset）。

3. 使用插件切换图标

在 Flutter 代码中，你可以使用 app_icon_switcher 插件来切换应用图标。以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'App Icon Switcher Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  String _currentIcon = "default";

  Future<void> _changeIcon(String iconName) async {
    try {
      await AppIconSwitcher.changeIcon(iconName);
      setState(() {
        _currentIcon = iconName;
      });
    } catch (e) {
      print("Error changing icon: $e");
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('App Icon Switcher'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Current Icon: $_currentIcon',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => _changeIcon("AppIcon1"),
              child: Text("Switch to Icon 1"),
            ),
            ElevatedButton(
              onPressed: () => _changeIcon("AppIcon2"),
              child: Text("Switch to Icon 2"),
            ),
            ElevatedButton(
              onPressed: () => _changeIcon("default"),
              child: Text("Reset to Default Icon"),
            ),
          ],
        ),
      ),
    );
  }
}
回到顶部