TheAlphamerc / Flutter_plugin_filter_list

filter_list Plugin

Package designed to select multiple items from a list, with the option to filter and even search the items.

Download 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.6

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,
      listData: countList,
      selectedListData: selectedCountList,
      height: 480,
      borderRadius: 20,
      headlineText: "Select Count",
      searchFieldHintText: "Search Here",
      validateSelectedItem: (list, val) {
          return list.contains(val);
      },
      onItemSearch: (list, text) {
          if (list.any((element) =>
              element.toLowerCase().contains(text.toLowerCase()))) {
            /// return list which contains matches
            return list
                .where((element) =>
                    element.toLowerCase().contains(text.toLowerCase()))
                .toList();
          }
        },
      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));
  }

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(
          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();
            }
          },
        ),
      ),
    );
  }
}

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.

listData Type: List<dynamic>()

• Populate filter dialog with text list.

selectedListData Type: List<dynamic>()

• Marked selected text in filter dialog.

label Type: [Callback] {String Function(dynamic)}

• Print text on chip

validateSelectedItem Type: [Callback] bool Function(List list, T item)

• identifies weather a item is selecte or not

onItemSearch Type: [Callback] List Function(List list, String text)

• filter list on the basis of search field text

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 items when apply button is clicked

Flutter plugins

Plugin Name	Stars
Empty widget
Add Thumbnail

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 (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 ☕️

• PayPal