Package designed to select multiple items from a list, with the option to filter and even search the items.
- Invoke method
FilterListDialog.display()
to display filter dialog. - Make selection from list.
- Click
All
button to select all text from list. - Click
Reset
button to make all text unselected. - Click
Apply
buton to return selected list of strings. - On
close
icon clicked it close dialog and return null value. - Without making any selection
Apply
button is pressed it will return empty list of items.
dependencies:
filter_list: ^0.0.6
import package:filter_list/filter_list.dart';
List<String> countList = [
"One",
"Two",
"Three",
"Four",
"Five",
"Six",
"Seven",
"Eight",
"Nine",
"Ten",
"Eleven",
"Tweleve",
"Thirteen",
"Fourteen",
"Fifteen",
"Sixteen",
"Seventeen",
"Eighteen",
"Nineteen",
"Twenty"
];
List<String> selectedCountList = [];
void _openFilterDialog() async {
await FilterListDialog.display(
context,
listData: countList,
selectedListData: selectedCountList,
height: 480,
borderRadius: 20,
headlineText: "Select Count",
searchFieldHintText: "Search Here",
validateSelectedItem: (list, val) {
return list.contains(val);
},
onItemSearch: (list, text) {
if (list.any((element) =>
element.toLowerCase().contains(text.toLowerCase()))) {
/// return list which contains matches
return list
.where((element) =>
element.toLowerCase().contains(text.toLowerCase()))
.toList();
}
},
onApplyButtonClick: (list) {
if (list != null) {
setState(() {
selectedCountList = List.from(list);
});
}
Navigator.pop(context);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
floatingActionButton: FloatingActionButton(
onPressed: _openFilterDialog,
tooltip: 'Increment',
child: Icon(Icons.add),
),
/// check for empty or null value selctedCountList
body: selectedCountList == null || selectedCountList.length == 0
? Center(
child: Text('No text selected'),
)
: ListView.separated(
itemBuilder: (context, index) {
return ListTile(
title: Text(selectedCountList[index]),
);
},
separatorBuilder: (context, index) => Divider(),
itemCount: selectedCountList.length));
}
class User {
final String name;
final String avatar;
User({this.name, this.avatar});
}
class FilterPage extends StatelessWidget {
FilterPage({Key key}) : super(key: key);
List<User> userList = [
User(name: "Jon", avatar: ""),
User(name: "Ethel ", avatar: ""),
User(name: "Elyse ", avatar: ""),
User(name: "Nail ", avatar: ""),
User(name: "Valarie ", avatar: ""),
User(name: "Lindsey ", avatar: ""),
User(name: "Emelyan ", avatar: ""),
User(name: "Carolina ", avatar: ""),
User(name: "Catherine ", avatar: ""),
User(name: "Stepanida ", avatar: ""),
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Filter List Widget Example "),
),
body: SafeArea(
child: FilterListWidget(
listData: userList,
hideheaderText: true,
onApplyButtonClick: (list) {
if (list != null) {
print("Selected items count: ${list.length}");
}
},
label: (item) {
/// Used to print text on chip
return item.name;
},
validateSelectedItem: (list, val) {
/// identify if item is selected or not
return list.contains(val);
},
onItemSearch: (list, text) {
/// When text change in search text field then return list containing that text value
///
///Check if list has value which matchs to text
if (list.any((element) =>
element.name.toLowerCase().contains(text.toLowerCase()))) {
/// return list which contains matches
return list
.where((element) =>
element.name.toLowerCase().contains(text.toLowerCase()))
.toList();
}
},
),
),
);
}
}
No selected text from list | FilterList widget | Make selection | Selected text from list |
---|---|---|---|
Hidden close Icon | Hidden text field | Hidden header text | Hidden full header |
---|---|---|---|
Customised control button | Customised selected text | Customised unselected text | Customised text field background color |
---|---|---|---|
FilterListWidget | N/A | N/A | N/A |
---|---|---|---|
height
Type: double
- Set height of filter dialog.
width
Type: double
- Set width of filter dialog.
borderRadius
Type: double
- Set border radius of filter dialog.
listData
Type: List<dynamic>()
- Populate filter dialog with text list.
selectedListData
Type: List<dynamic>()
- Marked selected text in filter dialog.
label
Type: [Callback] {String Function(dynamic)}
- Print text on chip
validateSelectedItem
Type: [Callback] bool Function(List list, T item)
- identifies weather a item is selecte or not
onItemSearch
Type: [Callback] List Function(List list, String text)
- filter list on the basis of search field text
headlineText
Type: String
- Set header text of filter dialog.
searchFieldHintText
Type: String
- Set hint text in search field.
hideSelectedTextCount
Type: bool
- Hide selected text count.
hideSearchField
Type: bool
- Hide search text field.
hidecloseIcon
Type: bool
- Hide close Icon.
hideheader
Type: bool
- Hide complete header section from filter dialog.
closeIconColor
Type: Color
- set color of close Icon.
headerTextColor
Type: Color
- Set color of header text.
applyButonTextColor
Type: Color
- Set text color of apply button.
applyButonTextBackgroundColor
Type: Color
- Set background color of apply button.
allResetButonColor
Type: Color
- Set text color of all and reset button.
selectedTextColor
Type: Color
- Set color of selected text in filter dialog.
selectedTextBackgroundColor
Type: Color
- Set background color of selected text field.
unselectedTextbackGroundColor
Type: Color
- Set background color of unselected text field.
unselectedTextColor
Type: Color
- Set text color of unselected text in filter dialog
searchFieldBackgroundColor
Type: Color
- Set background color of Search field.
backgroundColor
Type: Color
- Set background color of filter color.
onApplyButtonClick
Type Function(List)
- Returns list of items when apply button is clicked
Plugin Name | Stars |
---|---|
Empty widget | |
Add Thumbnail |
I welcome and encourage all pull requests. It usually will take me within 24-48 hours to respond to any issue or request.
Sonu Sharma (Twitter) (Youtube) (Insta)
If you found this project helpful or you learned something from the source code and want to thank me, consider buying me a cup of ☕