filter_list Plugin

Codemagic build status GitHub last commit Open Source Love GitHub GitHub code size in bytes GitHub stars GitHub forks

pub package Likes Popularity Pub points

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 GitHub All Releases

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 listFilterList widgetMake selectionSelected text from list
Hidden close IconHidden text fieldHidden header textHidden full header
Customised control buttonCustomised selected textCustomised unselected textCustomised text field background color
Customised Choice chipCustomised Choice chipFilterListWidgetFilterListWidget

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.

choiceChipLabel Type String Function(dynamic)

  • Display text on choice chip.

validateSelectedItem Type bool Function(List list, T item)

  • identifies weather a item is selecte or not

onItemSearch Type List Function(List list, String text)

  • filter list on the basis of search field text

headlineText Type String

  • Set header text of filter dialog.

hideHeaderText TYPE bool

  • If true then it will hide the header text

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.

applyButonTextBackgroundColor Type Color

  • Set background color of apply button.

selectedChipTextStyle Type TextStyle

  • TextStyle for chip when selected

unselectedChipTextStyle Type TextStyle

  • TextStyle for chip when not selected

controlButtonTextStyle Type TextStyle

  • TextStyle for All and Reset button text

applyButtonTextStyle Type TextStyle

  • TextStyle for Apply button

headerTextStyle Type TextStyle

  • TextStyle for header text

searchFieldTextStyle Type TextStyle

  • TextStyle for search field text

choiceChipBuilder Type TextStyle

  • The choiceChipBuilder is a builder to design custom choice chip.

selectedTextBackgroundColor Type Color

  • Set background color of selected text field.

unselectedTextbackGroundColor Type Color

  • Set background color of unselected text field.

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 NameStars
Empty widgetGitHub stars
Add ThumbnailGitHub stars

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) Twitter Follow

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:

Visitors Count

Loading

Libraries

filter_list