Flutter多选表单字段插件flutter_multi_select_form_field的使用

A Widget for Multi Select Form Field with able customize most of the UI.

特性

通过MultiSelectFormField，你可以使用现有的Flutter Form小部件实现多选表单字段。

使用MultiSelectFormField，你可以自定义选项和芯片。

开始使用

首先，在你的Dart文件中引入该包：

import 'package:multi_select/multi_select.dart';

使用示例

以下是一个完整的示例代码，展示了如何在Flutter应用中使用flutter_multi_select_form_field插件来创建一个多选表单字段。

class SampleMultiSelect extends StatefulWidget {
  const SampleMultiSelect({Key? key}) : super(key: key);

  [@override](/user/override)
  State<SampleMultiSelect> createState() => _SampleMultiSelectState();
}

class _SampleMultiSelectState extends State<SampleMultiSelect> {
  // 定义选项列表
  final options = const [
    Option<Color>(label: "Red", value: "Red", extra: Colors.red),
    Option<Color>(label: "Blue", value: "Blue", extra: Colors.blue),
    Option<Color>(label: "green", value: "Green", extra: Colors.green),
    Option<Color>(label: "Orange", value: "Orange", extra: Colors.orange),
  ];

  // 控制器用于管理选择状态
  late MultiSelectController controller;

  // 表单的全局键
  final formKey = GlobalKey<FormState>();

  [@override](/user/override)
  void initState() {
    // 初始化控制器
    controller = MultiSelectController();
    super.initState();
  }

  [@override](/user/override)
  void dispose() {
    // 释放控制器资源
    controller.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Multi Select"),
        actions: [],
      ),
      floatingActionButton: FloatingActionButton(
        child: Text("+"),
        onPressed: () {
          if (formKey.currentState?.validate() ?? false) {
            print("Validated");
          }
        },
      ),
      body: Form(
        key: formKey,
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            children: [
              // 显示已选择的选项
              ChipsBuilder(
                controller: controller,
                builder: (options) {
                  return Wrap(
                    children: options
                        .map((e) => Chip(
                              label: Text(e.label),
                              backgroundColor: e.extra,
                            ))
                        .toList(),
                  );
                },
              ),
              SizedBox(
                height: 80,
              ),
              // 多选表单字段
              MultiSelectFormField(
                controller: controller,
                options: options,
                validator: (val) {
                  if (val?.isEmpty ?? true) {
                    return "Options is required";
                  }
                  return null;
                },
                chipBuilder: (option, index) {
                  return Chip(
                    label: Text(option.label),
                    backgroundColor: option.extra,
                  );
                },
                onShowOptions: () {
                  // 当用户点击多选表单字段时，显示选项列表
                  showModalBottomSheet(
                    context: context,
                    builder: (_) {
                      return _showOptions();
                    },
                  );
                },
              ),
            ],
          ),
        ),
      ),
    );
  }

  // 显示选项列表的底部弹出框
  Widget _showOptions() {
    return OptionsBuilder(
      controller: controller,
      builder: (option, index, isChoosed) {
        return CheckboxListTile(
          value: isChoosed,
          title: Text(option.label),
          onChanged: (value) {
            // 更新选择状态
            controller.onChange(option);
          },
        );
      },
    );
  }
}