Flutter多步骤表单插件dynamic_multi_step_form的使用

概述

在填写包含大量字段的表单时，用户体验可能会受到影响。为了解决这个问题，可以使用多步骤表单（Multi-step Form），将长表单分解成多个短小的部分。dynamic_multi_step_form 是一个Flutter插件，它可以帮助开发者轻松实现动态多步骤表单，并支持从服务器或本地JSON配置表单字段和验证规则。

插件功能

• 支持根据字段类型动态管理多步骤表单。
• 自动管理字段级别的验证。
• 开发者可以方便地自定义字段装饰样式。

环境要求

• Android: SDK 21+
• iOS: 10.0+

使用指南

安装插件

首先，在您的 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  dynamic_multi_step_form: ^1.1.5

然后运行 flutter pub get 来安装插件。

示例代码

以下是一个完整的示例，展示如何使用 dynamic_multi_step_form 创建一个多步骤表单：

主文件 main.dart

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Dynamic Multi Step Form',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: MyForm(),
    );
  }
}

class MyForm extends StatefulWidget {
  @override
  _MyFormState createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {
  final GlobalKey<DynamicFormState> _formKeyNew = GlobalKey<DynamicFormState>();

  String jsonString = '''
  [
    {
      "step": 1,
      "fields": [
        {
          "type": "text",
          "label": "Name",
          "key": "name",
          "validation": {
            "required": true,
            "minLength": 3
          }
        },
        {
          "type": "email",
          "label": "Email",
          "key": "email",
          "validation": {
            "required": true,
            "email": true
          }
        }
      ]
    },
    {
      "step": 2,
      "fields": [
        {
          "type": "password",
          "label": "Password",
          "key": "password",
          "validation": {
            "required": true,
            "minLength": 6
          }
        }
      ]
    }
  ]
  ''';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dynamic Multi Step Form'),
      ),
      body: Column(
        children: [
          Expanded(
            child: DynamicForm(
              jsonString,
              dynamicFormKey: _formKeyNew,
              finalSubmitCallBack: (int currentPage, Map<String, dynamic> data) async {
                // 获取所有输入的信息并跳转到另一个页面显示输入信息
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => SecondScreen(data: data)),
                );
              },
              currentStepCallBack: ({
                int? currentIndex,
                Map<String, dynamic>? formSubmitData,
                Map<String, dynamic>? formInformation,
              }) {
                setState(() {
                  // 更新当前步骤索引
                  currentPageIndex = currentIndex!;
                });
              },
            ),
          ),
          Container(
            color: Colors.white,
            padding: EdgeInsets.symmetric(horizontal: 15).copyWith(bottom: 8),
            child: ElevatedButton(
              style: ElevatedButton.styleFrom(
                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
                backgroundColor: Colors.black,
                maximumSize: Size(MediaQuery.of(context).size.width, 45),
                minimumSize: Size(MediaQuery.of(context).size.width, 45),
              ),
              clipBehavior: Clip.hardEdge,
              onPressed: () async {
                // 验证表单并移动到下一步
                _formKeyNew.currentState!.nextStepCustomClick();
              },
              child: const Text('Next'),
            ),
          )
        ],
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  final Map<String, dynamic> data;

  SecondScreen({required this.data});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Submitted Data'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('Name: ${data['name']}'),
            Text('Email: ${data['email']}'),
            Text('Password: ${data['password']}'),
          ],
        ),
      ),
    );
  }
}

说明

• jsonString: 这是一个JSON字符串，描述了每个步骤及其字段。每个字段都有类型、标签和验证规则。
• DynamicForm: 这是核心组件，负责渲染表单并处理用户交互。
• finalSubmitCallBack: 当用户完成所有步骤并提交表单时调用。
• currentStepCallBack: 在每次提交当前步骤时调用，可以用来更新UI或其他逻辑。

结论

通过使用 dynamic_multi_step_form 插件，您可以轻松创建复杂且动态的多步骤表单。该插件提供了丰富的配置选项，使您能够根据需要自定义表单的行为和外观。希望这个示例能帮助您快速上手并应用到实际项目中。