パッケージ、リポジトリ、アプリカテゴリを検索

ducafecatFlutter エコシステムナビ
grouped_list のカバー
パッケージ詳細v6.0.0

grouped_list

FlutterのListViewで、リスト項目をセクションにグループ化できます。

AndroidiOSWebmacOSWindowsLinux
pub.dev API ドキュメント ソースコード
30日間ダウンロード
16.2万
いいね数
1620
Pub ポイント
150

パッケージをインストール

flutter pub add grouped_list

パッケージ概要

公開情報に基づく選定ガイドです。参考としてご利用ください。

Flutterパッケージで、折りたたみ可能または非折りたたみ可能なセクションに整理されたアイテムを含むListViewを作成できます。開発者がグループヘッダーを定義し、アイテムのグループ化ロジックを効率的に管理できるようにすることで、グループ化データの表示を簡素化します。連絡先、カレンダー、カテゴリ別コンテンツなどのリストに最適で、カスタムスタイルと動的更新をサポートしています。このパッケージは軽量であり、すべての主要プラットフォームで既存のFlutterアプリにスムーズに統合されます。

用途

  • 分類された連絡先を表示しています
  • 時刻に基づくイベントリストの表示
  • 折りたたみ可能な製品カテゴリの作成
  • 日付別にユーザー生成コンテンツを整理する
  • 構造化ナビゲーションメニューの作成

主な機能

  • セクションヘッダーをサポート
  • 折りたたみ可能なグループを許可します
  • カスタマイズ可能なグループおよびアイテムビルダー
  • 効率的なリストレンダリング
  • クロスプラットフォーム互換性
  • 動的データの更新

適している対象

  • 構造化リストを構築する開発者
  • グループ化されたデータ表示を必要とするアプリ
  • 折りたたみ可能なセクションを必要とするプロジェクト
  • 階層構造をもつコンテンツの UI
  • マルチプラットフォームアプリ用にFlutterを使用するチーム

注意事項

  • グループデータ構造の手動処理が必要
  • 制限された組み込みの並べ替えオプション
  • 複雑なグループ化には追加の論理が必要になる可能性があります
  • ページングなしの極めて大きなデータセットに対して最適化されていない
  • ヘッダーのカスタマイズにはウィジェットの構成についての理解が必要です

元の README

関連するソースリポジトリの README 原文のスナップショットです。最新の内容はリポジトリをご覧ください。

Grouped list package for Flutter.

pub package package publisher build

A flutter ListView in which list items can be grouped to sections.

Features
  • Sound null safety support!
  • Easy creation of chat dialog.
  • List Items can be separated in groups.
  • For the groups an individual header can be set.
  • Almost all fields from ListView.builder available.

Getting Started

Add the package to your pubspec.yaml:

 grouped_list: ^6.0.0

In your dart file, import the library:

import 'package:grouped_list/grouped_list.dart';

Instead of using a ListView create a GroupedListView Widget:

 GroupedListView<dynamic, String>(
   elements: _elements,
   groupBy: (element) => element['group'],
   groupSeparatorBuilder: (String groupByValue) => Text(groupByValue),
   itemBuilder: (context, dynamic element) => Text(element['name']),
   itemComparator: (item1, item2) => item1['name'].compareTo(item2['name']), // optional
   useStickyGroupSeparators: true, // optional
   floatingHeader: true, // optional
   order: GroupedListOrder.ASC, // optional
   footer: Text("Widget at the bottom of list"), // optional
 ),
Parameters:
Name Description Required Default value
elements A list of the data you want to display in the list required -
groupBy Function which maps an element to its grouped value required -
itemBuilder / indexedItemBuilder / interdependentItemBuilder / grouItemBuilder Function which returns an Widget which defines the item.
* indexedItemBuilder provides the current index as well.
* interdependentItemBuilder provides the previous and next items as well.
* groupItemBuilder provides information if the item is the first or last element inside a group.
indexedItemBuilder is preferred over interdependentItemBuilder and interdependentItemBuilder is preferred overitemBuilder.		 yes, either of them -
groupSeparatorBuilder / groupHeaderBuilder Function which returns a Widget which defines the group headers. While groupSeparatorBuilder gets the groupBy-value as parameter groupHeaderBuilder gets the whole element. If both are defined groupHeaderBuilder is preferred yes, either of them -
groupStickyHeaderBuilder Function which returns a Widget which defines the sticky group header, when useStickyGroupSeparators is true. If not defined groupSeparatorBuilder or groupHeaderBuilder will be used as described above. no -
useStickyGroupSeparators When set to true the group header of the current visible group will stick on top no false
floatingHeader Whether the sticky group header float over the list or occupy it's own space no false
stickyHeaderBackgroundColor Defines the background color of the sticky header. Will only be used if useStickyGroupSeparators is used no Color(0xffF7F7F7)
separator A Widget which defines a separator between items inside a group no no separator
groupComparator Can be used to define a custom sorting for the groups. Otherwise the natural sorting order is used no -
itemComparator Can be used to define a custom sorting for the elements inside each group. Otherwise the natural sorting order is used no -
order Change to GroupedListOrder.DESC to reverse the group sorting no GroupedListOrder.ASC
footer Widget at the bottom of the list no -

Also the fields from ListView.builder can be used.

Highlight - SilverGroupedList

Now supporting a grouped list based on a silver list. Just use SilverGroupedListView instead of GroupedListView. An example can be found under example/lib/example_silver. Note that some options of the GroupedListView are currently not available in SilverGroupedListView.

Highlight - Chat Dialog

Easy creation of chat dialogs. Just set the option reverse to true and order to GroupedListOrder.DESC. A full example can be found in the examples. The list will be scrolled to the end in the initial state and therefore scrolling will be against redeaing direction.

My other packages :

For easy creation of chat-like dialogs:

Check out my other package StickyGroupedList, which is based on the scrollable_positioned_list.

カテゴリー

リスト

ソースリポジトリ

このパッケージを使用しているプロジェクト