SliverGrid、SliverListを使用したUI実装

こんにちは。最近AndoridからFlutterでの開発に移転した、エキサイト株式会社の奥田です。

業務においてリストやグリッドを一緒にスクロールさせたいという要望がありました。しかし、ListView、GridViewで実装すると別々にスクロールされてしまいます。そんな問題をSliverList＆SliverGrid解決することができたので、実装方法について記述していきます。

動作バージョン

Flutter 2.8.1
Dart 2.15.1

なぜSliverListとSliverGridを使用するのか？

なぜListView、GridViewではなくSliverListとSliverGridを使用するかというと、下記に掲載した動画からの引用ですが、

ListViewとGridViewはコンテンツを別々に表示するのには最適です。しかし、もしリストやグリッドを一緒にスクロールさせたり、もっと複雑なスクロールをさせたい場合はSliverListとSliverGridを使用するのが最適です。

つまりは今回の目的であるリストやグリッドを一緒にスクロールを実現するのに最適であることがわかります。

www.youtube.com

実装部分について

下記掲載のコードで動画のようなUI、同時スクロールが可能になります。

実際にbuildした画面も掲載しますので、挙動を確認したい方はお手元の環境で実装してみてください。

class CollapsingList extends StatelessWidget {
  const CollapsingList({Key? key}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {

    final gridListItem = [
      Container(color: Colors.red, height: 150.0),
      Container(color: Colors.purple, height: 150.0),
      Container(color: Colors.green, height: 150.0),
      Container(color: Colors.orange, height: 150.0),
      Container(color: Colors.yellow, height: 150.0),
      Container(color: Colors.pink, height: 150.0),
      Container(color: Colors.cyan, height: 150.0),
      Container(color: Colors.indigo, height: 150.0),
      Container(color: Colors.blue, height: 150.0),
    ];
    
    final listItem = [
      Container(color: Colors.red),
      Container(color: Colors.purple),
      Container(color: Colors.green),
      Container(color: Colors.orange),
      Container(color: Colors.yellow),
    ];
    
    return CustomScrollView(
      slivers: [
        SliverGrid.count(
          crossAxisCount: 3,
          children: gridListItem,
        ),
        SliverFixedExtentList(
          itemExtent: 150.0,
          delegate: SliverChildListDelegate(listItem),
        ),
      ],
    );
  }
}

f:id:pomupomupurinkun:20220127202948p:plain

まとめ

SliverGrid、SliverListを使用することで当初の目的であったリストやグリッドを一緒にスクロールさせたいを解決することができました。アイテムの個数が動的に変更されても対応することが可能だったり、表示部分の描写だけをしてくれたりと使い勝手の良さそうな印象を受けました。公式のドキュメントを掲載しておきますので、より深く学習されたい方は目を通すことをおすすめします。

docs.flutter.dev