flutter_multi_select_items

Description:

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.




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) {})
copied to clipboard
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) {})
copied to clipboard
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) {})
copied to clipboard
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) {})
copied to clipboard
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) {})
copied to clipboard
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) {})
copied to clipboard
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) {})
copied to clipboard
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)),
),..........
copied to clipboard
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) {}),
)
copied to clipboard

Controller #
complete example code - flutter multi select controller
final MultiSelectController<String> _controller = MultiSelectController(
deSelectPerpetualSelectedItems: true
);
copied to clipboard

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,
copied to clipboard
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),
)
],
),
);
}
copied to clipboard

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'),
),
copied to clipboard
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);
},
)
copied to clipboard