Flutter应用图标管理插件icons_launcher的使用

发布于 1周前 作者 bupafengyu 来自 Flutter

Flutter应用图标管理插件icons_launcher的使用

插件简介

🍃 Icons Launcher 🍃

Icons Launcher 是一个命令行工具，简化了更新Flutter应用程序启动图标的任务。它具有完全的灵活性，允许您根据需要仅更新特定平台的启动图标。

平台支持

平台 支持情况
Android ✅
iOS ✅
macOS ✅
Web ✅
Linux ✅
Windows ✅

使用指南

1. 配置文件设置

在pubspec.yaml中添加Icons Launcher配置，或创建一个新的配置文件icons_launcher.yaml。

示例配置：

icons_launcher:
  image_path: "assets/ic_logo_radius.png"
  platforms:
    android:
      enable: true
    ios:
      enable: true

更多复杂示例配置：

icons_launcher:
  image_path: "assets/ic_logo_radius.png"
  platforms:
    android:
      enable: true
      image_path: "assets/ic_logo_radius.png"
      notification_image: "assets/ic_foreground.png"
      adaptive_background_image: "assets/ic_background.png"
      adaptive_foreground_image: "assets/ic_foreground.png"
      adaptive_round_image: "assets/ic_logo_round.png"
      adaptive_monochrome_image: "assets/ic_black_white.png"
    ios:
      enable: true
      image_path: "assets/ic_logo_rectangle_light.png"
      dark_path: "assets/ic_logo_rectangle_dark.png"
      tinted_path: "assets/ic_logo_rectangle_tinted.png"
    web:
      enable: true
      image_path: "assets/ic_logo_radius.png"
      favicon_path: "assets/ic_logo_round.png"
    macos:
      enable: false
      image_path: "assets/ic_logo_radius.png"
    windows:
      enable: false
      image_path: "assets/ic_logo_radius.png"
    linux:
      enable: false
      image_path: "assets/ic_logo_radius.png"

2. 运行包

完成配置后，只需运行以下命令即可生成图标：

flutter pub get
dart run icons_launcher:create

如果您的配置文件不是icons_launcher.yaml或pubspec.yaml，则需要指定配置文件名：

flutter pub get
dart run icons_launcher:create --path <your config file name here>

注意：如果您不使用现有的pubspec.yaml，您的配置文件必须与它位于同一目录下。

3. 命令行参数

  • --path：指定配置文件路径（默认为icons_launcher.yaml或pubspec.yaml）。
  • --flavor：指定要生成的Flavor名称（如dev、prod等）。

4. Flavor支持

您可以为不同的Flavor创建单独的配置文件，例如icons_launcher-dev.yaml和icons_launcher-prod.yaml。

生成特定Flavor的图标：

dart run icons_launcher:create --flavor dev

同时生成多个Flavor的图标：

dart run icons_launcher:create --flavors dev,prod

完整示例Demo

项目结构

my_flutter_app/
├── assets/
│   ├── ic_logo_radius.png
│   ├── ic_foreground.png
│   ├── ic_background.png
│   ├── ic_logo_round.png
│   ├── ic_black_white.png
│   ├── ic_logo_rectangle_light.png
│   ├── ic_logo_rectangle_dark.png
│   └── ic_logo_rectangle_tinted.png
├── lib/
│   └── main.dart
└── pubspec.yaml

pubspec.yaml配置

name: my_flutter_app
description: A new Flutter project.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev

version: 1.0.0+1

environment:
  sdk: ">=2.17.6 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^2.0.0
  icons_launcher: ^latest_version # 替换为最新版本号

flutter:
  uses-material-design: true
  assets:
    - assets/ic_logo_radius.png
    - assets/ic_foreground.png
    - assets/ic_background.png
    - assets/ic_logo_round.png
    - assets/ic_black_white.png
    - assets/ic_logo_rectangle_light.png
    - assets/ic_logo_rectangle_dark.png
    - assets/ic_logo_rectangle_tinted.png

icons_launcher:
  image_path: "assets/ic_logo_radius.png"
  platforms:
    android:
      enable: true
      image_path: "assets/ic_logo_radius.png"
      notification_image: "assets/ic_foreground.png"
      adaptive_background_image: "assets/ic_background.png"
      adaptive_foreground_image: "assets/ic_foreground.png"
      adaptive_round_image: "assets/ic_logo_round.png"
      adaptive_monochrome_image: "assets/ic_black_white.png"
    ios:
      enable: true
      image_path: "assets/ic_logo_rectangle_light.png"
      dark_path: "assets/ic_logo_rectangle_dark.png"
      tinted_path: "assets/ic_logo_rectangle_tinted.png"
    web:
      enable: true
      image_path: "assets/ic_logo_radius.png"
      favicon_path: "assets/ic_logo_round.png"
    macos:
      enable: false
      image_path: "assets/ic_logo_radius.png"
    windows:
      enable: false
      image_path: "assets/ic_logo_radius.png"
    linux:
      enable: false
      image_path: "assets/ic_logo_radius.png"

生成图标

在项目根目录下运行以下命令：

flutter pub get
dart run icons_launcher:create

这样，Icons Launcher将会根据配置文件自动生成各个平台所需的启动图标。

结论

通过使用Icons Launcher插件，您可以轻松管理和生成不同平台的启动图标，大大简化了开发流程。希望这个指南对您有所帮助！如果有任何问题，欢迎随时提问。


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

Harmonyos Next教程
1 回复

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


当然，以下是一个关于如何在Flutter应用中使用icons_launcher插件来管理应用图标的示例代码。icons_launcher插件允许你动态更改Flutter应用的应用图标。

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

dependencies:
  flutter:
    sdk: flutter
  icons_launcher: ^x.y.z  # 请替换为最新版本号

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

接下来，你需要准备多个应用图标资源文件（如PNG格式），并将它们放在你的Flutter项目的assets文件夹中。例如，假设你有两个图标：icon1.png和icon2.png。

你的项目结构可能看起来像这样：

your_flutter_project/
├── assets/
│   ├── icon1.png
│   └── icon2.png
├── lib/
│   └── main.dart
├── pubspec.yaml
└── ...

在pubspec.yaml文件中，确保你已经声明了这些资产文件：

flutter:
  assets:
    - assets/icon1.png
    - assets/icon2.png

现在，你可以在main.dart文件中使用icons_launcher插件来更改应用图标。以下是一个简单的示例代码：

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
    // 初始设置应用图标（可选）
    _setAppIcon('assets/icon1.png');
  }

  Future<void> _setAppIcon(String assetPath) async {
    try {
      bool success = await IconsLauncher().setLauncherIcon(
        assetPath,
      );
      if (success) {
        print('应用图标已成功设置为: $assetPath');
      } else {
        print('设置应用图标失败');
      }
    } catch (e) {
      print('设置应用图标时发生错误: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('应用图标管理示例'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ElevatedButton(
                onPressed: () async {
                  await _setAppIcon('assets/icon1.png');
                },
                child: Text('设置图标1'),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () async {
                  await _setAppIcon('assets/icon2.png');
                },
                child: Text('设置图标2'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，它有两个按钮，分别用于将应用图标更改为icon1.png和icon2.png。当用户点击按钮时，_setAppIcon函数会被调用，该函数使用IconsLauncher().setLauncherIcon方法来更改应用图标。

请注意，动态更改应用图标在某些设备和操作系统版本上可能不受支持，因此在实际应用中应进行适当的错误处理和兼容性检查。

希望这个示例对你有帮助！

回到顶部