filter_list Plugin
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 
Data flow
- Invoke method
FilterListDialog.display()to display filter dialog. - Make selection from list.
- Click
Allbutton to select all text from list. - Click
Resetbutton to make all text unselected. - Click
Applybuton to return selected list of strings. - On
closeicon clicked it close dialog and return null value. - Without making any selection
Applybutton is pressed it will return empty list of items.
Getting Started
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';
3. How to use FilterList
Create a list of Strings
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 [];
}
},
),
),
);
}
}
Screenshots
| 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 |
|---|---|---|---|
 |
 |
 |
 |
| Customised Choice chip | Customised Choice chip | FilterListWidget | FilterListWidget |
|---|---|---|---|
 |
 |
 |
 |
Parameters
| 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. |
| hideHeaderAreaShadow | bool |
Hide header area shadow if value is true. |
| headerCloseIcon | Widget |
Widget to close the 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) |
Function Delegate responsible for delete item from list |
| 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 |
| insetPadding | EdgeInsets |
The amount of padding added to [MediaQueryData.viewInsets] on the outside of the dialog. |
| wrapAlignment | WrapAlignment |
Controls the choice chips alignment in main axis. |
| wrapCrossAxisAlignment | wrapSpacing |
Controls the choice chip within a run should be aligned relative to each other in the cross axis. |
| wrapSpacing | WrapAlignment |
controls the space to place between choice chip in a run in the main axis. |
Tcan be a String or any user defined Model
Other Flutter packages
| Name | Stars | Pub |
|---|---|---|
| Empty widget |  |
 |
| Add Thumbnail |  |
 |
| Country Provider |  |
 |
Pull Requests
I welcome and encourage all pull requests. It usually will take me within 24-48 hours to respond to any issue or request.
Created & Maintained By
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
☕
![Select only one option [feature]](https://avatars.githubusercontent.com/u/26343153?v=4)
![[Question] initial selected](https://avatars.githubusercontent.com/u/75978848?v=4)
based on that pict, it's only available to change applybuttonstyle, how to change applybuttontitle ?
how to rename label search as an example I want to change from Search here.. to Maghanap dito..
238 Dec 11, 2022
3 Feb 1, 2021
5 Jun 20, 2022
6 Apr 26, 2022
741 Dec 30, 2022
550 Dec 23, 2022
6 Sep 12, 2022
462 Jan 3, 2023
13 Nov 25, 2020
17 Nov 22, 2022
44.6k Dec 30, 2022
291 Dec 20, 2022
4 Dec 14, 2021
65 Nov 10, 2022
3 Dec 8, 2021
4.2k Jan 8, 2023
1.4k Jan 6, 2023
4 Dec 9, 2022