Flutter自动生成代码插件ds_flutter_gen的使用

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

Flutter自动生成代码插件ds_flutter_gen的使用

在本指南中，我们将详细介绍如何使用ds_flutter_gen插件来自动生成Flutter应用中的代码。该插件可以帮助你避免手动编写资产路径字符串，从而提高代码的安全性和可维护性。

1. 安装过程

通过pub global安装

dart pub global activate ds_flutter_gen

可能需要设置环境变量以确保ds_flutter_gen命令可以在任何地方运行。

作为build_runner的一部分安装

  1. 在你的pubspec.yaml文件中添加依赖：
dev_dependencies:
  build_runner:
  ds_flutter_gen_runner:
  1. 运行以下命令来安装依赖：
flutter pub get
  1. 使用build_runner生成代码：
dart run build_runner build

2. 配置文件

ds_flutter_gen根据pubspec.yaml文件中的配置生成代码。默认配置可以在这里找到：默认配置。

# pubspec.yaml
# ...

ds_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

你也可以在build.yaml文件中配置生成选项，它将优先于pubspec.yaml中的配置：

# build.yaml
# ...

targets:
  $default:
    builders:
      ds_flutter_gen_runner: # 或者 flutter_gen
        options: 
          output: lib/build_gen/ # 可选（默认：lib/gen/）
          line_length: 120 # 可选（默认：80）

3. 使用示例

资产生成

# pubspec.yaml
flutter:
  assets:
    - assets/images/
    - assets/images/chip3/chip.jpg
    - assets/images/chip4/chip.jpg
    - assets/images/icons/paint.svg
    - assets/images/icons/dart@test.svg
    - assets/json/fruits.json
    - assets/flare/Penguin.flr
    - assets/rive/vehicles.riv
    - pictures/ocean_view.jpg

这些配置会默认在lib/gen/目录下生成assets.gen.dart文件。

// 使用生成的类
Widget build(BuildContext context) {
  return Assets.images.chip3.image();
}

字体生成

# pubspec.yaml
flutter:
  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

这些配置会默认在lib/gen/目录下生成fonts.gen.dart文件。

// 使用生成的字体
Text(
  'Hi there, I\'m FlutterGen',
  style: TextStyle(
    fontFamily: FontFamily.robotoMono,
    fontFamilyFallback: const [FontFamily.raleway],
  ),
)

颜色生成

# pubspec.yaml
ds_flutter_gen:
  colors:
    inputs:
      - assets/color/colors.xml

这些配置会默认在lib/gen/目录下生成colors.gen.dart文件。

// 使用生成的颜色
Text(
  'Hi there, I\'m FlutterGen',
  style: TextStyle(
    color: ColorName.denim,
  ),
)

4. 示例代码

import 'package:example_resources/gen/assets.gen.dart';
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(
      // 自动从FlutterGen生成的字体
      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>[
              // 自动从FlutterGen生成的图像
              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')),
              ),
              // 使用example_resource包
              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(
                  // 自动从FlutterGen生成的颜色
                  color: MyColorName.black60,

                  // 自动从FlutterGen生成的字体
                  fontFamily: MyFontFamily.robotoMono,
                  fontFamilyFallback: [MyFontFamily.raleway],
                ),
              ),
            ],
          ),
        ),
      ),
    ),
  ));
}

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

1 回复

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


ds_flutter_gen 是一个用于自动生成 Flutter 代码的插件，旨在帮助开发者减少重复性工作，提高开发效率。它通常用于生成一些常见的代码模板，如路由、模型类、网络请求等。

安装 ds_flutter_gen

  1. 在 pubspec.yaml 中添加依赖：

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

    dev_dependencies:
  ds_flutter_gen: ^1.0.0

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

  2. 配置 build.yaml：

    你需要在项目根目录下创建一个 build.yaml 文件，用于配置 ds_flutter_gen 的行为。

    targets:
  $default:
    builders:
      ds_flutter_gen|ds_flutter_gen:
        enabled: true

使用 ds_flutter_gen

ds_flutter_gen 通常通过注解或配置文件来生成代码。以下是一些常见的用法示例：

1. 生成路由

假设你有一个路由配置文件 routes.yaml，内容如下：

routes:
  - name: HomePage
    path: /home
  - name: ProfilePage
    path: /profile

ds_flutter_gen 可以根据这个配置文件自动生成路由相关的代码。

运行以下命令生成代码：

flutter pub run build_runner build

生成的代码可能会包含路由的映射和相关方法，例如：

class AppRoutes {
  static const String home = '/home';
  static const String profile = '/profile';

  static Map<String, WidgetBuilder> routes = {
    home: (context) => HomePage(),
    profile: (context) => ProfilePage(),
  };
}

2. 生成模型类

如果你有一个 JSON 数据，ds_flutter_gen 可以帮助你生成对应的 Dart 模型类。例如，给定一个 JSON 文件 user.json：

{
  "id": 1,
  "name": "John Doe",
  "email": "john.doe@example.com"
}

运行以下命令生成模型类：

flutter pub run build_runner build

生成的代码可能会类似于：

class User {
  final int id;
  final String name;
  final String email;

  User({required this.id, required this.name, required this.email});

  factory User.fromJson(Map<String, dynamic> json) {
    return User(
      id: json['id'],
      name: json['name'],
      email: json['email'],
    );
  }

  Map<String, dynamic> toJson() {
    return {
      'id': id,
      'name': name,
      'email': email,
    };
  }
}

3. 生成网络请求代码

ds_flutter_gen 还可以根据 API 定义生成网络请求代码。例如，给定一个 API 配置文件 api.yaml：

endpoints:
  - name: getUser
    path: /user/{id}
    method: GET
    response: User

生成的代码可能会包含网络请求的方法：

class ApiService {
  Future<User> getUser(int id) async {
    final response = await http.get(Uri.parse('/user/$id'));
    if (response.statusCode == 200) {
      return User.fromJson(jsonDecode(response.body));
    } else {
      throw Exception('Failed to load user');
    }
  }
}
回到顶部
AI 助手
你好，我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验！