1 Star 0 Fork 0

xiaofan232/flutter_plugin_filter_list

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
BSD-2-Clause

filter_list Plugin

Codemagic build status GitHub last commit Open Source Love GitHub GitHub code size in bytes GitHub stars GitHub forks

pub package Likes Popularity Pub points

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

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 GitHub stars pub package
Add Thumbnail GitHub stars pub package
Country Provider GitHub stars pub 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
BSD 2-Clause License Copyright (c) 2020, Sonu Sharma All rights reserved. Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: 1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. 2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

简介

filterList is a flutter package which provide utility to search/filter data from provided dynamic list. 展开 收起
README
BSD-2-Clause
取消

发行版

暂无发行版

贡献者

全部

近期动态

不能加载更多了
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/xiaofan232/flutter_plugin_filter_list.git
git@gitee.com:xiaofan232/flutter_plugin_filter_list.git
xiaofan232
flutter_plugin_filter_list
flutter_plugin_filter_list
master

搜索帮助