Flutter动态表单构建插件ems_form_dynamic的使用

Flutter 动态表单构建插件 ems_form_dynamic 的使用

CustomerFormWidget 是一个 Flutter 通用小部件，允许构建动态表单并灵活地处理数据模型。本文档解释如何配置和使用该小部件。

特性

• 基于字段列表创建动态表单。
• 验证输入字段。
• 使用 fromMap 函数反序列化通用模型。
• 当数据保存时通知外部组件。
• 在选择时显示内容的 toString() 方法。

安装

1. 将小部件文件和相关模型添加到你的 Flutter 项目中。
2. 确保在 pubspec.yaml 文件中配置了 flutter 依赖项。

模型要求

使用 CustomerFormWidget 的通用模型必须实现两个方法：

• fromMap: 从 Map<String, dynamic> 创建模型实例。

示例模型

class CustomerLogin {
  String? email;
  String? createAt;
  TipoModelo? tipoModelo;

  CustomerLogin({
    this.email,
    this.createAt,
    this.tipoModelo,
  });

  factory CustomerLogin.fromMap(Map<String, dynamic> map) {
    return CustomerLogin(
      email: map['email'] as String?,
      createAt: map['createAt'] as String?,
      tipoModelo: map['tipoModelo'] == null
              ? null
              : TipoModelo.fromMap(map['tipoModelo']),
    );
  }

  [@override](/user/override)
  String toString() {
    return 'CustomerLogin{email: $email, createAt: $createAt, tipoModelo: $tipoModelo }';
  }
}

class TipoModelo {
  String nombre;
  int id;

  TipoModelo({
    required this.nombre,
    required this.id,
  });

  factory TipoModelo.fromMap(Map<String, dynamic> map) {
    return TipoModelo(nombre: map['nombre'], id: map['id']);
  }

  [@override](/user/override)
  String toString() {
    return nombre;
  }
}

使用小部件

完整示例

import 'package:flutter/material.dart';

import 'models/form_field_model.dart';
import 'models/validation_type_enum.dart';
import 'widgets/CustomerFormWidget.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Customer Form Widget')),
        body: CustomerFormExample(),
      ),
    );
  }
}

class CustomerFormExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return CustomerFormWidget(
      key: formWidgetKey,
      padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 30),
      formFieldList: formFieldList,
      model: CustomerLogin(),
      fromMap: CustomerLogin.fromMap,
      buttonSave: ElevatedButton(
        onPressed: () {
          try {
            final updatedModel = formWidgetKey.currentState!.saveForm();
            debugPrint('Form model is :: ${updatedModel.toString()}');
            formWidgetKey.currentState!.clearForm();
          } catch (e) {
            debugPrint('Error Form model is :: ${e.toString()} ');
          }
        },
        child: const Text('Login in'),
      ),
    );
  }
}