Flutter表单管理插件simple_dart_form_panel的使用

Flutter表单管理插件simple_dart_form_panel的使用

简介

simple_dart_form_panel 是一个用于简化 Flutter 表单管理的插件。它可以帮助开发者轻松地创建和管理复杂的表单，并且提供了丰富的功能来验证输入、保存数据等。

安装

在 pubspec.yaml 文件中添加依赖：

dependencies:
  simple_dart_form_panel: ^1.0.0

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

flutter pub get

使用示例

1. 导入插件

import 'package:flutter/material.dart';
import 'package:simple_dart_form_panel/simple_dart_form_panel.dart';

2. 创建表单字段

首先，我们需要定义表单字段。每个字段可以有不同的类型和验证规则。

final List<FormField> formFields = [
  FormField(
    key: 'name',
    label: '姓名',
    type: FieldType.text,
    validators: [
      Validator.required('姓名不能为空'),
    ],
  ),
  FormField(
    key: 'email',
    label: '邮箱',
    type: FieldType.email,
    validators: [
      Validator.required('邮箱不能为空'),
      Validator.email('请输入有效的邮箱地址'),
    ],
  ),
  FormField(
    key: 'age',
    label: '年龄',
    type: FieldType.number,
    validators: [
      Validator.required('年龄不能为空'),
      Validator.min(18, '年龄不能小于18岁'),
    ],
  ),
];

3. 初始化 FormPanel

接下来，我们初始化 FormPanel 并将其绑定到表单字段。

class _MyHomePageState extends State<MyHomePage> {
  final FormPanelController _formPanelController = FormPanelController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('简单表单面板示例'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: FormPanel(
          controller: _formPanelController,
          fields: formFields,
          onSubmit: (formData) {
            print('表单提交的数据: $formData');
          },
        ),
      ),
    );
  }
}

4. 表单字段定义

FormField 类定义了每个表单字段的属性，包括键值 (key)、标签 (label)、字段类型 (type) 和验证器 (validators)。

• key: 字段的唯一标识符。
• label: 字段的显示名称。
• type: 字段的类型，支持 text, email, number 等。
• validators: 验证器列表，用于检查输入是否符合要求。

5. 验证器

Validator 类提供了多种验证方法，例如 required, min, max, email 等。

class Validator {
  static String? required(String message) {
    return (value) {
      if (value == null || value.isEmpty) {
        return message;
      }
      return null;
    };
  }

  static String? email(String message) {
    return (value) {
      if (value != null && !value.contains('@')) {
        return message;
      }
      return null;
    };
  }

  static String? min(int minValue, String message) {
    return (value) {
      if (value != null && int.tryParse(value) != null) {
        final number = int.parse(value);
        if (number < minValue) {
          return message;
        }
      }
      return null;
    };
  }
}

6. 表单提交

当用户点击提交按钮时，onSubmit 回调函数会被触发，并传递表单数据。

onSubmit: (formData) {
  print('表单提交的数据: $formData');
},

完整示例代码

import 'package:flutter/material.dart';
import 'package:simple_dart_form_panel/simple_dart_form_panel.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final FormPanelController _formPanelController = FormPanelController();

  final List<FormField> formFields = [
    FormField(
      key: 'name',
      label: '姓名',
      type: FieldType.text,
      validators: [
        Validator.required('姓名不能为空'),
      ],
    ),
    FormField(
      key: 'email',
      label: '邮箱',
      type: FieldType.email,
      validators: [
        Validator.required('邮箱不能为空'),
        Validator.email('请输入有效的邮箱地址'),
      ],
    ),
    FormField(
      key: 'age',
      label: '年龄',
      type: FieldType.number,
      validators: [
        Validator.required('年龄不能为空'),
        Validator.min(18, '年龄不能小于18岁'),
      ],
    ),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('简单表单面板示例'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: FormPanel(
          controller: _formPanelController,
          fields: formFields,
          onSubmit: (formData) {
            print('表单提交的数据: $formData');
          },
        ),
      ),
    );
  }
}