multi_select_flutter 1.0.2
multi_select_flutter: ^1.0.2 copied to clipboard

A flexible multi-select package for Flutter.

Multi Select Flutter #

Multi Select Flutter is a package for easily creating multi-select widgets in a variety of ways.

drawing           drawing

Usage #

MultiSelectListDialog / MultiSelectChipDialog

These widgets can be used in the builder of showDialog().

  void _showMultiSelectDialog(BuildContext context) async {
    _selectedItems = await showDialog(
      context: context,
      builder: (ctx) {
        return MultiSelectListDialog<int>(
          items: _Items.map((item) => 
            MultiSelectItem(item, item.name)).toList(),
          title: "Dialog Title",
          initialSelectedItems: _selectedItems,
        );
      },
    );
  }

MultiSelectChipDisplay

This widget can be used by itself, alongside one of the dialogs, or it can be specified as a parameter of MultiSelectField / MultiSelectFormField.

To use this widget effectively, make sure to set the state when the list of items is changed.

You can also remove items from the source list in the onTap function.


MultiSelectChipDisplay(
  items: _selectedItems.map((item) => 
    MultiSelectItem(item, item.name)).toList(),
  onTap: (item) {
    setState(() {
      _selectedItems.remove(item);
    });
  },
),

MultiSelectField

MultiSelectField provides a button which opens the dialog. To save the values from the dialog using this widget, an onConfirm(values) function is provided.

MultiSelectField(
  title: "Animals",
  buttonText: "Favorite Animals"
  items: dialogItems,
  dialogType: MultiSelectDialogType.CHIP,
  decoration: BoxDecoration(
    color: Theme.of(context).primaryColor.withOpacity(.4),
    border: Border.all(
      color: Theme.of(context).primaryColor,
    ),
  ),
  textStyle: TextStyle(fontSize: 20),
  onConfirm: (results) {
    setState(() {
      _selectedAnimals = results;
    });
  },
),

MultiSelectFormField

MultiSelectFormField is the FormField version of MultiSelectField. You can put it into a form and make use of FormField methods such as validate() and onSave().

It also comes with a default bottom-border that can be overriden with the decoration parameter.

Form(
  key: _formKey,
  child: MultiSelectFormField(
    buttonIcon: Icon(Icons.arrow_forward_ios),
    validator: (value) {
      if (value == null || value.isEmpty) {
        return "Required";
      }
      return null;
    },
    onSaved: (value) {
      _selectedAnimals = value;
    },
    title: "Animals",
    items: items,
    dialogType: MultiSelectDialogType.CHIP,
    onConfirm: (values) {
      _formKey.currentState.validate();
    },
    chipDisplay: MultiSelectChipDisplay(
      items: _selectedAnimalItems,
    ),
  ),
),

Contributing #

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

252
likes
90
pub points
97%
popularity

A flexible multi-select package for Flutter.

Repository (GitHub)
View/report issues

Documentation

API reference

License

BSD-2-Clause (LICENSE)

Dependencies

flutter

More

Packages that depend on multi_select_flutter