StreamBuilder と SliverList を同時に使う方法

Page content

Flutterの StreamBuilder と SliverList を同時に使う方法を紹介します。

このエントリーをはてなブックマークに追加

Cloud FireStoreなどを使っているとStreamで渡ってきた情報をリストで表示したいことが多いとお思います。

そのときにStreamBuilderを使う

Stream を使わない場合

まずStreamBuilderを使わずにSliverListを使って表示する方法を紹介します。

CustomScrollViewを使うと以下のようになります。

class SliverListPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(),
        SliverList(
          delegate: SliverChildBuilderDelegate((context, index) {
            return ListTile(
              title: Text("List:$index"),
              leading: Icon(Icons.person),
            );
          }, childCount: 100),
        ),
      ],
    );
  }
}

delegateにリストの各要素を返す処理を入れ、childCountに要素数を指定するとリストを作ってくれます。

Stream を使う場合

次にStreamBuilderSliverListを組み合わせて使ってみます。Stringのリストが渡ってくるmyStreamの場合以下のようになります。

class StreamSliverListPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(),
        StreamBuilder<List<String>>(
          stream: myStream,
          builder: (context, snapshot) {
            return SliverList(
              delegate: SliverChildBuilderDelegate((context, index) {
				return ListTile(
				  title: Text(snapshot.data[index]),
                  leading: Icon(Icons.person),
				);
              },
              childCount: snapshot.hasData ? snapshot.data.length : 0,
              ),
            );
          },
        )
      ],
    );
  }
}

StreamBuilderbuilderSliverListを返すように記述すると組み合わせて使えるようになります。 delegateにリストの各要素を返す時にsnapshotのデータを使い、childCountsnapshotの数を指定してあげます。

このエントリーをはてなブックマークに追加