filter_list

pub package Likes Popularity Pub points Hits GitHub stars GitHub forks

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

Getting Started

  1. Add library to your pubspec.yaml

dependencies:
  filter_list: ^<latest_version>

  1. Import library in dart file
import package:filter_list/filter_list.dart';
  1. Create a list of Strings / dynamic object
class User {
  final String? name;
  final String? avatar;
  User({this.name, this.avatar});
}

List<User> userList = [
 User(name: "Jon", avatar: ""),
  User(name: "Lindsey ", avatar: ""),
  User(name: "Valarie ", avatar: ""),
  User(name: "Elyse ", avatar: ""),
  User(name: "Ethel ", avatar: ""),
  User(name: "Emelyan ", avatar: ""),
  User(name: "Catherine ", avatar: ""),
  User(name: "Stepanida  ", avatar: ""),
  User(name: "Carolina ", avatar: ""),
  User(name: "Nail  ", avatar: ""),
  User(name: "Kamil ", avatar: ""),
  User(name: "Mariana ", avatar: ""),
  User(name: "Katerina ", avatar: ""),
];

Filter list offer 3 ways to filter data from list

  • FilterListDialog
  • FilterListWidget
  • FilterListDelegate

Below is a example of using filter list widgets with minimal code however there is a lot more inside the widget for you to fully customize the widget.

How to use FilterListDialog

1. Create a function and call FilterListDialog.display

  void openFilterDialog() async {
    await FilterListDialog.display<User>(
      context,
      listData: userList,
      selectedListData: selectedUserList,
      choiceChipLabel: (user) => user!.name,
      validateSelectedItem: (list, val) => list!.contains(val),
      onItemSearch: (user, query) {
        return user.name!.toLowerCase().contains(query.toLowerCase());
      },
      onApplyButtonClick: (list) {
        setState(() {
          selectedUserList = List.from(list!);
        });
        Navigator.pop(context);
      },
    );
  }

If Apply button is pressed without making any selection it will return empty list of items.

2. Call openFilterDialog function on button tap to display filter dialog

@override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: openFilterDialog,
        child: Icon(Icons.add),
      ),
      body: selectedUserList == null || selectedUserList!.length == 0
          ? Center(child: Text('No user selected'))
          : ListView.builder(
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(selectedUserList![index].name!),
                );
              },
              itemCount: selectedUserList!.length,
            ),
    );
  }

How to use FilterListWidget.


class FilterPage extends StatelessWidget {
  const FilterPage({Key? key, this.selectedUserList})
      : super(key: key);
  final List<User>? selectedUserList;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FilterListWidget<User>(
        listData: userList,
        selectedListData: selectedUserList,
        onApplyButtonClick: (list) {
          // do something with list ..
        },
        choiceChipLabel: (item) {
          /// Used to display text on chip
          return item!.name;
        },
        validateSelectedItem: (list, val) {
          ///  identify if item is selected or not
          return list!.contains(val);
        },
        onItemSearch: (user, query) {
          /// When search query change in search bar then this method will be called
          ///
          /// Check if items contains query
          return user.name!.toLowerCase().contains(query.toLowerCase());
        },
      ),
    );
  }
}

How to use FilterListDelegate.

Create a function and call FilterListDelegate.open() on button tap.

 void openFilterDelegate() async {
   await FilterListDelegate.open<User>(
      context: context,
      list: userList,
      onItemSearch: (user, query) {
        return user.name!.toLowerCase().contains(query.toLowerCase());
      },
      tileLabel: (user) => user!.name,
      emptySearchChild: Center(child: Text('No user found')),
      searchFieldHint: 'Search Here..',
      onApplyButtonClick: (list) {
        // Do something with selected list
      },
    );
  }

Screenshots

Empty screenFilterListDialogSelected chipResult from dialog

Customized Dialog Header

Customized Choice chip

FilterListWidget

DefaultCustomizedcustomized

FilterListDelegate

Single selectionMultiple selectionMultiple selection
Search through listCustomized Tile

Parameters

ParameterTypeDescription
heightdoubleSet height of filter dialog.
widthdoubleSet width of filter dialog.
hideCloseIconboolHide close Icon.
hideHeaderboolHide complete header section from filter dialog.
headerCloseIconWidgetWidget to close the dialog.
hideSelectedTextCountboolHide selected text count.
hideSearchFieldboolHide search text field.
headlineTextStringSet header text of filter dialog.
backgroundColorColorSet background color of filter color
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? isSelected)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)Function Delegate responsible for delete item from list
resetButtonTextStringReset button text to customize or translate
allButtonTextStringAll button text to customize or translate
selectedItemsTextStringSelected items text to customize or translate
controlButtonsList<ControlButtonType>configure which control button needs to be display on bottom of dialog along with 'Apply' button.
insetPaddingEdgeInsetsThe amount of padding added to the outside of the dialog.
themeDataFilterListThemeDataConfigure theme of filter dialog and widget.
choiceChipThemeChoiceChipThemeDataConfigure theme of choice chip.
controlButtonBarThemeControlButtonBarThemeDataConfigure theme of control button bar
controlButtonThemeControlButtonThemeDataConfigure theme of control button.
headerThemeHeaderThemeDataConfigure theme of filter header.

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