Flutter表单构建插件devaloop_form_builder的使用

在本教程中，我们将介绍如何使用devaloop_form_builder插件来创建一个复杂的表单。该插件提供了多种输入字段，如文本输入、日期时间选择器、数字输入、选项选择器等，并支持多级嵌套表单。

使用

首先，确保你已经在项目中添加了devaloop_form_builder依赖项。你可以在pubspec.yaml文件中添加以下内容：

dependencies:
  devaloop_form_builder: ^版本号

接下来，我们来看一个完整的示例代码，展示如何使用该插件构建表单。

示例代码

import 'package:flutter/material.dart';
import 'package:devaloop_form_builder/form_builder.dart';
import 'package:devaloop_form_builder/input_field_date_time.dart';
import 'package:devaloop_form_builder/input_field_number.dart';
import 'package:devaloop_form_builder/input_field_option.dart';
import 'package:devaloop_form_builder/input_field_text.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late Future<OptionData> _futureTrainingProgramOptionData;
  late Future<OptionData> _genderFamilyMembers;

  [@override](/user/override)
  void initState() {
    super.initState();
    _futureTrainingProgramOptionData = Future<OptionData>(
      () {
        List<OptionItem> data = [];
        return OptionData(
            displayedListOfOptions: data, totalOption: data.length);
      },
    );

    _genderFamilyMembers = Future<OptionData>(
      () async {
        var data = [
          const OptionItem(hiddenValue: ['Male'], value: ['Male']),
          const OptionItem(hiddenValue: ['Female'], value: ['Female']),
        ];
        return OptionData(
            displayedListOfOptions: data, totalOption: data.length);
      },
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Member',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue.shade900),
        useMaterial3: true,
      ),
      home: Scaffold(
        body: SingleChildScrollView(
          padding: const EdgeInsets.all(15),
          child: FormBuilder(
            formName: 'Member',
            inputFields: const [
              InputText(
                name: 'name',
                label: 'Name',
              ),
              InputForm(
                name: 'detailProduct',
                label: 'Detail Product',
                inputFields: [
                  InputNumber(
                    name: 'quantity',
                    label: 'Quantity',
                  ),
                  InputText(
                    name: 'unit',
                    label: 'Unit',
                  ),
                  InputNumber(
                    name: 'purchasePrice',
                    label: 'Purchase Price',
                  ),
                  InputNumber(
                    name: 'sellingPrice',
                    label: 'Selling Price',
                  ),
                  InputNumber(
                    name: 'tax',
                    label: 'Tax',
                  ),
                ],
              ),
              InputForm(
                name: 'unitConversion',
                label: 'Unit Conversion',
                isMultiInputForm: true,
                isOptional: true,
                inputFields: [
                  InputNumber(
                    name: 'quantity',
                    label: 'Quantity',
                  ),
                  InputText(
                    name: 'unit',
                    label: 'Unit',
                  ),
                ],
              ),
              InputForm(
                name: 'priceConversion',
                label: 'Price Conversion',
                isMultiInputForm: true,
                isOptional: true,
                inputFields: [
                  InputText(
                    name: 'unit',
                    label: 'Unit',
                    isEditable: false,
                  ),
                  InputNumber(
                    name: 'purchasePricePerUnit',
                    label: 'Purchase Price Per Unit',
                  ),
                  InputNumber(
                    name: 'sellingPricePerUnit',
                    label: 'Selling Price Per Unit',
                  ),
                  InputNumber(
                    name: 'taxPerUnit',
                    label: 'Tax Per Unit',
                  ),
                ],
              ),
            ],
            onInitial: (context, inputValues) async {
              inputValues['name']!.setString('A');
              inputValues['detailProduct']!.setFormValues([
                {
                  'unit': 'Karton',
                  'quantity': 1,
                  'purchasePrice': 100000,
                  'sellingPrice': 200000,
                  'tax': 20000,
                },
              ]);
              await Future.delayed(const Duration(seconds: 2));
              List<Map<String, dynamic>> unitConversion = [];
              List<Map<String, dynamic>> priceConversion = [];
              unitConversion.add({
                'quantity': 1,
                'unit': 'Karton',
              });
              priceConversion.add({
                'unit': 'Karton',
                'purchasePricePerUnit': 100000,
                'sellingPricePerUnit': 200000,
                'taxPerUnit': 200000,
              });
              inputValues['unitConversion']!.setFormValues(unitConversion);
              inputValues['priceConversion']!.setFormValues(priceConversion);
            },
            onBeforeValidation: (context, inputValues) {
              inputValues['name']!
                  .setString(inputValues['name']!.getString()?.toUpperCase());
            },
            onAfterValidation: (context, inputValues, isValid, errorMessages) {
              if (inputValues['rate']!.getNumber() != null &&
                  inputValues['rateInfo']!.getString() == null) {
                errorMessages['rateInfo'] =
                    'Must be filled because rate is filled';
              }
            },
            onSubmit: (context, inputValues) {
              var result =
                  inputValues['familyMembers']!.getFormValues().first['name']!;
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text('Processing Data $result')),
              );
            },
            submitButtonSettings: const SubmitButtonSettings(
              label: 'Add Member',
              icon: Icon(Icons.add),
            ),
            additionalButtons: [
              AdditionalButton(
                onTap: (context, inputValues) async {
                  await Future.delayed(const Duration(seconds: 2));
                  inputValues['name']!.setString(null);
                },
                label: 'Reset',
                icon: const Icon(Icons.undo),
              ),
              AdditionalButton(
                onTap: (context, inputValues) async {
                  await Future.delayed(const Duration(seconds: 2));
                },
                label: 'Cancel',
                icon: const Icon(Icons.cancel),
              ),
              AdditionalButton(
                onTap: (context, inputValues) async {
                  await Future.delayed(const Duration(seconds: 2));
                },
                label: 'Back',
                icon: const Icon(Icons.arrow_back),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter表单构建插件devaloop_form_builder的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

yuanlaile 1楼

更多关于Flutter表单构建插件devaloop_form_builder的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是一个使用 devaloop_form_builder 插件来构建 Flutter 表单的示例代码。这个插件可以极大地简化表单的构建和管理过程。请注意，在使用这个插件之前，你需要在 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  devaloop_form_builder: ^最新版本号  # 请替换为实际的最新版本号

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

下面是一个完整的示例代码，展示了如何使用 devaloop_form_builder 来构建一个简单的表单：

import 'package:flutter/material.dart';
import 'package:devaloop_form_builder/devaloop_form_builder.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<FormBuilderState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Form Builder Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: FormBuilder(
          key: _formKey,
          child: Column(
            children: <Widget>[
              FormBuilderTextField(
                name: 'name',
                decoration: InputDecoration(labelText: 'Name'),
                validators: [
                  FormBuilderValidators.required(errorText: 'Name is required'),
                ],
              ),
              FormBuilderDropdown(
                name: 'gender',
                decoration: InputDecoration(labelText: 'Gender'),
                options: ['Male', 'Female', 'Other']
                    .map<DropdownMenuItem<String>>((String value) {
                  return DropdownMenuItem<String>(
                    value: value,
                    child: Text(value),
                  );
                }).toList(),
                validators: [
                  FormBuilderValidators.required(errorText: 'Gender is required'),
                ],
              ),
              FormBuilderCheckboxList(
                name: 'hobbies',
                decoration: InputDecoration(labelText: 'Hobbies'),
                options: ['Reading', 'Swimming', 'Cycling']
                    .map<FormBuilderFieldOption>((String value) {
                  return FormBuilderFieldOption(value: value);
                }).toList(),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () async {
                  if (_formKey.currentState!.validate()) {
                    _formKey.currentState!.save();
                    final formData = _formKey.currentState!.value;
                    print(formData);
                    // 在这里处理表单数据，例如发送到服务器
                  }
                },
                child: Text('Submit'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

代码解释

依赖导入：首先，在 pubspec.yaml 中添加 devaloop_form_builder 依赖。
主应用：创建一个基本的 Flutter 应用，包含 MyApp 和 MyHomePage。
表单构建：
- 使用 FormBuilder 包装表单字段。
- FormBuilderTextField 用于文本输入，并添加了一个必填验证器。
- FormBuilderDropdown 用于下拉选择，同样添加了必填验证器。
- FormBuilderCheckboxList 用于多选复选框。
- 使用 ElevatedButton 作为提交按钮，并在点击时验证表单数据。
表单验证与提交：点击提交按钮时，调用 _formKey.currentState!.validate() 方法验证表单，如果验证通过，则调用 _formKey.currentState!.save() 方法保存表单数据，然后可以处理这些数据，例如发送到服务器。

请确保你使用的是最新版本的 devaloop_form_builder 插件，并根据需要进行调整。