![GitHub forks](https://camo.githubusercontent.com/689152b3a5a75bdbbb25f383a7d7687cfee0f6db2b97a4db0fcdb5697ad929bb/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f666f726b732f546865416c7068616d6572632f666c75747465725f706c7567696e5f66696c7465725f6c6973743f7374796c653d736f6369616c)
![Pub points](https://camo.githubusercontent.com/6bd12e7ef5adf047b177420915e0fa19f833fe772e43c788da55549e8d4ead9b/68747470733a2f2f6261646765732e6261722f666c75747465725f7765656b5f766965772f707562253230706f696e7473)
FilterList is a flutter package which provide utility to search/filter on the basis of single/multiple selection from provided dynamic list.
Download Demo App ![GitHub All Releases](https://camo.githubusercontent.com/f454aca6b82c721baabafe72f47369f68ab972252ad7cc232b1e941a0aae3d34/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f646f776e6c6f6164732f546865616c7068616d6572632f666c75747465725f706c7567696e5f66696c7465725f6c6973742f746f74616c3f636f6c6f723d677265656e)
![](https://camo.githubusercontent.com/0949e28b681e5eef5e4e074d864b58574bcb39e7d8589c2e34414b66cbcfdc1e/68747470733a2f2f706c617965727a6f6e2e636f6d2f61737365742f646f776e6c6f61642e706e67)
- 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.
1. Add library to your pubspec.yaml
dependencies:
filter_list: ^0.0.9
2. Import library in dart file
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 = [];
Create a function and call FilterListDialog.display()
on button clicked
void _openFilterDialog() async {
await FilterListDialog.display<String>(
context,
listData: countList,
selectedListData: selectedCountList,
height: 480,
headlineText: "Select Count",
searchFieldHintText: "Search Here",
choiceChipLabel: (item) {
return item;
},
validateSelectedItem: (list, val) {
return list!.contains(val);
},
onItemSearch: (list, text) {
if (list!.any((element) =>
element.toLowerCase().contains(text.toLowerCase()))) {
return list!
.where((element) =>
element.toLowerCase().contains(text.toLowerCase()))
.toList();
}
else{
return [];
}
},
onApplyButtonClick: (list) {
if (list != null) {
setState(() {
selectedCountList = List.from(list);
});
}
Navigator.pop(context);
});
}
Call _openFilterDialog
function on floatingActionButton
pressed to display filter dialog
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
floatingActionButton: FloatingActionButton(
onPressed: _openFilterDialog,
tooltip: 'Increment',
child: Icon(Icons.add),
),
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));
}
How to use FilterListWidget
.
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<User>(
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();
}
else{
return [];
}
},
),
),
);
}
}
No selected text from list |
FilterList widget |
Make selection |
Selected text from list |
![](https://github.com/TheAlphamerc/flutter_plugin_filter_list/raw/master/screenshots/screenshot_1.jpg?raw=true&raw=true) |
![](https://github.com/TheAlphamerc/flutter_plugin_filter_list/raw/master/screenshots/screenshot_2.jpg?raw=true&raw=true) |
![](https://github.com/TheAlphamerc/flutter_plugin_filter_list/raw/master/screenshots/screenshot_3.jpg?raw=true&raw=true) |
![](https://github.com/TheAlphamerc/flutter_plugin_filter_list/raw/master/screenshots/screenshot_4.jpg?raw=true&raw=true) |
Hidden close Icon |
Hidden text field |
Hidden header text |
Hidden full header |
![](https://github.com/TheAlphamerc/flutter_plugin_filter_list/raw/master/screenshots/screenshot_5.jpg?raw=true&raw=true) |
![](https://github.com/TheAlphamerc/flutter_plugin_filter_list/raw/master/screenshots/screenshot_6.jpg?raw=true&raw=true) |
![](https://github.com/TheAlphamerc/flutter_plugin_filter_list/raw/master/screenshots/screenshot_7.jpg?raw=true&raw=true) |
![](https://github.com/TheAlphamerc/flutter_plugin_filter_list/raw/master/screenshots/screenshot_8.jpg?raw=true&raw=true) |
Customised control button |
Customised selected text |
Customised unselected text |
Customised text field background color |
![](https://github.com/TheAlphamerc/flutter_plugin_filter_list/raw/master/screenshots/screenshot_9.jpg?raw=true&raw=true) |
![](https://github.com/TheAlphamerc/flutter_plugin_filter_list/raw/master/screenshots/screenshot_10.jpg?raw=true&raw=true) |
![](https://github.com/TheAlphamerc/flutter_plugin_filter_list/raw/master/screenshots/screenshot_12.jpg?raw=true&raw=true) |
![](https://github.com/TheAlphamerc/flutter_plugin_filter_list/raw/master/screenshots/screenshot_11.jpg?raw=true&raw=true) |
Customised Choice chip |
Customised Choice chip |
FilterListWidget |
FilterListWidget |
![](https://github.com/TheAlphamerc/flutter_plugin_filter_list/raw/master/screenshots/screenshot_15.jpg?raw=true&raw=true) |
![](https://github.com/TheAlphamerc/flutter_plugin_filter_list/raw/master/screenshots/screenshot_17.jpg?raw=true&raw=true) |
![](https://github.com/TheAlphamerc/flutter_plugin_filter_list/raw/master/screenshots/screenshot_14.jpg?raw=true&raw=true) |
![](https://github.com/TheAlphamerc/flutter_plugin_filter_list/raw/master/screenshots/screenshot_16.jpg?raw=true&raw=true) |
Parameter |
Type |
Description |
height |
double |
Set height of filter dialog. |
width |
double |
Set width of filter dialog. |
borderRadius |
double |
Set border radius of filter dialog. |
hideCloseIcon |
bool |
Hide close Icon. |
hideheader |
bool |
Hide complete header section from filter dialog. |
hideHeaderText |
bool |
If true then it will hide the header text |
hideSelectedTextCount |
bool |
Hide selected text count. |
hideSearchField |
bool |
Hide search text field. |
searchFieldHintText |
String |
Set hint text in search field. |
headlineText |
String |
Set header text of filter dialog. |
closeIconColor |
Color |
Set color of close Icon. |
headerTextColor |
Color |
Set color of header text. |
backgroundColor |
Color |
Set background color of filter color |
searchFieldBackgroundColor |
Color |
Set background color of Search field. |
unselectedTextbackGroundColor |
Color |
Set background color of unselected text field. |
selectedTextBackgroundColor |
Color |
Set background color of selected text field. |
applyButonTextBackgroundColor |
Color |
Set background color of apply button. |
applyButtonTextStyle |
TextStyle |
TextStyle for Apply button |
selectedChipTextStyle |
TextStyle |
TextStyle for chip when selected |
unselectedChipTextStyle |
TextStyle |
TextStyle for chip when not selected |
controlButtonTextStyle |
TextStyle |
TextStyle for All and Reset button text |
headerTextStyle |
TextStyle |
TextStyle for header text |
searchFieldTextStyle |
TextStyle |
TextStyle for search field tex |
listData |
List<T>() |
Populate filter dialog with text list. |
selectedListData |
List<T>() |
Marked selected text in filter dialog. |
choiceChipLabel |
String Function(T item) |
Display text on choice chip. |
validateSelectedItem |
bool Function(List<T>? list, T item) |
Identifies weather a item is selected or not |
onItemSearch |
List<T> Function(List<T>? list, String text) |
Perform search operation and returns filtered list |
choiceChipBuilder |
Widget Function(BuildContext context, T? item, bool? iselected) |
The choiceChipBuilder is a builder to design custom choice chip. |
onApplyButtonClick |
Function(List<T> list) |
Returns list of items when apply button is clicked |
ValidateRemoveItem |
List<T> Function(List<T>? list, T item) |
Return the list of items filtered by the user logic |
applyButtonText |
String |
Apply button text to customize or translate |
resetButtonText |
String |
Reset button text to customize or translate |
allButtonText |
String |
All button text to customize or translate |
selectedItemsText |
String |
Selected items text to customize or translate |
controlContainerDecoration |
BoxDecoration |
Customize the bottom area of the dialog, where the buttons are placed |
buttonRadius |
double |
Button border radius |
buttonSpacing |
double |
Space between bottom control buttons |
T
can be a String or any user defined Model
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) ![Twitter Follow](https://camo.githubusercontent.com/5ef40371055175849a8e881d76ba330c0e7fa3a8952fe008c554ab151f83f6c2/68747470733a2f2f696d672e736869656c64732e696f2f747769747465722f666f6c6c6f772f746865616c7068616d6572633f7374796c653d736f6369616c)
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 ☕
![Loading](https://camo.githubusercontent.com/476a728fda3d4f723a392901727f26897dd7584f40895efb6fc0fe10745d431c/68747470733a2f2f70726f66696c652d636f756e7465722e676c697463682e6d652f666c75747465725f706c7567696e5f66696c7465725f6c6973742f636f756e742e737667)