Flutter图标生成插件flutter_icons_generator的使用

Flutter图标生成插件flutter_icons_generator的使用

特性

  • 自定义输入和输出路径
  • 可以使用多个图标包

使用方法

要使用此插件，请将包含SVG图标的文件夹存储在目标项目中。

导入插件后，创建以下文件。

1. 创建 "icons_generator.yaml" 文件

该文件应具有以下结构：

icons:
  [
    { className: *必需的类名*, sourceFolderPath: *SVG文件所在路径* },
    { className: *必需的类名*, sourceFolderPath: *SVG文件所在路径* },
  ]
outputFontPath: *放置字体文件(.otf)的路径*
outputFilePath: *放置图标文件(.dart)的路径*

2. 在 "build.yaml" 中添加以下行

targets:
  $default:
    builders:
      flutter_icons_generator|iconBuilder:
        options:
          icons_config:
            "./flutter_icons_generator.yaml" #指向你之前创建的icons_generator.yaml的路径

然后，在终端中运行 flutter pub run build_runner build 来启动生成器。

示例

假设SVG文件存储在 "./assets/icons/" 文件夹中。

icons_generator.yaml 示例内容

icons:
  [
    { className: ActionIcons, sourceFolderPath: ./assets/icons/test1 },
    { className: NavigationIcons, sourceFolderPath: ./assets/icons/test2 },
  ]
outputFontPath: ./assets/icon_fonts
outputFilePath: lib/theme

build.yaml 示例内容

targets:
  $default:
    builders:
      flutter_icons_generator|iconBuilder:
        options:
          icons_config:
            "./flutter_icons_generator.yaml"

运行 flutter pub run build_runner build 后，将在 ./assets/icon_fonts 文件夹中生成 action_icons.otf 和 navigation_icons.otf 文件，并在 lib/theme 文件夹中生成 action_icons.dart 和 navigation_icons.dart 文件。

完整示例Demo

以下是一个完整的示例，展示如何在应用中使用生成的图标文件。

main.dart

import 'package:flutter/material.dart';

import 'homepage_view.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: '示例使用',
      home: HomePage(),
    );
  }
}

homepage_view.dart

import 'package:flutter/material.dart';
import 'package:action_icons/action_icons.dart'; // 导入生成的图标文件
import 'package:navigation_icons/navigation_icons.dart'; // 导入生成的图标文件

class HomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('图标示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(Icons.home), // 原生图标
            SizedBox(height: 20),
            Icon(ActionIcons.actionIcon1), // 自定义图标
            SizedBox(height: 20),
            Icon(NavigationIcons.navigationIcon1), // 自定义图标
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


当然，以下是如何在Flutter项目中使用flutter_icons_generator插件来自动生成图标的详细步骤和代码案例。

步骤 1: 添加依赖

首先，你需要在pubspec.yaml文件中添加flutter_icons_generator依赖。确保你的pubspec.yaml文件包含以下内容：

dependencies:
  flutter:
    sdk: flutter

dev_dependencies:
  flutter_icons_generator: ^x.y.z  # 请替换为最新版本号

然后运行flutter pub get来获取依赖。

步骤 2: 配置pubspec.yaml

接下来，你需要在pubspec.yaml文件中配置flutter_icons_generator。在文件末尾添加以下配置：

flutter_icons:
  image_path: "assets/icon/icon.png"  # 你的图标文件路径
  android: true
  ios: true
  remove_alpha_ios: false

这里image_path是你的图标文件路径，android和ios表示是否生成Android和iOS的图标，remove_alpha_ios表示是否在iOS图标中移除透明背景（根据你的需求设置）。

步骤 3: 添加图标文件

将你的图标文件（例如icon.png）放置在项目的assets/icon/目录下。确保你的项目结构类似于：

your_project/
├── assets/
│   └── icon/
│       └── icon.png
├── lib/
│   └── main.dart
└── pubspec.yaml

步骤 4: 运行图标生成命令

在终端中，导航到你的Flutter项目根目录，然后运行以下命令来生成图标：

flutter pub run flutter_icons_generator:main

这个命令会读取pubspec.yaml中的配置，并生成相应的Android和iOS图标。

步骤 5: 使用生成的图标

生成的图标会自动放置在项目的android/app/src/main/res/和ios/Runner/Assets.xcassets/目录中。你可以在Flutter代码中通过以下方式引用这些图标：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Icons Example'),
        ),
        body: Center(
          child: Icon(
            Icons.ic_your_icon_name,  // 这里的ic_your_icon_name是生成的图标名称，通常会自动命名
            size: 50,
          ),
        ),
      ),
    );
  }
}

注意：由于flutter_icons_generator插件生成的图标名称可能与你提供的图标文件名不同，你需要查看生成的图标文件来确定正确的图标名称。通常，生成的图标名称会遵循一定的命名约定，例如ic_your_icon_name。

总结

通过上述步骤，你就可以在Flutter项目中使用flutter_icons_generator插件来自动生成适用于Android和iOS的图标了。这个插件大大简化了图标生成的过程，提高了开发效率。

回到顶部