Flutter表单字段插件flutter_form_fields的使用

此README描述了该软件包。如果您将此软件包发布到pub.dev，则此README的内容将出现在您的软件包首页。

有关编写良好软件包README的指南，请参阅撰写软件包页面。

有关开发软件包的一般信息，请参阅Dart指南创建软件包和Flutter指南开发软件包和插件。

功能

该软件包包含一些可以在表单中使用的自定义小部件。它们具有验证功能，可以帮助开发者在输入不符合条件时显示错误文本。默认情况下，Flutter SDK在某些输入字段上不提供验证功能。

开始使用

在pubspec.yaml文件的依赖项下添加flutter_form_fields。

示例

使用方法

final ProfileImageFormFieldController profileImageController = ProfileImageFormFieldController();
final RadioFormFieldController ratingController<int> = RadioFormFieldController();
final CheckBoxFormFieldController mostLikedWidgetsController<Type> = CheckBoxFormFieldController();

ProfileImageFormField(
  controller: profileImageController,
  validator: (imageFile) {
    /// 验证条件
  }
),

RadioFormField<int>(
  titleText: "您会如何评价我们为这个包打分？",
  controller: ratingController,
  validator: (val) {
    if (ratingController.value == null) {
      return "请给我们评分";
    }
    return null;
  },
  items: [
    RadioFormFieldItem(hintText: '5 星', value: 5),
    RadioFormFieldItem(hintText: '4 星', value: 4),
    RadioFormFieldItem(hintText: '3 星', value: 3),
    RadioFormFieldItem(hintText: '2 星', value: 3),
    RadioFormFieldItem(hintText: '1 星', value: 1),
  ]
),

CheckBoxFormField<Type>(
  titleText: "请选择您最喜欢的两个小部件？",
  items: [
    CheckBoxFormFieldItem(
      hintText: 'ProfileImageFormField 小部件',
      value: ProfileImageFormField
    ),
    CheckBoxFormFieldItem(
      hintText: 'RadioFormField 小部件',
      value: RadioFormField
    ),
    CheckBoxFormFieldItem(
      hintText: 'CheckBoxFormField 小部件',
      value: CheckBoxFormField
    ),
  ],
  controller: mostLikedWidgetsController,
  validator: (values) {
    return values?.isNotEmpty ?? false
        ? null
        : "请选择一个小部件";
  },
),

完整示例代码

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

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

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData.light().copyWith(useMaterial3: true),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("反馈表单"),
        ),
        body: const FormWidget(),
      ),
    );
  }
}

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

  [@override](/user/override)
  State<FormWidget> createState() => _FormWidgetState();
}

class _FormWidgetState extends State<FormWidget> {
  late final GlobalKey<FormState> formKey;
  late final RadioFormFieldController<bool> understoodController;
  late final RadioFormFieldController<int> ratingController;
  late final RadioFormFieldController<bool> willRecommendController;
  late final ProfileImageFormFieldController profileImageController;
  late final CheckBoxFormFieldController<Type> mostLikedWidgetsController;

  [@override](/user/override)
  void initState() {
    formKey = GlobalKey<FormState>();
    understoodController = RadioFormFieldController();
    ratingController = RadioFormFieldController();
    willRecommendController = RadioFormFieldController();
    profileImageController = ProfileImageFormFieldController();
    mostLikedWidgetsController = CheckBoxFormFieldController();
    super.initState();
  }

  [@override](/user/override)
  void dispose() {
    formKey.currentState?.dispose();
    understoodController.dispose();
    ratingController.dispose();
    willRecommendController.dispose();
    profileImageController.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Form(
      key: formKey,
      child: ListView(
        padding: const EdgeInsets.all(20),
        children: [
          /// 如果errorText和validator都为空，则会显示默认的错误文本。
          ProfileImageFormField(
            controller: profileImageController,
          ),

          /// 如果validator不为空，该小部件将显示由validator返回的字符串，而不是errorText或默认的错误文本。
          RadioFormField<bool>(
            titleText: "我希望您通过这个示例应用程序理解如何使用此包。您能确认吗？",
            controller: understoodController,
            items: [
              RadioFormFieldItem(hintText: '是', value: true),
              RadioFormFieldItem(hintText: '否', value: false)
            ],
            direction: Axis.vertical,
            validator: (val) {
              if (understoodController.value == null) {
                return "请选择至少一个选项";
              }
              return null;
            },
          ),
          RadioFormField<int>(
            titleText: "您会如何评价我们为这个包打分？",
            controller: ratingController,
            validator: (val) {
              if (ratingController.value == null) {
                return "请给我们评分";
              }
              return null;
            },
            items: [
              RadioFormFieldItem(hintText: '5 星', value: 5),
              RadioFormFieldItem(hintText: '4 星', value: 4),
              RadioFormFieldItem(hintText: '3 星', value: 3),
              RadioFormFieldItem(hintText: '2 星', value: 3),
              RadioFormFieldItem(hintText: '1 星', value: 1),
            ]
          ),

          /// 如果validator为空且errorText不为空，则该小部件将显示errorText参数给出的错误文本。
          RadioFormField<bool>(
            titleText: "您会推荐这个包给您的开发朋友吗？",
            controller: willRecommendController,
            errorText: "我们想知道。请！",
            items: [
              RadioFormFieldItem(hintText: '是', value: true),
              RadioFormFieldItem(hintText: '否', value: false)
            ]
          ),
          CheckBoxFormField<Type>(
            titleText: "请选择您最喜欢的两个小部件？",
            items: [
              CheckBoxFormFieldItem(
                hintText: 'ProfileImageFormField 小部件',
                value: ProfileImageFormField
              ),
              CheckBoxFormFieldItem(
                hintText: 'RadioFormField 小部件',
                value: RadioFormField
              ),
              CheckBoxFormFieldItem(
                hintText: 'CheckBoxFormField 小部件',
                value: CheckBoxFormField
              ),
            ],
            controller: mostLikedWidgetsController,
            validator: (values) {
              return values?.isNotEmpty ?? false
                  ? null
                  : "请选择一个小部件";
            },
          ),

          ElevatedButton(
            onPressed: () {
              if (formKey.currentState!.validate()) {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(
                    content: Text("反馈表单提交成功"),
                    backgroundColor: Colors.green,
                  ),
                );
              } else {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(
                    content: Text("表单无效"),
                    backgroundColor: Colors.red,
                  ),
                );
              }
            },
            child: const Text("提交"),
          )
        ],
      ),
    );
  }
}