FlutterGen 使用教程

FlutterGen 使用教程

flutter_genThe Flutter code generator for your assets, fonts, colors, … — Get rid of all String-based APIs.项目地址:https://gitcode.com/gh_mirrors/fl/flutter_gen

项目介绍

FlutterGen 是一个用于 Flutter 项目的代码生成工具，旨在简化资产（如图片、字体、颜色等）的管理和使用。通过 FlutterGen，开发者可以摆脱基于字符串的 API，使用类型安全的方式访问项目中的各种资源。

项目快速启动

安装 FlutterGen

首先，在 pubspec.yaml 文件中添加 FlutterGen 依赖：

dev_dependencies:
  build_runner:
  flutter_gen_runner:

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

flutter pub get

配置 FlutterGen

在 pubspec.yaml 文件中添加 FlutterGen 的配置：

flutter_gen:
  output: lib/gen/
  line_length: 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
    - family: RobotoMono
      fonts:
        - asset: assets/fonts/RobotoMono-Regular.ttf
        - asset: assets/fonts/RobotoMono-Bold.ttf
          weight: 700

生成资源文件

运行以下命令生成资源文件：

flutter packages pub run build_runner build

使用生成的资源

在代码中使用生成的资源文件：

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

void main() {
  runApp(MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
      fontFamily: FontFamily.raleway,
      primarySwatch: ColorName.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: Assets.flare.penguin.flare(
                  animation: 'walk',
                  fit: BoxFit.contain,
                ),
              ),
            ],
          ),
        ),
      ),
    ),
  ));
}

应用案例和最佳实践

案例一：使用生成的颜色类

在 pubspec.yaml 中配置颜色文件：

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

生成颜色类后，可以直接在代码中使用：

Text(
  'Hi there, I\'m FlutterGen',
  style: TextStyle(
    color: ColorName.primaryColor,
  ),
)

案例二：使用生成的字体类

在 pubspec.yaml 中配置字体文件：

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

生成字体类后，可以直接在代码中使用：

Text(
  'Hi there, I\'m FlutterGen',
  style: TextStyle(
    fontFamily: FontFamily.raleway,
  ),
)

典型生态项目

FlutterGen 可以与以下生态项目结合使用，进一步提升开发效率：

1. flutter_svg: 用于在 Flutter 中渲染 SVG 图像。
2. flare_flutter: 用于在 Flutter 中使用 Flare 动画。
3. rive:

flutter_genThe Flutter code generator for your assets, fonts, colors, … — Get rid of all String-based APIs.项目地址:https://gitcode.com/gh_mirrors/fl/flutter_gen