The flutter_plugin_filter_list from dannystrelok

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 All button to select all text from list.
Click Reset button to make all text unselected.
Click Apply buton to return selected list of strings.
On close icon clicked it close dialog and return null value.
Without making any selection Apply button 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.
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