custom_searchable_dropdown

Description:

custom searchable dropdown

custom_searchable_dropdown #
Widget allows user to search from a dynamic list of data you can customise the dropdown according to your need,it can also be customised as multiple select or single select. The on change event reurn the complete list from index which option is selected.
Platforms #
This widget has been successfully tested on iOS, Android and Chrome.
Examples #
The Example will help you to know how it works.
Gallery #
See code below.



Example name
Image




Menu Mode



All DropDown



MultiSelect DropDown




Code #
Plugin usage
Add to your pubspec.yaml in the dependencies section:
custom_searchable_dropdown:
copied to clipboard
Get packages with command:
flutter packages get
copied to clipboard
Import:
import 'package:custom_searchable_dropdown/custom_searchable_dropdown.dart';
copied to clipboard
Menu Mode
CustomSearchableDropDown(
dropdownHintText: 'Search For Name Here... ',
showLabelInMenu: true,
primaryColor: Colors.red,
menuMode: true,
labelStyle: TextStyle(
color: Colors.red,
fontWeight: FontWeight.bold
),
items: listToSearch,
label: 'Select Name',
prefixIcon: Padding(
padding: const EdgeInsets.all(0.0),
child: Icon(Icons.search),
),
dropDownMenuItems: listToSearch?.map((item) {
return item['name'];
})?.toList() ??
[],
onChanged: (value){
if(value!=null)
{
selected = value['class'].toString();
}
else{
selected=null;
}
},
),
copied to clipboard
Single Select
CustomSearchableDropDown(
items: listToSearch,
label: 'Select Name',
decoration: BoxDecoration(
border: Border.all(
color: Colors.blue
)
),
prefixIcon: Padding(
padding: const EdgeInsets.all(0.0),
child: Icon(Icons.search),
),
dropDownMenuItems: listToSearch?.map((item) {
return item['name'];
})?.toList() ??
[],
onChanged: (value){
if(value!=null)
{
selected = value['class'].toString();
}
else{
selected=null;
}
},
),
copied to clipboard
Multi Select
CustomSearchableDropDown(
items: listToSearch,
label: 'Select Name',
multiSelectTag: 'Names',
decoration: BoxDecoration(
border: Border.all(
color: Colors.blue
)
),
multiSelect: true,
prefixIcon: Padding(
padding: const EdgeInsets.all(0.0),
child: Icon(Icons.search),
),
dropDownMenuItems: listToSearch?.map((item) {
return item['name'];
})?.toList() ??
[],
onChanged: (value){
if(value!=null)
{
selectedList = jsonDecode(value);
}
else{
selectedList.clear();
}
},
),
copied to clipboard
Multi Select as Widget
CustomSearchableDropDown(
initialValue: [
{
'parameter': 'name',
'value': 'Amir',
},
{
'parameter': 'name',
'value': 'Tazeem',
},
],
items: listToSearch,
label: 'Select Name',
multiSelectTag: 'Names',
multiSelectValuesAsWidget: true,
decoration: BoxDecoration(
border: Border.all(
color: Colors.blue
)
),
multiSelect: true,
prefixIcon: Padding(
padding: const EdgeInsets.all(0.0),
child: Icon(Icons.search),
),
dropDownMenuItems: listToSearch?.map((item) {
return item['name'];
})?.toList() ??
[],
onChanged: (value){
print(value.toString());
if(value!=null)
{
selectedList = jsonDecode(value);
}
else{
selectedList.clear();
}
},
),"# csd"
copied to clipboard