flutter multi select items

A simple flutter package for creating multi-select widgets.

  • Simple to handle.
  • Highly customizable.

All examples are available in this flutter project


Note - If you get a compiling error, make sure to upgrade flutter to the newest version or try to use a lower version of flutter multi select items.


flutter multi select
check-list

Parameters of multiselect container

ParameterDescription
itemsMultiSelectCard List for the multi select container.
maxSelectableCountMaximum selectable count.
itemsPaddingMultiSelectCard Item padding
isMaxSelectableWithPerpetualSelectsif true -> maxSelectingCount = maxSelectingCount + PerpetualSelected items.
itemsDecorationCommon decorations for all items.
textStylesCommon text styles for all items.
animationsRow alignment settings for inside of Multi Select Item card.
alignmentsAnimation settings like Animations durations and curves.
prefixCommon optional widget to place on the line before in every Multi Select Item.
suffixCommon optional widget to place on the line after in every Multi Select Item.
wrapSettingsDefault all items are in a Wrap. so these are the settings for Wrap.
listViewSettingsList view settings for if showInListView = true.
showInListViewif -> true, Show all multiselect items in a list view.
controllerA Controller for multi select. Allows to get all selected items, de select all, select all
onChangeCall when item is selected.
onMaximumSelectedCall when reached to the maximum selectable count.

Parameters of multiselect MultiSelectCard


ParameterDescription
valueThe value for multi select items. it could be String, int or any type. Also, This will be the value or list of values return onChange
decorationsUnique decorations for each Items. use only if you are willing to add different decorations for each Items. Otherwise, you can use MultiSelectDecorations in MultiSelectContainer
textStylesUnique textStyles for each multi select card. use only if you are willing to add different textStyles for each checklist.
labellabel for multiselect item
childchild for multiselect item, you can use any widget as the child
clipBehaviorclipping Behavior for item
prefixA Unique optional widget for each item to place on the line before
suffixA Unique optional widget for each item to place on the line after
selectedif true - perpetual in the selected position
perpetualSelectedif true - perpetual in the selected position
splashColoritem Splash color
highlightColorItem highlight color
labelGapLabel gap between prefix or suffix

Minimum Setup

flutter multi select minimum-setup

complete example code - flutter multi select minimum setup

MultiSelectContainer(items: [
      MultiSelectCard(value: 'Dart', label: 'Dart'),
      MultiSelectCard(value: 'Python', label: 'Python'),
      MultiSelectCard(value: 'JavaScript', label: 'JavaScript'),
      MultiSelectCard(value: 'Java', label: 'Java'),
      MultiSelectCard(value: 'C#', label: 'C#'),
      MultiSelectCard(value: 'C++', label: 'C++'),
      MultiSelectCard(value: 'Go Lang', label: 'Go Lang'),
      MultiSelectCard(value: 'Swift', label: 'Swift'),
      MultiSelectCard(value: 'PHP', label: 'PHP'),
      MultiSelectCard(value: 'Kotlin', label: 'Kotlin')
    ], onChange: (allSelectedItems, selectedItem) {})

Limited choices

limited-choices

complete example code - flutter multi select limited choices

Maximum selectable count maxSelectableCount: 5

MultiSelectContainer(
        maxSelectableCount: 5,
        items: [
          MultiSelectCard(value: 'Dart', label: 'Dart'),
          MultiSelectCard(value: 'Python', label: 'Python'),
          MultiSelectCard(value: 'JavaScript', label: 'JavaScript'),
          MultiSelectCard(value: 'Java', label: 'Java'),
          MultiSelectCard(value: 'C#', label: 'C#'),
          MultiSelectCard(value: 'C++', label: 'C++'),
          MultiSelectCard(value: 'Go Lang', label: 'Go Lang'),
          MultiSelectCard(value: 'Swift', label: 'Swift'),
          MultiSelectCard(value: 'PHP', label: 'PHP'),
          MultiSelectCard(value: 'Kotlin', label: 'Kotlin')
        ],
        onMaximumSelected: (allSelectedItems, selectedItem) {
          CustomSnackBar.showInSnackBar('The limit has been reached', context);
        },
        onChange: (allSelectedItems, selectedItem) {})

Icons

Flutter multi select icons

complete example code - flutter multi select prefix

Prefix

An optional widget to place on the line before in Multi Select Item.

MultiSelectContainer(
        prefix: MultiSelectPrefix(
            selectedPrefix: const Padding(
              padding: EdgeInsets.only(right: 5),
              child: Icon(
                Icons.check,
                color: Colors.white,
                size: 14,
              ),
            ),
            disabledPrefix: const Padding(
              padding: EdgeInsets.only(right: 5),
              child: Icon(
                Icons.do_disturb_alt_sharp,
                size: 14,
              ),
            )),
        items: [
          MultiSelectCard(value: 'Dart', label: 'Dart'),
          MultiSelectCard(value: 'Python', label: 'Python'),
          MultiSelectCard(
              value: 'JavaScript', label: 'JavaScript'),
          MultiSelectCard(
              value: 'Java', label: 'Java', enabled: false),
          MultiSelectCard(value: 'C#', label: 'C#'),
        ],
        onChange: (allSelectedItems, selectedItem) {})
suffix

complete example code - flutter multi select suffix

An optional widget to place on the line after in Multi Select Item.

 MultiSelectContainer(
        suffix: MultiSelectSuffix(
            selectedSuffix: const Padding(
              padding: EdgeInsets.only(left: 5),
              child: Icon(
                Icons.check,
                color: Colors.white,
                size: 14,
              ),
            ),
            disabledSuffix: const Padding(
              padding: EdgeInsets.only(left: 5),
              child: Icon(
                Icons.do_disturb_alt_sharp,
                size: 14,
              ),
            )),
        items: [
          MultiSelectCard(value: 'Dart', label: 'Dart'),
          MultiSelectCard(value: 'Python', label: 'Python'),
          MultiSelectCard(
              value: 'JavaScript', label: 'JavaScript'),
          MultiSelectCard(
              value: 'Java', label: 'Java', enabled: false),
          MultiSelectCard(value: 'C#', label: 'C#'),
        ],
        onChange: (allSelectedItems, selectedItem) {})

Decorations

Common decorations

common decoration

complete example code - flutter multi select common decorations

Common decorations for all items. itemsDecoration: MultiSelectDecorations

MultiSelectContainer(
        itemsDecoration: MultiSelectDecorations(
          decoration: BoxDecoration(
              gradient: LinearGradient(colors: [
                Colors.green.withOpacity(0.1),
                Colors.yellow.withOpacity(0.1),
              ]),
              border: Border.all(color: Colors.green[200]!),
              borderRadius: BorderRadius.circular(20)),
          selectedDecoration: BoxDecoration(
              gradient: const LinearGradient(colors: [
                Colors.green,
                Colors.lightGreen
              ]),
              border: Border.all(color: Colors.green[700]!),
              borderRadius: BorderRadius.circular(5)),
          disabledDecoration: BoxDecoration(
              color: Colors.grey,
              border: Border.all(color: Colors.grey[500]!),
              borderRadius: BorderRadius.circular(10)),
        ),
        items: [
          MultiSelectCard(value: 'Dart', label: 'Dart'),
          MultiSelectCard(value: 'Python', label: 'Python'),
          MultiSelectCard(
            value: 'JavaScript',
            label: 'JavaScript',
          ),
          MultiSelectCard(value: 'Java', label: 'Java'),
          MultiSelectCard(value: 'C#', label: 'C#'),
          MultiSelectCard(value: 'C++', label: 'C++'),
        ],
        onChange: (allSelectedItems, selectedItem) {})

Unique decorations for each Items

unique decorations multi select

complete example code - flutter multi select decorations

MultiSelectContainer(
        prefix: MultiSelectPrefix(
          selectedPrefix: const Padding(
            padding: EdgeInsets.only(right: 5),
            child: Icon(
              Icons.check,
              color: Colors.white,
              size: 14,
            ),
          ),
        ),
        items: [
          MultiSelectCard(
            value: 'Dart',
            label: 'Dart',
            decorations: MultiSelectItemDecorations(
              decoration: BoxDecoration(
                  color: Colors.purple.withOpacity(0.2),
                  borderRadius: BorderRadius.circular(20)),
              selectedDecoration: BoxDecoration(
                  color: Colors.purple,
                  borderRadius: BorderRadius.circular(5)),
            ),
          ),
          MultiSelectCard(
            value: 'Python',
            label: 'Python',
            decorations: MultiSelectItemDecorations(
              decoration: BoxDecoration(
                  color: Colors.lightBlue.withOpacity(0.2),
                  borderRadius: BorderRadius.circular(20)),
              selectedDecoration: BoxDecoration(
                  color: Colors.lightBlue,
                  borderRadius: BorderRadius.circular(5)),
            ),
          ),
          MultiSelectCard(
            value: 'JavaScript',
            label: 'JavaScript',
            decorations: MultiSelectItemDecorations(
              decoration: BoxDecoration(
                  color: Colors.blue.withOpacity(0.2),
                  borderRadius: BorderRadius.circular(20)),
              selectedDecoration: BoxDecoration(
                  color: Colors.blue,
                  borderRadius: BorderRadius.circular(5)),
            ),
          ),
          MultiSelectCard(
            value: 'Java',
            label: 'Java',
            decorations: MultiSelectItemDecorations(
              decoration: BoxDecoration(
                  color: Colors.green.withOpacity(0.2),
                  borderRadius: BorderRadius.circular(20)),
              selectedDecoration: BoxDecoration(
                  color: Colors.green,
                  borderRadius: BorderRadius.circular(5)),
            ),
          ),
          MultiSelectCard(
            value: 'C#',
            label: 'C#',
            decorations: MultiSelectItemDecorations(
              decoration: BoxDecoration(
                  color: Colors.amber.withOpacity(0.2),
                  borderRadius: BorderRadius.circular(20)),
              selectedDecoration: BoxDecoration(
                  color: Colors.amber,
                  borderRadius: BorderRadius.circular(5)),
            ),
          ),
          MultiSelectCard(
            value: 'C++',
            label: 'C++',
            decorations: MultiSelectItemDecorations(
              decoration: BoxDecoration(
                  color: Colors.orange.withOpacity(0.2),
                  borderRadius: BorderRadius.circular(20)),
              selectedDecoration: BoxDecoration(
                  color: Colors.orange,
                  borderRadius: BorderRadius.circular(5)),
            ),
          ),
          MultiSelectCard(
            value: 'Kotlin',
            label: 'Kotlin',
            decorations: MultiSelectItemDecorations(
              decoration: BoxDecoration(
                  color: Colors.red.withOpacity(0.2),
                  borderRadius: BorderRadius.circular(20)),
              selectedDecoration: BoxDecoration(
                  color: Colors.red,
                  borderRadius: BorderRadius.circular(5)),
            ),
          ),
        ],
        onChange: (allSelectedItems, selectedItem) {})

Text Styles

flutter multi select text styles

Common Text Styles

complete example code - flutter multi select Text Style

MultiSelectContainer(
        textStyles: const MultiSelectTextStyles(
            textStyle: TextStyle(
                fontWeight: FontWeight.bold,
                color: Colors.lightBlue)),
        items: [
          MultiSelectCard(value: 'Dart', label: 'Dart'),
          MultiSelectCard(value: 'Python', label: 'Python'),
          MultiSelectCard(
              value: 'JavaScript', label: 'JavaScript'),
          MultiSelectCard(value: 'Java', label: 'Java'),
          MultiSelectCard(value: 'Go Lang', label: 'Go Lang'),
          MultiSelectCard(value: 'Swift', label: 'Swift'),
          MultiSelectCard(value: 'Kotlin', label: 'Kotlin')
        ],
        onChange: (allSelectedItems, selectedItem) {})

Unique Text Style for each items

complete example code - flutter multi select Text Style

MultiSelectContainer(items: [
      MultiSelectCard(
        value: 'Dart',
        label: 'Dart',
        textStyles: const MultiSelectItemTextStyles(
            textStyle: TextStyle(
                fontWeight: FontWeight.bold, color: Colors.purple)),
      ),
      MultiSelectCard(
        value: 'Python',
        label: 'Python',
        textStyles: const MultiSelectItemTextStyles(
            textStyle: TextStyle(color: Colors.lightBlue)),
      ),..........

Horizontal chip list

complete example code - flutter multi select controller

flutter multi select
SizedBox(
  height: 60,
  child: MultiSelectContainer(
      showInListView: true,
      listViewSettings: ListViewSettings(
          scrollDirection: Axis.horizontal,
          separatorBuilder: (_, __) => const SizedBox(
                width: 10,
              )),
      items: [
        MultiSelectCard(value: 'Dart', label: 'Dart'),
        MultiSelectCard(value: 'Python', label: 'Python'),
        MultiSelectCard(value: 'JavaScript', label: 'JavaScript'),
        MultiSelectCard(value: 'Java', label: 'Java'),
        MultiSelectCard(value: 'C#', label: 'C#'),
        MultiSelectCard(value: 'C++', label: 'C++'),
        MultiSelectCard(value: 'Go Lang', label: 'Go Lang'),
        MultiSelectCard(value: 'Swift', label: 'Swift'),
        MultiSelectCard(value: 'PHP', label: 'PHP'),
        MultiSelectCard(value: 'Kotlin', label: 'Kotlin')
      ],
      onChange: (allSelectedItems, selectedItem) {}),
)

Controller

complete example code - flutter multi select controller

 final MultiSelectController<String> _controller = MultiSelectController(
    deSelectPerpetualSelectedItems: true
  );

deSelectPerpetualSelectedItems: true Default false. if true -> deselect all selected items with Perpetual selected items

Select all items - _controller.selectAll() Deselect all selected items - _controller.deselectAll() Get all selected items - _controller.getSelectedItems()


MultiSelectContainer(
            controller: _controller,

Any widget

flutter multi select

complete example code - flutter multi select any widget

Widget getChild(String imagePath, String title) {
    return SizedBox(
      width: 75,
      height: 50,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Expanded(
              child: Image.network(
            imagePath,
            fit: BoxFit.contain,
          )),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(title),
          )
        ],
      ),
    );
  }

return MultiSelectContainer(
      itemsPadding: const EdgeInsets.all(5),
      itemsDecoration: MultiSelectDecorations(
        decoration: BoxDecoration(
          color: Colors.indigo.withOpacity(0.1)
        ),
        selectedDecoration: const BoxDecoration(
          gradient: LinearGradient(colors: [
             Colors.green,
             Colors.lightGreen
          ]),  
          
        ),
      ),
      items: [
      MultiSelectCard(
        value: 'Dart',
        child: getChild(
            'https://host/Dart-logo.png',
            'Dart'),
      ),

Multi select check list view

multi select check list

complete example code - flutter multi select check list

complete example code 2 - flutter multi select colorful check list

       MultiSelectCheckList(
                maxSelectableCount: 5,
                textStyles: const MultiSelectTextStyles(
                    selectedTextStyle: TextStyle(
                        color: Colors.white, fontWeight: FontWeight.bold)),
                itemsDecoration: MultiSelectDecorations(
                    selectedDecoration:
                        BoxDecoration(color: Colors.indigo.withOpacity(0.8))),
                listViewSettings: ListViewSettings(
                    separatorBuilder: (context, index) => const Divider(
                          height: 0,
                        )),
                controller: _controller,
                items: List.generate(
                    _items.length,
                    (index) => CheckListCard(
                        value: _items[index].id,
                        title: Text(_items[index].title),
                        subtitle: Text(_items[index].subTitle),
                        selectedColor: Colors.white,
                        checkColor: Colors.indigo,
                        selected: index == 3,
                        enabled: !(index == 5),
                        checkBoxBorderSide:
                            const BorderSide(color: Colors.blue),
                        shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(5)))),
                onChange: (allSelectedItems, selectedItem) {
                },
                onMaximumSelected: (allSelectedItems, selectedItem) {
                  CustomSnackBar.showInSnackBar('The limit has been reached', context);
                },
              )

Libraries

flutter_multi_select_items