DEV Community

Sonu Sharma 💙
Sonu Sharma 💙

Posted on

Flutter filter list package v.0.05 released on pub.dev

#flutter #widget #package

FilterList is a flutter plugin that is designed to provide ease in filter data from a list of strings.

Changelogs

  • Add FilterListWidget widget.
  • FilterList.showFilterList is renamed to FilterListDialog.display
  • Add onApplyButtonClick callback to return selected text list from FilterListDialog.display.

Package link:- https://pub.dev/packages/filter_list

Demo App link:- https://github.com/TheAlphamerc/flutter_plugin_filter_list/releases/download/v0.0.5/app-release.apk

Source code:- https://github.com/TheAlphamerc/flutter_plugin_filter_list

Data flow

  • Pass list of strings to FilterListDialog.display().
  • Pass list of selected strings to show pre-selected text otherwise ignore it.
  • Invoke method FilterListDialog.display to display filter dialog.
  • Make selection from list.
  • Click All button to select all text from the list.
  • Click Reset button to make all text unselected.
  • Click Apply button to return selected list of strings.
  • On close icon clicked it close dialog and return a null value.
  • Without making any selection Apply button is pressed it will return an empty list of string.

Getting Started

1. Add library to your pubspec.yaml 

dependencies: filter_list: ^0.0.5
Enter fullscreen mode Exit fullscreen mode

2. Import library in dart file 

import package:filter_list/filter_list.dart';
Enter fullscreen mode Exit fullscreen mode

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 = [];
Enter fullscreen mode Exit fullscreen mode

Create a function and call FilterListDialog.display() on button clicked 

 void _openFilterDialog() async { await FilterListDialog.display( context, allTextList: countList, height: 480, borderRadius: 20, headlineText: "Select Count", searchFieldHintText: "Search Here", selectedTextList: selectedCountList, onApplyButtonClick: (list) { if (list != null) { setState(() { selectedCountList = List.from(list); }); } Navigator.pop(context); }); }
Enter fullscreen mode Exit fullscreen mode

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), ), /// check for empty or null value selctedCountList 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)); }
Enter fullscreen mode Exit fullscreen mode

To display filter widget use FilterListWidget and pass list of strings to it. 

class FilterPage extends StatelessWidget { const FilterPage({Key key, this.allTextList}) : super(key: key); final List<String> allTextList; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Filter list Page"), ), body: SafeArea( child: FilterListWidget( allTextList: allTextList, height: MediaQuery.of(context).size.height, hideheaderText: true, onApplyButtonClick: (list) { if(list != null){ print("selected list length: ${list.length}"); } }, ), ), ); } }
Enter fullscreen mode Exit fullscreen mode

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
FilterListWidget N/A N/A N/A

Parameters and Value

height Type: double

  • Set height of filter dialog.

width Type: double

  • Set width of filter dialog.

borderRadius Type: double

  • Set border radius of filter dialog.

allTextList Type: List<String>()

  • Populate filter dialog with text list.

selectedTextList Type: List<String>()

  • Marked selected text in filter dialog.

headlineText Type: String

  • Set header text of filter dialog.

searchFieldHintText Type: String

  • Set hint text in search field.

hideSelectedTextCount Type: bool

  • Hide selected text count.

hideSearchField Type: bool

  • Hide search text field.

hidecloseIcon Type: bool

  • Hide close Icon.

hideheader Type: bool

  • Hide complete header section from filter dialog.

closeIconColor Type: Color

  • set color of close Icon.

headerTextColor Type: Color

  • Set color of header text.

applyButonTextColor Type: Color

  • Set text color of apply button.

applyButonTextBackgroundColor Type: Color

  • Set background color of apply button.

allResetButonColor Type: Color

  • Set text color of all and reset button.

selectedTextColor Type: Color

  • Set color of selected text in filter dialog.

selectedTextBackgroundColor Type: Color

  • Set background color of selected text field.

unselectedTextbackGroundColor Type: Color

  • Set background color of unselected text field.

unselectedTextColor Type: Color

  • Set text color of unselected text in filter dialog

searchFieldBackgroundColor Type: Color

  • Set background color of Search field.

backgroundColor Type: Color

  • Set background color of filter color.

onApplyButtonClick Type Function(List)

  • Returns list of strings when apply button is clicked

Contributing

If you wish to contribute a change to any of the existing features or add new in this repo,
please review our contribution guide,
and send a pull request. I welcome and encourage all pull requests. It usually will take me within 24-48 hours to respond to any issue or request.

Project Created & Maintained By

Sonu Sharma (Twitter) (Youtube) (Insta)

Top comments (0)