代码拉取完成,页面将自动刷新
FilterList is a flutter package which provide utility to search/filter on the basis of single/multiple selection from provided dynamic list.
FilterListDialog.display()
to display filter dialog.All
button to select all text from list.Reset
button to make all text unselected.Apply
buton to return selected list of strings.close
icon clicked it close dialog and return null value.Apply
button is pressed it will return empty list of items.
dependencies:
filter_list: ^0.0.9
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 = [];
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);
});
}
_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));
}
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 |
---|---|---|---|
![]() |
![]() |
![]() |
![]() |
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 |
---|---|---|---|
![]() |
![]() |
![]() |
![]() |
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 |
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. |
T
can be a String or any user defined Model
Name | Stars | Pub |
---|---|---|
Empty widget | ||
Add Thumbnail | ||
Country Provider |
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
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。