Flutter资源生成插件flutter_gen_runner的使用

简介

FlutterGen 是一个用于Flutter项目的代码生成工具，旨在为项目中的资源（如assets、fonts、colors等）提供类型安全的访问方式。通过它，你可以告别基于字符串的API，减少拼写错误带来的风险。

动机

直接使用资源路径字符串是不安全的做法：

# pubspec.yaml
flutter:
  assets:
    - assets/images/profile.jpg

❌ Bad 如果出现拼写错误将会导致运行时错误：

Widget build(BuildContext context) {
  return Image.asset('assets/images/profile.jpeg'); // 错误的文件名
}

⭕️ Good 使用类型安全的方式：

Widget build(BuildContext context) {
  return Assets.images.profile.image();
}

安装

Homebrew (适用于macOS和Linux)

brew install FlutterGen/tap/fluttergen

asdf (适用于macOS和Linux)

# 添加插件
asdf plugin add fluttergen
# 或者
asdf plugin add fluttergen https://github.com/FlutterGen/asdf-fluttergen.git

# 安装fluttergen
asdf install fluttergen latest

更多信息请参阅 FlutterGen/asdf-fluttergen

Pub Global (适用于macOS, Linux和Windows)

dart pub global activate flutter_gen

你可能需要配置你的PATH环境变量，请参考Dart官方文档

作为build_runner的一部分

1. 将 build_runner 和 flutter_gen_runner 添加到项目的 pubspec.yaml 文件中：

dev_dependencies:
  build_runner:
  flutter_gen_runner:

1. 安装依赖：

flutter pub get

1. 使用 flutter_gen:

dart run build_runner build

GitHub Actions (适用于macOS和Linux)

在GitHub Actions中使用：

- uses: FlutterGen/setup-fluttergen@v1
  with:
    version: ${{ fluttergen_version }}

更多信息请参阅 FlutterGen/setup-fluttergen

使用方法

在配置好 pubspec.yaml 后，运行以下命令：

fluttergen -h # 查看帮助信息
fluttergen -c example/pubspec.yaml # 根据指定的配置文件生成代码

配置文件

FlutterGen 根据 pubspec.yaml 中的 flutter 和 flutter_gen 部分生成 Dart 文件，默认配置可以在这里找到：默认配置

示例配置：

# pubspec.yaml
flutter_gen:
  output: lib/gen/ # 可选，默认为lib/gen/
  line_length: 80 # 可选，默认为80

  integrations:
    flutter_svg: true
    flare_flutter: true
    rive: true
    lottie: true

  colors:
    inputs:
      - assets/color/colors.xml

flutter:
  uses-material-design: true
  assets:
    - assets/images/

  fonts:
    - family: Raleway
      fonts:
        - asset: assets/fonts/Raleway-Regular.ttf
        - asset: assets/fonts/Raleway-Italic.ttf
          style: italic

示例代码

下面是一个完整的示例代码，展示了如何使用 flutter_gen 来管理资源：

import 'package:flutter/material.dart';
import 'gen/assets.gen.dart';
import 'gen/colors.gen.dart';
import 'gen/fonts.gen.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  runApp(MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
      fontFamily: MyFontFamily.raleway,
      primarySwatch: MyColorName.crimsonRed,
    ),
    home: Scaffold(
      appBar: AppBar(
        title: const Text('FlutterGen'),
      ),
      body: Center(
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              SizedBox(
                width: 200,
                height: 200,
                child: MyAssets.flare.penguin.flare(
                  animation: 'walk',
                  fit: BoxFit.contain,
                ),
              ),
              SizedBox(
                width: 200,
                height: 200,
                child: MyAssets.rive.vehicles.rive(
                  fit: BoxFit.contain,
                ),
              ),
              SizedBox(
                width: 200,
                height: 200,
                child: MyAssets.lottie.hamburgerArrow.lottie(
                  fit: BoxFit.contain,
                ),
              ),
              SizedBox(
                width: 200,
                height: 200,
                child: MyAssets.lottie.geometricalAnimation.lottie(
                  fit: BoxFit.contain,
                ),
              ),
              SizedBox(
                width: 200,
                height: 200,
                child: MyAssets.lottie.alarmClockLottieV440.lottie(
                  fit: BoxFit.contain,
                ),
              ),
              MyAssets.images.chip1.image(),
              Container(
                height: 400,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: MyAssets.images.chip1.provider(),
                  ),
                ),
                child: const Center(child: Text('Deco')),
              ),
              MyAssets.images.icons.kmm.svg(key: const Key("kmm_svg")),
              MyAssets.images.icons.fuchsia.svg(),
              MyAssets.images.icons.paint.svg(
                width: 120,
                height: 120,
              ),
              Text(MyAssets.images.icons.kmm.path),
              Text(MyAssets.images.icons.kmm.keyName),
              Text(ResAssets.images.dart.path),
              Text(ResAssets.images.dart.keyName),
              ResAssets.images.flutter3.image(),
              ResAssets.images.dart.svg(),
              SizedBox(
                width: 200,
                height: 200,
                child: ResAssets.images.skills.rive(
                  fit: BoxFit.contain,
                ),
              ),
              SizedBox(
                width: 200,
                height: 200,
                child: ResAssets.images.favorite.flare(
                  shouldClip: false,
                ),
              ),
              SizedBox(
                width: 200,
                height: 200,
                child: ResAssets.images.runningCarOnRoad.lottie(
                  fit: BoxFit.contain,
                ),
              ),
              const Text(
                'Hi there, I\'m FlutterGen',
                style: TextStyle(
                  color: MyColorName.black60,
                  fontFamily: MyFontFamily.robotoMono,
                  fontFamilyFallback: [MyFontFamily.raleway],
                ),
              ),
            ],
          ),
        ),
      ),
    ),
  ));
}

这个例子展示了如何使用 flutter_gen 生成的资源类来加载图片、SVG、字体和颜色，并应用到UI组件中。希望这些内容能帮助你更好地理解和使用 flutter_gen 插件！