Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/TheAlphamerc/filterlist
filterList is a flutter package which provide utility to search/filter data from provided dynamic list.
https://github.com/TheAlphamerc/filterlist
Last synced: about 2 months ago
JSON representation
filterList is a flutter package which provide utility to search/filter data from provided dynamic list.
- Host: GitHub
- URL: https://github.com/TheAlphamerc/filterlist
- Owner: TheAlphamerc
- License: bsd-2-clause
- Created: 2020-03-02T16:57:05.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-05-27T16:53:28.000Z (4 months ago)
- Last Synced: 2024-07-26T17:55:19.241Z (about 2 months ago)
- Language: Dart
- Homepage: https://pub.dev/packages/filter_list
- Size: 4.25 MB
- Stars: 205
- Watchers: 9
- Forks: 65
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
## filter_list
[](https://pub.dev/packages/filter_list)
[](https://pub.dev/packages/flutter_plugin_filter_list/score)
[](https://pub.dev/packages/filter_list/score)
[](https://pub.dev/packages/filter_list/score)
[](https://hits.seeyoufarm.com)
[](https://github.com/login?return_to=https://github.com/FTheAlphamerc/flutter_plugin_filter_list)
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 
## Getting Started
1. Add library to your pubspec.yaml
```yaml
dependencies:
filter_list: ^
```
2. Import library in dart file
```dart
import 'package:filter_list/filter_list.dart';
```
3. Create a list of Strings / dynamic object
``` dart
class User {
final String? name;
final String? avatar;
User({this.name, this.avatar});
}
List userList = [
User(name: "Jon", avatar: ""),
User(name: "Lindsey ", avatar: ""),
User(name: "Valarie ", avatar: ""),
User(name: "Elyse ", avatar: ""),
User(name: "Ethel ", avatar: ""),
User(name: "Emelyan ", avatar: ""),
User(name: "Catherine ", avatar: ""),
User(name: "Stepanida ", avatar: ""),
User(name: "Carolina ", avatar: ""),
User(name: "Nail ", avatar: ""),
User(name: "Kamil ", avatar: ""),
User(name: "Mariana ", avatar: ""),
User(name: "Katerina ", avatar: ""),
];
```
## Filter list offer 3 ways to filter data from list
- FilterListDialog
- FilterListWidget
- FilterListDelegate
Below is a example of using filter list widgets with minimal code however there is a lot more inside the widget for you to fully customize the widget.
## How to use FilterListDialog
#### 1. Create a function and call `FilterListDialog.display`
```dart
void openFilterDialog() async {
await FilterListDialog.display(
context,
listData: userList,
selectedListData: selectedUserList,
choiceChipLabel: (user) => user!.name,
validateSelectedItem: (list, val) => list!.contains(val),
onItemSearch: (user, query) {
return user.name!.toLowerCase().contains(query.toLowerCase());
},
onApplyButtonClick: (list) {
setState(() {
selectedUserList = List.from(list!);
});
Navigator.pop(context);
},
);
}
```
>If `Apply` button is pressed without making any selection it will return empty list of items.
#### 2. Call `openFilterDialog` function on button tap to display filter dialog
```dart
@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: openFilterDialog,
child: Icon(Icons.add),
),
body: selectedUserList == null || selectedUserList!.length == 0
? Center(child: Text('No user selected'))
: ListView.builder(
itemBuilder: (context, index) {
return ListTile(
title: Text(selectedUserList![index].name!),
);
},
itemCount: selectedUserList!.length,
),
);
}
```
## How to use `FilterListWidget`.
```dart
class FilterPage extends StatelessWidget {
const FilterPage({Key? key, this.selectedUserList})
: super(key: key);
final List? selectedUserList;
@override
Widget build(BuildContext context) {
return Scaffold(
body: FilterListWidget(
listData: userList,
selectedListData: selectedUserList,
onApplyButtonClick: (list) {
// do something with list ..
},
choiceChipLabel: (item) {
/// Used to display text on chip
return item!.name;
},
validateSelectedItem: (list, val) {
/// identify if item is selected or not
return list!.contains(val);
},
onItemSearch: (user, query) {
/// When search query change in search bar then this method will be called
///
/// Check if items contains query
return user.name!.toLowerCase().contains(query.toLowerCase());
},
),
);
}
}
```
## How to use `FilterListDelegate`.
Create a function and call `FilterListDelegate.open()` on button tap.
``` dart
void openFilterDelegate() async {
await FilterListDelegate.open(
context: context,
list: userList,
onItemSearch: (user, query) {
return user.name!.toLowerCase().contains(query.toLowerCase());
},
tileLabel: (user) => user!.name,
emptySearchChild: Center(child: Text('No user found')),
searchFieldHint: 'Search Here..',
onApplyButtonClick: (list) {
// Do something with selected list
},
);
}
```
## Screenshots
Empty screen | FilterListDialog | Selected chip | Result from dialog
:-------------------------:|:-------------------------:|:-------------------------:|:-------------------------:
| 
| 
| 
### Customized Dialog Header
| | | |
:-------------------------:|:-------------------------:|:-------------------------:|
| 
| 
|
### Customized Choice chip
| | | | |
:-------------------------:|:-------------------------:|:-------------------------:|:-------------------------:
| 
| 
| 
### FilterListWidget
| Default| Customized | customized |
:-------------------------:|:-------------------------:|:-------------------------:
|||
### FilterListDelegate
| Single selection | Multiple selection |Multiple selection
|:-:|:-:|:-:|
|||
| Search through list | Customized Tile |
|:-:|:-:|
| 
## Parameters
| Parameter | Type | Description |
| :-------- | :------- | :------------------------- |
| height | `double` | Set height of filter dialog.|
| width | `double` | Set width of filter dialog.|
| hideCloseIcon|`bool`|Hide close Icon.|
| hideHeader|`bool`|Hide complete header section from filter dialog.|
| headerCloseIcon|`Widget`|Widget to close the dialog.|
| hideSelectedTextCount|`bool`|Hide selected text count.|
| enableOnlySingleSelection|`bool`| Enable only single selection |
| maximumSelectionLength|`int`| Set maximum selection length.|
| hideSearchField|`bool`|Hide search text field.|
| headlineText|`String`|Set header text of filter dialog.|
| backgroundColor|`Color`|Set background color of filter color|
| listData|`List()`|Populate filter dialog with text list. |
| selectedListData|` List()`|Marked selected text in filter dialog.|
| choiceChipLabel|`String Function(T item)`| Display text on choice chip.|
| validateSelectedItem|`bool Function(List? list, T item)`| Identifies weather a item is selected or not|
| onItemSearch|`List Function(List? list, String text)`| Perform search operation and returns filtered list|
| choiceChipBuilder|`Widget Function(BuildContext context, T? item, bool? isSelected)`|The choiceChipBuilder is a builder to design custom choice chip.|
| onApplyButtonClick|`Function(List list)`|Returns list of items when apply button is clicked|
| validateRemoveItem|`List Function(List? list, T item)`| Function Delegate responsible for delete item from list |
| 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 |
| controlButtons|`List`| configure which control button needs to be display on bottom of dialog along with 'Apply' button.|
| insetPadding| `EdgeInsets`| The amount of padding added to the outside of the dialog.|
| themeData|`FilterListThemeData`| Configure theme of filter dialog and widget.|
| choiceChipTheme|`ChoiceChipThemeData`| Configure theme of choice chip.|
| controlButtonBarTheme|`ControlButtonBarThemeData`| Configure theme of control button bar|
| controlButtonTheme|`ControlButtonThemeData`| Configure theme of control button.|
| headerTheme|`HeaderThemeData`| Configure theme of filter header.|
> `T` can be a String or any user defined Model
## Other Flutter packages
Name | Stars | Pub |
:-------------------------|------------------------- | ------------------------- |
|[Empty widget](https://github.com/TheAlphamerc/empty_widget) |[](https://github.com/login?return_to=https://github.com/TheAlphamerc/empty_widget) | [](https://pub.dev/packages/empty_widget) |
|[Add Thumbnail](https://github.com/TheAlphamerc/flutter_plugin_add_thumbnail) |[](https://github.com/login?return_to=https://github.com/TheAlphamerc/flutter_plugin_add_thumbnail) | [](https://pub.dev/packages/add_thumbnail) |
|[Country Provider](https://github.com/TheAlphamerc/country_provider) |[](https://github.com/login?return_to=https://github.com/TheAlphamerc/country_provider) | [](https://pub.dev/packages/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](https://github.com/TheAlphamerc) ([Twitter](https://www.twitter.com/TheAlphamerc)) ([Youtube](https://www.youtube.com/user/sonusharma045sonu/))
([Insta](https://www.instagram.com/_sonu_sharma__)) 
> 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 :coffee:
>
> * 
> * [PayPal](https://www.paypal.me/TheAlphamerc/)
## Visitors Count
