Flutterでリストとスクロールしないグリッドを組み合わせる

Flutterでアプリ開発をしていてリストのセクション内のアイテムをグリッド状に表示したい場面があり、実装できたので紹介します。

使うWidget

実装に使うWidgetは以下の３つです。

• CustomScrollView
• SliverList
• SliverGrid

CustomScrollViewの中にSliverListとSliverGridを子Widgetとして格納します。

CustomScrolView

CustomScrollViewには表示したいWidgetを格納します。

今回はSliverListとSliverGridを格納します。

Sliver系のWidget以外も配置することが可能です。

SliverList

SliverListはパラメータにSliverChildListDelegateを設定します。

SliverChildListDelegateのパラメータには表示したいWidgetの配列を格納します。

SliverList(
  delegate: SliverChildListDelegate(
    [
      ...,
    ],
  ),
)

SliverGrid

SliverGridはパラメータにSliverChildListDelegateとSliverGridDelegateWithFixedCrossAxisCountを設定します。

SliverChildListDelegateはSliverListと同様に表示するWidgetの配列を格納します。

SliverGridDelegateWithFixedCrossAxisCountは一列に表示する要素の数を設定します。

SliverGrid(
  delegate: SliverChildListDelegate(
		[
		...,
		]
	),
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
  ),
)

実装例

CustomScrollView(
    slivers: [
      SliverList(
        delegate: [
					...
				],
      ),
      SliverGrid(
        delegate: [
					...
				],
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
        ),
      ),
    ],
  );
}

SliverListとSliverGridを組み合わせることで簡単に実現したいレイアウトを実装することができました。

ネイティブでは結構面倒なこともFlutterを使えば簡単に実装できるのもFlutterの良いところだと思います。