flutter_multi_select_form_field 0.0.1

A Flutter multi select form field.

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

Features

With MultiSelectFormField you can able to achieve multi select form field with existing flutter Form widget.

with MultiSelectFormField you can customize options and chips.

Getting started

    import 'package:multi_select/multi_select.dart';

Usage

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

  @override
  State<SampleMultiSelect> createState() => _SampleMultiSelectState();
}

class _SampleMultiSelectState extends State<SampleMultiSelect> {
  final options = const <Option>[
    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
  void initState() {
    controller = MultiSelectController();
    super.initState();
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @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);
              });
        });
  }
}