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

ParameterTypeDescription
heightdoubleSet height of filter dialog.
widthdoubleSet width of filter dialog.
borderRadiusdoubleSet border radius of filter dialog.
hideCloseIconboolHide close Icon.
hideheaderboolHide complete header section from filter dialog.
hideHeaderTextboolIf true then it will hide the header text
hideSelectedTextCountboolHide selected text count.
hideSearchFieldboolHide search text field.
searchFieldHintTextStringSet hint text in search field.
headlineTextStringSet header text of filter dialog.
closeIconColorColorSet color of close Icon.
headerTextColorColorSet color of header text.
backgroundColorColorSet background color of filter color
searchFieldBackgroundColorColorSet background color of Search field.
unselectedTextbackGroundColorColorSet background color of unselected text field.
selectedTextBackgroundColorColorSet background color of selected text field.
applyButonTextBackgroundColorColorSet background color of apply button.
applyButtonTextStyleTextStyleTextStyle for Apply button
selectedChipTextStyleTextStyleTextStyle for chip when selected
unselectedChipTextStyleTextStyleTextStyle for chip when not selected
controlButtonTextStyleTextStyleTextStyle for All and Reset button text
headerTextStyleTextStyleTextStyle for header text
searchFieldTextStyleTextStyleTextStyle for search field tex
listDataList<T>()Populate filter dialog with text list.
selectedListDataList<T>()Marked selected text in filter dialog.
choiceChipLabelString Function(T item)Display text on choice chip.
validateSelectedItembool Function(List<T>? list, T item)Identifies weather a item is selected or not
onItemSearchList<T> Function(List<T>? list, String text)Perform search operation and returns filtered list
choiceChipBuilderWidget Function(BuildContext context, T? item, bool? iselected)The choiceChipBuilder is a builder to design custom choice chip.
onApplyButtonClickFunction(List<T> list)Returns list of items when apply button is clicked
ValidateRemoveItemList<T> Function(List<T>? list, T item)Return the list of items filtered by the user logic
applyButtonTextStringApply button text to customize or translate
resetButtonTextStringReset button text to customize or translate
allButtonTextStringAll button text to customize or translate
selectedItemsTextStringSelected items text to customize or translate
controlContainerDecorationBoxDecorationCustomize the bottom area of the dialog, where the buttons are placed
buttonRadiusdoubleButton border radius
buttonSpacingdoubleSpace between bottom control buttons
insetPaddingEdgeInsetsThe amount of padding added to MediaQueryData.viewInsets on the outside of the dialog.
wrapAlignmentWrapAlignmentControls the choice chips alignment in main axis.
wrapCrossAxisAlignmentwrapSpacingControls the choice chip within a run should be aligned relative to each other in the cross axis.
wrapSpacingWrapAlignmentcontrols the space to place between choice chip in a run in the main axis.

T can be a String or any user defined Model

Other Flutter packages

NameStarsPub
Empty widgetGitHub starspub package
Add ThumbnailGitHub starspub package
Country ProviderGitHub starspub package

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