Flutter List plugin

filter_list

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

Getting Started

1. Add library to your pubspec.yaml

dependencies:
  filter_list: ^<latest_version>

2. Import library in dart file

import 'package:filter_list/filter_list.dart';

3. 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 screen | FilterListDialog | Selected chip | Result from dialog :-------------------------:|:-------------------------:|:-------------------------:|:-------------------------: | | |

Customized Dialog Header

| | | | :-------------------------:|:-------------------------:|:-------------------------:| | | |

Customized Choice chip

| | | | | :-------------------------:|:-------------------------:|:-------------------------:|:-------------------------: | | |

FilterListWidget

| Default| Customized | customized | :-------------------------:|:-------------------------:|:-------------------------: |||

FilterListDelegate

| Single selection | Multiple selection |Multiple selection |:-:|:-:|:-:| |||

| Search through list | Customized Tile | |:-:|:-:| |

Parameters

| Parameter | Type | Description | | :-------- | :------- | :------------------------- | | height | double | Set height of filter dialog.| | width | double | Set width of filter dialog.| | hideCloseIcon|bool|Hide close Icon.| | hideHeader|bool|Hide complete header section from filter dialog.| | headerCloseIcon|Widget|Widget to close the dialog.| | hideSelectedTextCount|bool|Hide selected text count.| | hideSearchField|bool|Hide search text field.| | headlineText|String|Set header text of filter dialog.| | backgroundColor|Color|Set background color of filter color| | listData|List<T>()|Populate filter dialog with text list. | | selectedListData|List<T>()|Marked selected text in filter dialog.| | choiceChipLabel|String Function(T item)| Display text on choice chip.| | validateSelectedItem|bool Function(List<T>? list, T item)| Identifies weather a item is selected or not| | onItemSearch|List<T> Function(List<T>? list, String text)| Perform search operation and returns filtered list| | choiceChipBuilder|Widget Function(BuildContext context, T? item, bool? isSelected)|The choiceChipBuilder is a builder to design custom choice chip.| | onApplyButtonClick|Function(List<T> list)|Returns list of items when apply button is clicked| | validateRemoveItem|List<T> Function(List<T>? list, T item)| Function Delegate responsible for delete item from list | | resetButtonText|String| Reset button text to customize or translate | | allButtonText|String| All button text to customize or translate | | selectedItemsText|String| Selected items text to customize or translate | | controlButtons|List<ControlButtonType>| configure which control button needs to be display on bottom of dialog along with 'Apply' button.| | insetPadding| EdgeInsets| The amount of padding added to the outside of the dialog.| | themeData|FilterListThemeData| Configure theme of filter dialog and widget.| | choiceChipTheme|ChoiceChipThemeData| Configure theme of choice chip.| | controlButtonBarTheme|ControlButtonBarThemeData| Configure theme of control button bar| | controlButtonTheme|ControlButtonThemeData| Configure theme of control button.| | headerTheme|HeaderThemeData| Configure theme of filter header.|

T can be a String or any user defined Model

Other Flutter packages

Name | Stars | Pub | :-------------------------|------------------------- | ------------------------- | |Empty widget | | | |Add Thumbnail | | | |Country Provider | | |

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 :coffee:

• 
• PayPal

Visitors Count

View Source