套件詳情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(),
)