filter_list Plugin

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

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 list	FilterList widget	Make selection	Selected text from list

Hidden close Icon	Hidden text field	Hidden header text	Hidden full header

Customised control button	Customised selected text	Customised unselected text	Customised text field background color

Customised Choice chip	Customised Choice chip	FilterListWidget	FilterListWidget

Parameters

Parameter	Type	Description
height	double	Set height of filter dialog.
width	double	Set width of filter dialog.
borderRadius	double	Set border radius of filter dialog.
hideCloseIcon	bool	Hide close Icon.
hideheader	bool	Hide complete header section from filter dialog.
hideHeaderText	bool	If true then it will hide the header text
hideSelectedTextCount	bool	Hide selected text count.
hideSearchField	bool	Hide search text field.
searchFieldHintText	String	Set hint text in search field.
headlineText	String	Set header text of filter dialog.
closeIconColor	Color	Set color of close Icon.
headerTextColor	Color	Set color of header text.
backgroundColor	Color	Set background color of filter color
searchFieldBackgroundColor	Color	Set background color of Search field.
unselectedTextbackGroundColor	Color	Set background color of unselected text field.
selectedTextBackgroundColor	Color	Set background color of selected text field.
applyButonTextBackgroundColor	Color	Set background color of apply button.
applyButtonTextStyle	TextStyle	TextStyle for Apply button
selectedChipTextStyle	TextStyle	TextStyle for chip when selected
unselectedChipTextStyle	TextStyle	TextStyle for chip when not selected
controlButtonTextStyle	TextStyle	TextStyle for All and Reset button text
headerTextStyle	TextStyle	TextStyle for header text
searchFieldTextStyle	TextStyle	TextStyle for search field tex
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? iselected)	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)	Return the list of items filtered by the user logic
applyButtonText	String	Apply button text to customize or translate
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
controlContainerDecoration	BoxDecoration	Customize the bottom area of the dialog, where the buttons are placed
buttonRadius	double	Button border radius
buttonSpacing	double	Space between bottom control buttons
insetPadding	EdgeInsets	The amount of padding added to [MediaQueryData.viewInsets] on the outside of the dialog.
wrapAlignment	WrapAlignment	Controls the choice chips alignment in main axis.
wrapCrossAxisAlignment	wrapSpacing	Controls the choice chip within a run should be aligned relative to each other in the cross axis.
wrapSpacing	WrapAlignment	controls 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

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 ☕

• 
• PayPal

Visitors Count