【Flutter】Firestoreからデータを読み込む。FutureBuilderとStreamBuilder

Flutter勉強中です。Firestone からデータを取得して表示するときに躓いてしまったので備忘録。

非推奨なメソッドや返り値の扱いに戸惑ってしまった。
FutureBuilderやStreamBuilderといかに組み合わせて使うかがポイントだった。

※Firebase.initializeApp()などの初期化は省略しています。

FutureBuilder (最初に一度だけ読み込む)

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

class HogeApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    // ★1 FutureBuilderを使う
    return FutureBuilder<QuerySnapshot>(
        // ★2 futureに`Future<QuerySnapshot>`を渡す。
        future: FirebaseFirestore.instance.collection('posts').get(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            // ★3 `List<DocumentSnapshot>`をsnapshotから取り出す。
            final List<DocumentSnapshot> documents = snapshot.data.docs;
            return ListView(
                children: documents
                    .map((doc) => Card(
                          child: ListTile(
                            title: Text(doc['text']),
                            subtitle: Text(doc['email']),
                          ),
                        ))
                    .toList());
          } else if (snapshot.hasError) {
            return Text('エラーだよ');
          }
        });
  }
}

1. FutureBuilderを使う

2. futureにFuture<QuerySnapshot>を渡す。
   FirebaseFirestore.instance.collection('posts').get()
   古いチュートリアルなどで載っているgetDocuments()は非推奨。get()を使うべし。

3. List<DocumentSnapshot>をsnapshotから取り出す。mapとかで操作するために。ここもdocumentsは非推奨。docsを使うべし。

StreamBuilder （データの更新があるたびに自動で更新）

チャットアプリなどデータの更新が頻繁なものに有効です。

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

class HogeApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // ★1 StreamBuilderを使う
    return StreamBuilder<QuerySnapshot>(
        // ★2 streamに`Stream<QuerySnapshot>`を渡す。
        stream: FirebaseFirestore.instance.collection('posts').snapshots(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            // ★3 `List<DocumentSnapshot>`をsnapshotから取り出す。
            final List<DocumentSnapshot> documents = snapshot.data.docs;
            return ListView(
                children: documents
                    .map((doc) => Card(
                          child: ListTile(
                            title: Text(doc['text']),
                            subtitle: Text(doc['email']),
                          ),
                        ))
                    .toList());
          } else if (snapshot.hasError) {
            return Text('エラーだよ');
          }
        });
  }
}

1. StreamBuilderを使う

2. streamにStream<QuerySnapshot>を渡す。
   FirebaseFirestore.instance.collection('posts'). snapshot()

3. List<DocumentSnapshot>をsnapshotから取り出す。ここは同じ。

まとめ

• FutureやStreamを渡して、builderで返り値のsnapshotを処理する
• 躓いたら公式ドキュメントやクラスの定義などを調べよう。

間違いがあれば指摘していただけるとありがたいです。

参考になったサイト

Cloud Firestore | FlutterFire

Firebaseを使ったアプリ | Flutterで始めるアプリ開発