8
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-11-27

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で始めるアプリ開発

8
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?