GitLocker: The Coding Marketplace

Description:

flutter multiselect

flutter_multiselect #
Flutter package for multi-select UI widget

Android and iOS screenshot-

Getting Started #

Add the package into pubspec.yaml

dependencies:
flutter_multiselect:
copied to clipboard

Import in your code

import 'package:flutter_multiselect/flutter_multiselect.dart';
copied to clipboard
Why? 🔧 #
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 1️⃣ #
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');
}
),
copied to clipboard

Example with customization 2️⃣ #
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');
})

copied to clipboard
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 📋 #

Type
Parameter

Color
buttonBarColor

String
cancelButtonText

IconData
cancelButtonIcon

Color
cancelButtonColor

Color
cancelButtonTextColor

String
saveButtonText

IconData
saveButtonIcon

Color
saveButtonColor

Color
saveButtonTextColor

String
clearButtonText

IconData
clearButtonIcon

Color
clearButtonColor

Color
clearButtonTextColor

String
deleteButtonTooltipText

IconData
deleteIcon

Color
deleteIconColor

Color
selectedOptionsBoxColor

String
selectedOptionsInfoText

Color
selectedOptionsInfoTextColor

IconData
checkedIcon

IconData
uncheckedIcon

Color
checkBoxColor

Color
searchBoxColor

String
searchBoxHintText

Color
searchBoxFillColor

IconData
searchBoxIcon

String
searchBoxToolTipText

Size
responsiveDialogSize