flutter_multi_select_items 0.4.2

A Flutter package for creating customizable flutter multi select widgets.

---

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.

---

---

Parameters of multiselect container

Parameter	Description
items	[MultiSelectCard] List for the multi select container.
maxSelectableCount	Maximum selectable count.
itemsPadding	MultiSelectCard Item padding
isMaxSelectableWithPerpetualSelects	if true -> maxSelectingCount = maxSelectingCount + PerpetualSelected items.
itemsDecoration	Common decorations for all items.
textStyles	Common text styles for all items.
animations	[Row] alignment settings for inside of Multi Select Item card.
alignments	Animation settings like Animations durations and curves.
prefix	Common optional widget to place on the line before in every Multi Select Item.
suffix	Common optional widget to place on the line after in every Multi Select Item.
wrapSettings	Default all items are in a [Wrap]. so these are the settings for [Wrap].
listViewSettings	List view settings for if [showInListView] = true.
showInListView	if -> true, Show all multiselect items in a list view.
controller	A Controller for multi select. Allows to get all selected items, de select all, select all
onChange	Call when item is selected.
onMaximumSelected	Call when reached to the maximum selectable count.

---

Parameters of multiselect MultiSelectCard

---

Parameter	Description
value	The 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
decorations	Unique decorations for each Items. use only if you are willing to add different decorations for each Items. Otherwise, you can use MultiSelectDecorations in MultiSelectContainer
textStyles	Unique textStyles for each multi select card. use only if you are willing to add different textStyles for each checklist.
label	label for multiselect item
child	child for multiselect item, you can use any widget as the child
clipBehavior	clipping Behavior for item
prefix	A Unique optional widget for each item to place on the line before
suffix	A Unique optional widget for each item to place on the line after
selected	if true - perpetual in the selected position
perpetualSelected	if true - perpetual in the selected position
splashColor	item Splash color
highlightColor	Item highlight color
labelGap	Label gap between [prefix] or [suffix]

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

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

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

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

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

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

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

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

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