Flutter filter list package v.0.05 released on pub.dev
Tags: flutter, widget, package
Published: 2020-09-22 10:15:52

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

```yaml
dependencies:
  filter_list: ^0.0.5
```

### 2. Import library in dart file

```dart
import package:filter_list/filter_list.dart';
```


### 3. How to use FilterList


#### Create a list of Strings
```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
```dart
  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

```dart
  @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.

```dart
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
:-------------------------:|:-------------------------:|:-------------------------:|:-------------------------:
![](https://github.com/TheAlphamerc/flutter_plugin_filter_list/blob/master/screenshots/screenshot_1.jpg?raw=true)|![](https://github.com/TheAlphamerc/flutter_plugin_filter_list/blob/master/screenshots/screenshot_2.jpg?raw=true)|![](https://github.com/TheAlphamerc/flutter_plugin_filter_list/blob/master/screenshots/screenshot_3.jpg?raw=true)|![](https://github.com/TheAlphamerc/flutter_plugin_filter_list/blob/master/screenshots/screenshot_4.jpg?raw=true)|

Hidden close Icon    |  Hidden text field     |  Hidden header text    |  Hidden full header
:-------------------------:|:-------------------------:|:-------------------------:|:-------------------------:
![](https://github.com/TheAlphamerc/flutter_plugin_filter_list/blob/master/screenshots/screenshot_5.jpg?raw=true)|![](https://github.com/TheAlphamerc/flutter_plugin_filter_list/blob/master/screenshots/screenshot_6.jpg?raw=true)|![](https://github.com/TheAlphamerc/flutter_plugin_filter_list/blob/master/screenshots/screenshot_7.jpg?raw=true)|![](https://github.com/TheAlphamerc/flutter_plugin_filter_list/blob/master/screenshots/screenshot_8.jpg?raw=true)|

Customised control button |Customised selected text |Customised unselected text  |Customised text field background color
:-------------------------:|:-------------------------:|:-------------------------:|:-------------------------:
![](https://github.com/TheAlphamerc/flutter_plugin_filter_list/blob/master/screenshots/screenshot_9.jpg?raw=true)|![](https://github.com/TheAlphamerc/flutter_plugin_filter_list/blob/master/screenshots/screenshot_10.jpg?raw=true)|![](https://github.com/TheAlphamerc/flutter_plugin_filter_list/blob/master/screenshots/screenshot_12.jpg?raw=true)|![](https://github.com/TheAlphamerc/flutter_plugin_filter_list/blob/master/screenshots/screenshot_11.jpg?raw=true)|


FilterListWidget |N/A |N/A |N/A
:-------------------------:|:-------------------------:|:-------------------------:|:-------------------------:
<img src="https://github.com/TheAlphamerc/flutter_plugin_filter_list/blob/master/screenshots/screenshot_14.jpg?raw=true" width="200"></img>|![](https://github.com/TheAlphamerc/flutter_plugin_filter_list/blob/master/screenshots/screenshot_101.jpg?raw=true)|![](https://github.com/TheAlphamerc/flutter_plugin_filter_list/blob/master/screenshots/screenshot_121.jpg?raw=true)|![](https://github.com/TheAlphamerc/flutter_plugin_filter_list/blob/master/screenshots/screenshot_111.jpg?raw=true)|



### 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<String>)**
 * 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](https://github.com/TheAlphamerc/flutter_plugin_filter_list/blob/master/CONTRIBUTING.md),
and send a [pull request](https://github.com/TheAlphamerc/flutter_plugin_filter_list/pulls). 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](https://github.com/TheAlphamerc) ([Twitter](https://www.twitter.com/TheAlphamerc)) ([Youtube](https://www.youtube.com/user/sonusharma045sonu/)) ([Insta](https://www.instagram.com/_sonu_sharma__))