Flutter代码生成插件flutter_code_gen的使用

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

Flutter代码生成插件flutter_code_gen的使用

安装

作为build_runner的一部分

  1. 在你的包的pubspec.yaml文件中添加build_runner和flutter_code_gen依赖：
dev_dependencies:
  build_runner:
  flutter_code_gen:
  1. 运行以下命令以安装flutter_code_gen：
flutter pub get
  1. 使用flutter_code_gen：
dart run build_runner build

有关更多信息，请参阅build_runner文档。

配置文件

文档和参考资料

该插件受到wasa-beef的FlutterGen启发。

示例代码

以下是使用flutter_code_gen生成代码的一个完整示例：

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutter_code_gen_example/gen/icon_font.gen.dart'; // 导入生成的图标字体类

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Icon IcoMoon")), // 设置应用栏标题
        body: GridView( // 使用GridView展示图标
          padding: const EdgeInsets.symmetric(horizontal: 16), // 设置内边距
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 6), // 每行6个图标
          children: IcoMoons.values.map((e) => _getItem(e)).toList(), // 映射IcoMoons的所有值到一个列表
        ),
      ),
    );
  }

  Widget _getItem(IconData icon) => Center( // 创建一个中心对齐的容器
        child: Container(
          padding: const EdgeInsets.all(8), // 设置内部填充
          decoration: BoxDecoration(
            shape: BoxShape.circle, // 设置形状为圆形
            color: Colors
                .primaries[Random().nextInt(Colors.primaries.length)].shade200, // 随机选择一种颜色
          ),
          child: Icon(icon), // 展示图标
        ),
      );
}

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

1 回复

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


当然，以下是一个关于如何使用 flutter_code_gen 插件的示例代码和配置步骤。flutter_code_gen 是一个假设存在的 Flutter 代码生成插件，用于自动生成一些常见的 Flutter 代码模板，比如 Widgets、Blocs、Models 等。由于这是一个假设的插件，具体的 API 和功能可能会有所不同，但以下示例将展示一个典型的代码生成插件的使用方法。

1. 添加依赖

首先，在你的 pubspec.yaml 文件中添加 flutter_code_gen 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_code_gen: ^x.y.z  # 替换为实际的版本号

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

2. 配置 build.yaml

接下来，在你的项目根目录下创建或编辑 build.yaml 文件，添加 flutter_code_gen 的配置：

targets:
  $default:
    builders:
      flutter_code_gen:flutter_code_gen:
        enabled: true

这个配置告诉 Flutter 构建系统启用 flutter_code_gen 的构建器。

3. 使用代码生成注解

假设 flutter_code_gen 提供了一些注解来标记需要生成代码的类。以下是一个示例，使用注解来标记一个需要生成 Model 类的 Dart 文件：

// models/user.dart
import 'package:flutter_code_gen/flutter_code_gen.dart';

part 'user.g.dart';  // 生成的文件将会放在这里

@GenerateModel()
class User {
  final String name;
  final int age;

  User({required this.name, required this.age});

  // 通常你会在这里手动实现一些方法，比如 fromJson 和 toJson
  // 但由于使用了代码生成，这些方法可能会被自动生成
}

4. 运行代码生成

在你的项目根目录下运行以下命令来生成代码：

flutter pub run build_runner build

这将触发 flutter_code_gen 插件，根据注解生成相应的代码文件。在这个例子中，它会在 models/user.g.dart 中生成 User 类的 fromJson 和 toJson 方法。

5. 使用生成的代码

生成代码后，你可以在你的项目中使用它。例如，假设生成的 user.g.dart 文件包含以下内容：

// models/user.g.dart (自动生成)
part of 'user.dart';

extension UserExtension on User {
  // 自动生成的 fromJson 方法
  factory User.fromJson(Map<String, dynamic> json) => User(
    name: json['name'] as String,
    age: json['age'] as int,
  );

  // 自动生成的 toJson 方法
  Map<String, dynamic> toJson() => <String, dynamic>{
    'name': name,
    'age': age,
  };
}

现在你可以在你的项目中使用这些自动生成的方法：

void main() {
  Map<String, dynamic> userJson = {'name': 'Alice', 'age': 30};
  User user = User.fromJson(userJson);
  print(user.toJson());
}

总结

以上示例展示了如何使用一个假设的 flutter_code_gen 插件来自动生成 Flutter 代码。尽管具体的插件 API 和功能可能有所不同，但这个过程通常涉及添加依赖、配置构建系统、使用注解标记需要生成代码的类，然后运行代码生成工具。希望这个示例对你有所帮助！

回到顶部