Flutter字段生成插件fields_generator的使用

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

Flutter字段生成插件fields_generator的使用

该包为Dart和Flutter类提供了字段名称代码生成功能。

使用场景

  • Firebase查询字段名称
  • Supabase查询字段名称

使用方法

首先,在pubspec.yaml文件中添加以下依赖:

dependencies:
  fields_generator: 

然后,在终端运行以下命令:

flutter pub get

或者直接运行:

flutter pub add fields_generator

接下来,创建一个包含字段的类,并使用[@fields](/user/fields)注解。例如:

import 'package:fields_generator/fields_generator.dart';
import 'package:json_annotation/json_annotation.dart';

part 'main.fields.dart';

[@fields](/user/fields)()
class User {
  User({
    required this.name,
    required this.age,
  });

  final String name;
  final int age;
}

void main(List<String> args) {
  print(UserFields.nameFieldName); // 输出: name
  print(UserFields.ageFieldName); // 输出: age
}

自动生成的代码

自动生成的代码会包含在main.fields.dart文件中。以下是自动生成的代码示例:

// 自动生成的代码 - 不要手动修改

// ***************************************************************************
// FieldsLibraryGenerator
//***************************************************************************

part of 'main.dart';

/// [User] 字段
abstract final class UserFields {
  const UserFields._();

  /// [User.name]
  static const String nameFieldName = 'name';

  /// [User.age]
  static const String ageFieldName = 'age';

  static const List<String> fieldsNames = [nameFieldName, ageFieldName];
}

/// [User] 字段
@JsonEnum(
  fieldRename: FieldRename.none,
)
enum UserFieldsEnum {
  name,
  age,
}

与freezed结合使用

如果希望将此插件与freezed库结合使用,可以这样操作:

import 'package:fields_generator/fields_generator.dart';
import 'package:freezed_annotation/freezed_annotation.dart';

part 'main.fields.dart';
part 'main.freezed.dart';
part 'main.g.dart';

[@freezed](/user/freezed)
class User with _$User {
  [@fields](/user/fields)
  [@JsonSerializable](/user/JsonSerializable)()
  factory User({
    required String name,
    required int age,
  }) = _User;

  factory User.fromJson(Map<String, dynamic> json) => _$UserFromJson(json);
}

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

1 回复

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


当然,以下是如何在Flutter项目中使用fields_generator插件的一个示例。这个插件通常用于动态生成表单字段,以便在多个地方重用相同的表单结构,而无需重复编写代码。

首先,确保你已经将fields_generator插件添加到你的pubspec.yaml文件中:

dependencies:
  flutter:
    sdk: flutter
  fields_generator: ^最新版本号  # 请替换为最新版本号

然后,运行flutter pub get来安装依赖。

接下来是一个完整的示例,展示了如何使用fields_generator来生成表单字段:

  1. 创建表单字段定义
// fields_definitions.dart
import 'package:fields_generator/fields_generator.dart';

List<DynamicFormField> getFieldDefinitions() {
  return [
    DynamicFormField(
      type: FieldType.text,
      name: 'username',
      label: 'Username',
      required: true,
      validators: [
        { 'type': 'minLength', 'params': {'length': 3} },
        { 'type': 'maxLength', 'params': {'length': 20} },
      ],
    ),
    DynamicFormField(
      type: FieldType.email,
      name: 'email',
      label: 'Email',
      required: true,
    ),
    DynamicFormField(
      type: FieldType.password,
      name: 'password',
      label: 'Password',
      required: true,
      validators: [
        { 'type': 'minLength', 'params': {'length': 6} },
      ],
    ),
  ];
}
  1. 生成并显示表单
// main.dart
import 'package:flutter/material.dart';
import 'package:fields_generator/fields_generator.dart';
import 'fields_definitions.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _formKey = GlobalKey<FormState>();
  late List<DynamicFormField> fields;

  @override
  void initState() {
    super.initState();
    fields = getFieldDefinitions();
  }

  void _submitForm() {
    if (_formKey.currentState!.validate()) {
      _formKey.currentState!.save();
      // 在这里处理表单数据
      print('Form Submitted');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Form Generator Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: DynamicForm(
            fields: fields,
            onSave: (values) {
              // 在这里你可以获取表单的值
              print(values);
            },
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _submitForm,
        tooltip: 'Submit',
        child: Icon(Icons.send),
      ),
    );
  }
}

在这个示例中,我们首先定义了一个包含表单字段定义的fields_definitions.dart文件。然后,在main.dart文件中,我们创建了一个Flutter应用,使用DynamicForm组件来动态生成表单字段,并根据定义进行验证和保存。

注意:

  • DynamicFormField的定义可能因fields_generator插件的版本不同而有所变化,请参考插件的官方文档进行适当调整。
  • 示例中的validators参数是一个JSON对象数组,用于定义字段的验证规则。这些规则会根据插件的实现有所不同,请参考插件的文档以获取更多信息。
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!