flutter_multiselect

Flutter package for multi-select UI widget

pub package

Android and iOS screenshot- screenshot

Getting Started

  • Add the package into pubspec.yaml
dependencies:
  flutter_multiselect:
  • Import in your code
import 'package:flutter_multiselect/flutter_multiselect.dart';

Why? :wrench:

By default, there is no UI control for multi-select in iOS and Android, and my widget can be used to bridge this gap.

Example without customization :one:

child: MultiSelect(
  autovalidate: false,
  titleText: "Countries",
  validator: (value) {
    if (value == null) {
      return 'Please select one or more option(s)';
    }
  },
  errorText: 'Please select one or more option(s)',
  dataSource: [
    {
      "display": "Australia",
      "value": 1,
    },
    {
      "display": "Canada",
      "value": 2,
    },
    {
      "display": "India",
      "value": 3,
    },
    {
      "display": "United States",
      "value": 4,
    }
  ],
  textField: 'display',
  valueField: 'value',
  filterable: true,
  required: true,
  value: null,
  onSaved: (value) {
    print('The saved values are $value');
  }
),

Example with customization :two:

Check the colors and text to see the changes that it makes to the modal interface

child: MultiSelect(
    //--------customization selection modal-----------
    buttonBarColor: Colors.red,
    cancelButtonText: "Exit",
    titleText: "Custom Title",
    checkBoxColor: Colors.black,
    selectedOptionsInfoText: "Selected custom text (tap to remove)",
    selectedOptionsBoxColor: Colors.green,
    autovalidate: true,
    maxLength: 5, // optional
    //--------end customization selection modal------------
    validator: (dynamic value) {
      if (value == null) {
        return 'Please select one or more option(s)';
      }
      return null;
    },
    errorText: 'Please select one or more option(s)',
    dataSource: [
      {"name": "Afghanistan", "code": "AF"},
      {"name": "Ă…land Islands", "code": "AX"},
      {"name": "Albania", "code": "AL"},
    ],
    textField: 'name',
    valueField: 'code',
    filterable: true,
    required: true,
    onSaved: (value) {
      print('The saved values are $value');
    }),
    change: (value) {
      print('The selected values are $value');
    })

and of course you can check the full list of the parameters to personalize your modal!

Here, the complete list of parameters to modify the selection modal :clipboard:

TypeParameter
ColorbuttonBarColor
StringcancelButtonText
IconDatacancelButtonIcon
ColorcancelButtonColor
ColorcancelButtonTextColor
StringsaveButtonText
IconDatasaveButtonIcon
ColorsaveButtonColor
ColorsaveButtonTextColor
StringclearButtonText
IconDataclearButtonIcon
ColorclearButtonColor
ColorclearButtonTextColor
StringdeleteButtonTooltipText
IconDatadeleteIcon
ColordeleteIconColor
ColorselectedOptionsBoxColor
StringselectedOptionsInfoText
ColorselectedOptionsInfoTextColor
IconDatacheckedIcon
IconDatauncheckedIcon
ColorcheckBoxColor
ColorsearchBoxColor
StringsearchBoxHintText
ColorsearchBoxFillColor
IconDatasearchBoxIcon
StringsearchBoxToolTipText
SizeresponsiveDialogSize

Libraries

flutter_multiselect
selection_modal