FilterList is a flutter plugin that is designed to provide ease in filter data from a list of strings.
Changelogs
- Add FilterListWidget widget.
- FilterList.showFilterList is renamed to FilterListDialog.display
- Add onApplyButtonClick callback to return selected text list from FilterListDialog.display.
Package link:- https://pub.dev/packages/filter_list
Demo App link:- https://github.com/TheAlphamerc/flutter_plugin_filter_list/releases/download/v0.0.5/app-release.apk
Source code:- https://github.com/TheAlphamerc/flutter_plugin_filter_list
Data flow
- Pass list of strings to
FilterListDialog.display()
. - Pass list of selected strings to show pre-selected text otherwise ignore it.
- Invoke method
FilterListDialog.display
to display filter dialog. - Make selection from list.
- Click
All
button to select all text from the list. - Click
Reset
button to make all text unselected. - Click
Apply
button to return selected list of strings. - On
close
icon clicked it close dialog and return a null value. - Without making any selection
Apply
button is pressed it will return an empty list of string.
Getting Started
1. Add library to your pubspec.yaml
dependencies:
filter_list: ^0.0.5
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(
context,
allTextList: countList,
height: 480,
borderRadius: 20,
headlineText: "Select Count",
searchFieldHintText: "Search Here",
selectedTextList: selectedCountList,
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),
),
/// 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));
}
To display filter widget use FilterListWidget
and pass list of strings to it.
class FilterPage extends StatelessWidget {
const FilterPage({Key key, this.allTextList}) : super(key: key);
final List<String> allTextList;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Filter list Page"),
),
body: SafeArea(
child: FilterListWidget(
allTextList: allTextList,
height: MediaQuery.of(context).size.height,
hideheaderText: true,
onApplyButtonClick: (list) {
if(list != null){
print("selected list length: ${list.length}");
}
},
),
),
);
}
}
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 |
---|---|---|---|
FilterListWidget | N/A | N/A | N/A |
---|---|---|---|
Parameters and Value
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.
allTextList
Type: List<String>()
- Populate filter dialog with text list.
selectedTextList
Type: List<String>()
- Marked selected text in filter dialog.
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 strings when apply button is clicked
Contributing
If you wish to contribute a change to any of the existing features or add new in this repo,
please review our contribution guide,
and send a pull request. I welcome and encourage all pull requests. It usually will take me within 24-48 hours to respond to any issue or request.
Project Created & Maintained By
Sonu Sharma (Twitter) (Youtube) (Insta)
Top comments (0)