Flutter图标生成插件flutter_launcher_icons_lego的使用

lego project pub package

flutter_launcher_icons_lego #

app icon, web favicon generator lego.

安装 #

  1. 打开终端并进入lego项目的根目录,输入以下命令以安装CLI工具。如果还没有创建lego项目,请先创建一个。
flutter pub global activate lego_cli
lego create
  1. 在终端中,输入以下命令将lego添加到项目中。
lego add flutter_launcher_icons_lego
  1. 更改`assets/lego/flutter_launcher_icons_lego`目录下的应用图标PNG文件。
  1. 修改`pubspec.yaml`文件中的以下代码块。
flutter_icons:
  image_path_android: "assets/lego/flutter_launcher_icons_lego/android.png"
  image_path_ios: "assets/lego/flutter_launcher_icons_lego/ios.png"
  android: true # 可以指定文件名,例如 "ic_launcher"
  ios: true # 可以指定文件名,例如 "My-Launcher-Icon"
  remove_alpha_ios: true
  adaptive_icon_background: "#ffffff" # 仅适用于Android 8.0及以上设备
  adaptive_icon_foreground: "assets/lego/flutter_launcher_icons_lego/android.png" # 仅适用于Android 8.0及以上设备
  web:
    generate: true
    image_path: "assets/lego/flutter_launcher_icons_lego/web.png"
    background_color: "#ffffff"
    theme_color: "#ffffff"
  1. 输入以下命令以安装模块。
flutter pub run flutter_launcher_icons

使用 #

这是一个完整的示例,展示如何使用`flutter_launcher_icons_lego`插件来生成图标。

示例代码

1. 创建一个新的Flutter项目

flutter create my_app
cd my_app

2. 安装lego CLI工具

flutter pub global activate lego_cli
lego create

3. 添加flutter_launcher_icons_lego插件到项目中

lego add flutter_launcher_icons_lego

4. 修改pubspec.yaml文件

pubspec.yaml文件中添加以下配置:

name: my_app
description: A new Flutter project.

version: 1.0.0+1

environment:
  sdk: ">=2.12.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:

  uses-material-design: true

  assets:
    - assets/lego/flutter_launcher_icons_lego/

flutter_icons:
  image_path_android: "assets/lego/flutter_launcher_icons_lego/android.png"
  image_path_ios: "assets/lego/flutter_launcher_icons_lego/ios.png"
  android: true
  ios: true
  remove_alpha_ios: true
  adaptive_icon_background: "#ffffff"
  adaptive_icon_foreground: "assets/lego/flutter_launcher_icons_lego/android.png"
  web:
    generate: true
    image_path: "assets/lego/flutter_launcher_icons_lego/web.png"
    background_color: "#ffffff"
    theme_color: "#ffffff"

5. 替换默认图标

将自定义图标放入assets/lego/flutter_launcher_icons_lego/目录中,并确保文件名为android.png(用于Android)和ios.png(用于iOS)。同时,确保web.png用于生成Web图标。

6. 运行脚本生成图标

flutter pub run flutter_launcher_icons

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

1 回复

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


flutter_launcher_icons_lego 是一个用于生成 Flutter 应用图标的插件。它可以帮助你快速生成适用于 Android 和 iOS 的应用启动图标。以下是使用 flutter_launcher_icons_lego 的步骤:

1. 安装插件

首先,你需要在 pubspec.yaml 文件中添加 flutter_launcher_icons_lego 依赖。

dev_dependencies:
  flutter_launcher_icons_lego: ^1.0.0

然后运行以下命令来安装依赖:

flutter pub get

2. 配置 pubspec.yaml

pubspec.yaml 文件中添加 flutter_launcher_icons_lego 的配置。以下是一个示例配置:

flutter_launcher_icons_lego:
  image_path: "assets/icon/icon.png"  # 你的图标文件路径
  android: true  # 生成 Android 图标
  ios: true  # 生成 iOS 图标
  adaptive_icon_background: "#FFFFFF"  # Android 自适应图标背景色
  adaptive_icon_foreground: "assets/icon/icon_foreground.png"  # Android 自适应图标前景图
  remove_alpha_ios: true  # 移除 iOS 图标的透明度

3. 运行生成命令

在终端中运行以下命令来生成图标:

flutter pub run flutter_launcher_icons_lego:generate

4. 检查生成结果

运行命令后,插件会根据配置生成相应的图标文件,并将其放置在正确的位置。

  • 对于 Android,图标会生成在 android/app/src/main/res 目录下。
  • 对于 iOS,图标会生成在 ios/Runner/Assets.xcassets/AppIcon.appiconset 目录下。

5. 重新运行应用

生成图标后,你可以重新运行你的 Flutter 应用,确保图标已经更新。

flutter run

6. 可选配置

你可以根据需要进行更多的配置,例如:

  • image_path_androidimage_path_ios:分别为 Android 和 iOS 指定不同的图标文件。
  • min_sdk_android:指定生成图标的最低 Android SDK 版本。
  • remove_alpha_android:移除 Android 图标的透明度。

7. 示例配置文件

以下是一个完整的示例配置文件:

flutter_launcher_icons_lego:
  image_path: "assets/icon/icon.png"
  android: true
  ios: true
  adaptive_icon_background: "#FFFFFF"
  adaptive_icon_foreground: "assets/icon/icon_foreground.png"
  remove_alpha_ios: true
  image_path_android: "assets/icon/icon_android.png"
  image_path_ios: "assets/icon/icon_ios.png"
  min_sdk_android: 21
  remove_alpha_android: true
回到顶部