プログラミング

【Flutter】グループ単位でListViewを表示する便利なパッケージ【grouped_list】

こんにちは ゆゆう(@yuyuublog) です。

FlutterでListViewをグループ単位で表示したいと考えました。

いちから実装することもできますが、Flutter Awesomeで検索すると非常に便利なパッケージを見つけたので利用したいと思います。

grouped_listはFlutterでListViewをグループ単位で表示してくれるパッケージです。

表示イメージ

実装すると以下の画像のようにグループ単位で分けられたリストが表示されます。

実装コード

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  grouped_list: ^4.0.0

main.dart

import 'package:flutter/material.dart';
import 'package:grouped_list/grouped_list.dart';

void main() => runApp(MyApp());

List _elements = [
  {'name': 'John', 'group': 'Team A'},
  {'name': 'Will', 'group': 'Team B'},
  {'name': 'Beth', 'group': 'Team A'},
  {'name': 'Miranda', 'group': 'Team B'},
  {'name': 'Mike', 'group': 'Team C'},
  {'name': 'Danny', 'group': 'Team C'},
];

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Grouped List View Example'),
        ),
        body: GroupedListView<dynamic, String>(
          elements: _elements,
          groupBy: (element) => element['group'],
          groupComparator: (value1, value2) => value2.compareTo(value1),
          itemComparator: (item1, item2) =>
              item1['name'].compareTo(item2['name']),
          order: GroupedListOrder.DESC,
          useStickyGroupSeparators: true,
          groupSeparatorBuilder: (String value) => Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
              value,
              textAlign: TextAlign.center,
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
          ),
          itemBuilder: (c, element) {
            return Card(
              elevation: 8.0,
              margin: EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0),
              child: Container(
                child: ListTile(
                  contentPadding:
                      EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
                  leading: Icon(Icons.account_circle),
                  title: Text(element['name']),
                  trailing: Icon(Icons.arrow_forward),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

説明

pubspec.yamlに追記します。

grouped_list: ^4.0.0

パッケージをimportします。

import 'package:grouped_list/grouped_list.dart';

Widgetを作成します。

今回のコードはgithubのサンプルコードをコピペしています。

GroupedListViewが今回追加したパッケージのグループ単位で表示できるListViewです。

body: GroupedListView<dynamic, String>(
  elements: _elements,
  groupBy: (element) => element['group'],
  groupComparator: (value1, value2) => value2.compareTo(value1),
  itemComparator: (item1, item2) =>
      item1['name'].compareTo(item2['name']),
  order: GroupedListOrder.DESC,
  useStickyGroupSeparators: true,
  groupSeparatorBuilder: (String value) => Padding(
    padding: const EdgeInsets.all(8.0),
    child: Text(
      value,
      textAlign: TextAlign.center,
      style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
    ),
  ),

引数の説明

引数説明必須デフォルト値
elementsリストに表示するデータのリスト
groupBy要素をそのグループ化された値にマップする関数
itemBuilder
/ indexedItemBuilder
アイテムを定義するウィジェットを返す関数。
indexedItemBuilderは、現在のインデックスも提供します。
両方が定義されている場合、indexedItemBuilderが優先されます
どちらか
groupSeparatorBuilder
/ groupHeaderBuilder
グループヘッダーを定義するウィジェットを返す関数。 groupSeparatorBuilderは、パラメーターgroupHeaderBuilderが要素全体を取得するときに、groupBy-valueを取得します。
両方が定義されている場合、groupHeaderBuilderが優先されます
どちらか
useStickyGroupSeparatorstrueに設定すると、現在表示されているグループのグループヘッダーが一番上に表示されますfalse
floatingHeaderスティッキーグループヘッダーがリスト上に浮かぶか、それ自体のスペースを占めるかfalse
stickyHeaderBackgroundColorスティッキーヘッダーの背景色を定義します。 useStickyGroupSeparatorsが使用されている場合にのみ使用されますColor(0xffF7F7F7)
separatorグループ内のアイテム間のセパレーターを定義するウィジェットno separator
groupComparatorグループのカスタムソートを定義するために使用できます。
それ以外の場合は、自然順が使用されます
itemComparator各グループ内の要素のカスタムソートを定義するために使用できます。
それ以外の場合は、自然順が使用されます
orderGroupedListOrder.DESCに変更して、グループの並べ替えを逆にしますGroupedListOrder.ASC

まとめ

以上で簡単にグループ単位で表示するリストを作成可能です。

ありがとうございました!

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA