插件详情v2.19.5

searchable_listview

一种新的、简单的方式来过滤 ListView，实现简便，并支持自定义搜索字段和空状态组件。

AndroidiOSWebmacOSWindowsLinux

pub.dev API 文档源代码

近 30 天下载: 7820
喜欢数: 267
Pub 分数: 160

安装插件

flutter pub add searchable_listview

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

一个 Flutter 包，可简化使用内置搜索栏过滤 ListView 的过程。它使开发者能够用最少的代码快速实现可搜索列表，并提供对搜索字段和空状态小部件的自定义选项。该包支持所有主要平台，设计简洁易用，非常适合需要动态内容过滤的应用程序。它通过简单直观的 API 与现有项目无缝集成。

适合场景

筛选联系人列表
搜索产品目录
仪表板中的动态数据查找
用户驱动的内容过滤
应用界面中的实时搜索

主要特点

简单实现
可自定义的搜索字段
可配置的空状态
跨平台支持
内置的筛选逻辑
最小化样板

适合对象

寻求快速搜索集成的开发者
包含大型数据集的应用程序
UI密集型应用
原型设计搜索功能
适合初学者的Flutter项目

使用建议

有限的高级筛选选项
无内置分页
需要手动处理复杂的数据结构
未针对非常大的数据集进行优化，除非进行额外优化
依赖外部状态管理进行动态更新

原始 README

以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。

Searchable ListView

An easy-to-use Flutter widget for adding a searchable, sortable, and paginated list UI. Supports synchronous lists, asynchronous data sources, expansion groups, slivers, pull-to-refresh, and many customization options.

Package: searchable_listview

Features

Filter lists on edit or submit
Support for async data sources and async filtering
Expansion-group lists with searchable group contents
Optional sort widget and custom sort predicate
Pagination and onPaginate callback
Pull-to-refresh support
Sliver-based scrolling effect
Customizable loading / error / empty widgets
Customizable search field (decoration, input type, icons, width/height)
Auto-complete hints and secondary widgets next to the search field

Installation

Add the package to your pubspec.yaml:

dependencies:
  searchable_listview: ^2.19.5

Then run:

flutter pub get

Quick Start

Basic synchronous list example:

SearchableList<Actor>(
  initialList: actors,
  itemBuilder: (actor) => ActorItem(actor: actor),
  filter: (query) => actors
      .where((a) => a.name.toLowerCase().contains(query.toLowerCase()))
      .toList(),
  emptyWidget: const Center(child: Text('No results')),
  inputDecoration: InputDecoration(labelText: 'Search actor'),
)

Async list example

Use the .async constructor when data comes from a Future and you need to filter the returned list:

SearchableList<Actor>.async(
  asyncListCallback: () async => await fetchActors(),
  asyncListFilter: (query, list) =>
      list.where((a) => a.name.contains(query)).toList(),
  itemBuilder: (actor) => ActorItem(actor: actor),
  loadingWidget: const Center(child: CircularProgressIndicator()),
  errorWidget: const Center(child: Icon(Icons.error)),
)

Expansion groups

For grouped/expansion lists use the .expansion constructor:

SearchableList<Actor>.expansion(
  expansionListData: mapOfActors,
  expansionTitleBuilder: (key) => Text(key.toString()),
  filterExpansionData: (query) => {
    for (final entry in mapOfActors.entries)
      entry.key: (mapOfActors[entry.key] ?? [])
          .where((a) => a.name.contains(query))
          .toList()
  },
  expansionListBuilder: (index, actor) => ActorItem(actor: actor),
)

Sliver list

Use .sliver to embed a searchable list inside sliver scroll views:

SearchableList<Actor>.sliver(
  initialList: actors,
  itemBuilder: (actor) => ActorItem(actor: actor),
  filter: (q) => actors.where((a) => a.name.contains(q)).toList(),
)