📘

【Flutter Widget of the Week #12】SliverList & SliverGridを使ってみた

2022/10/15に公開

Flutter

初心者

sliver

tech

はじめに

Flutter Widget of the Week #12 SliverList & SliverGrid についてまとめましたので、紹介します。
https://youtu.be/ORiTTaVY6mM

SliverList & SliverGrid とは

ListView や GridView は List や Grid を別々にスクロールさせたいときは最適です。

List や Grid の中身はスクロールできるが List や Grid 自体のスクロールはできない
しかし、List と Grid をまとめてスクロールしたり他の複雑なスクロール効果を作成したりしたい場合は今回紹介する SliverList と SliverGrid を使うのが効果的です。
SliverList や SliverGrid
List と Grid を一緒にスクロールできる
Sliver はスクロールできる領域の一部分として扱うことができ、CustomScrollViewのひとつの要素になります。
なので、List と Grid の組み合わせだけでなく、 List と List、 Grid と Gridのようにアイテムの種類は同じだけど、入れる内容が異なる Silver を集めても、スクロールできる一つの領域として扱うことができる便利な Widget なのです。
次に SliverList と SliverGrid それぞれについて説明します。

SliverList

CustomScrollView で垂直方向にスクロールできるアイテムのリストを表示できます。

(new) SliverList SliverList(
  {
    Key? key,
    required SliverChildDelegate delegate
  }
)

SliverList は delegate パラメータを取ります。
delegete パラメータは、スクロールして次のアイテムが表示されそうになったときにそのアイテムをビルドするための関数を設定します。
delegeteパラメータには、SliverChildListDelegate か SliverChildBuilderDelegate が使われています。

SliverChildListDelegate について

SliverChildListDelegate は以下のように実際の children のリストを指定したいときに使います。

SliverList(
  delegate: SliverChildListDelegate(
    [
      Container1(),  //widget
      Container2(),  //anotherWidget
      Container3().  //yetAnotherWidget
      ・・・            // children 内に入れた Widgte の分だけリストとして表示される
    ],
  ),
),

SliverChildBuilderDelegate について

SliverChildBuilderDelegate は膨大な数のアイテムを持つリストに適していて、アイテムをビルドする関数を指定して List を作ります。

SliverList(
  delegate: SliverChildBuilderDelegate(
    (BuildContext context, int index) {
      return Container();  //widget・・・ここで指定した Widget が複数作られる
    },
  ),
);

SliverList サンプルコード

main.dart

class SliverListSample extends StatefulWidget {
  const SliverListSample({super.key});

  @override
  State<SliverListSample> createState() => _SliverListSampleState();
}

class _SliverListSampleState extends State<SliverListSample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          const SliverAppBar(
            backgroundColor: Colors.green,
            title: Text('Silver List'),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return Card(
                  margin: const EdgeInsets.all(15),
                  child: Container(
                    color: Colors.orange[100 * (index % 12 + 1)],
                    height: 60,
                    alignment: Alignment.center,
                    child: Text(
                      "List Item $index",
                      style: const TextStyle(fontSize: 30),
                    ),
                  ),
                );
              },
              childCount: 10,
            ),
          ),
        ],
      ),
    );
  }
}

SliverGrid

CustomScrollView で水平方向にスクロールできるアイテムのリストを表示できます。

(new) SliverGrid SliverGrid({
  Key? key,
  required SliverChildDelegate delegate,
  required SliverGridDelegate gridDelegate,
})

SliverGrid には delegate パラメータと gridDelegate パラメータがあります。
delegate パラメータは SliverList で説明したのと同じです。
gridDelegate パラメータは Grid のサイズと位置を設定するパラメータで、
SliverGridDelegateWithFixedCrossAxisCount や SliverGridDelegateWithMaxCrossAxisExtent などが使われます。

SliverGrid には他にも SliverGrid.count と SliverGrid.extent が使えます。

SliverGrid.count について

SliverGrid.count はリスト内のアイテムが水平方向にスクロールでき、かつ項目数を固定する場合に使用されます。
SliverGrid.count のコンストラクタは以下のようになってます。

(new) SliverGrid SliverGrid.count({
  Key? key,
  required int crossAxisCount,  // 列の数
  double mainAxisSpacing = 0.0,  // アイテムとアイテムの縦の隙間の幅
  double crossAxisSpacing = 0.0,  // アイテムとアイテムの横の隙間の幅
  double childAspectRatio = 1.0,  // アスペクト比 「横幅/高さ」
  List<Widget> children = const <Widget>[],
})

SliverGrid.extent について

SliverGrid.extent はリスト内のアイテムが水平方向にスクロールでき、かつアイテムの数が既知の場合に使用されます。
SliverGrid.extent のコンストラクタは以下のようになってます。

(new) SliverGrid SliverGrid.extent({
  Key? key,
  required double maxCrossAxisExtent, // 一つのアイテムの横幅
  double mainAxisSpacing = 0.0, // アイテムとアイテムの縦の隙間の幅
  double crossAxisSpacing = 0.0,  // アイテムとアイテムの横の隙間の幅
  double childAspectRatio = 1.0, // アスペクト比 「横幅/高さ」
  List<Widget> children = const <Widget>[],
})

SliverGrid サンプルコード