filter_list 1.0.1 icon indicating copy to clipboard operation
filter_list: ^1.0.1 copied to clipboard

Filter_list Package is designed to make single/multiple item selection from a list of string/object.

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? 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)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<ContolButtonType>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 ☕

Visitors Count #

Loading
234
likes
130
pub points
94%
popularity

Publisher

unverified uploader

Filter_list Package is designed to make single/multiple item selection from a list of string/object.

Repository (GitHub)
View/report issues

Documentation

API reference

License

BSD-2-Clause (LICENSE)

Dependencies

flutter

More

Packages that depend on filter_list