Help us understand the problem. What is going on with this article?

FlutterのStreamBuilderでFirestoreに保存されているデータを表示する

More than 1 year has passed since last update.

StreamBuilderのイメージ

まず、StreamBuilderの和訳はStreamは「流れる」、Builderは「建築者」なので「流れる建築者」という意味です。
これじゃあよくわからないですね。。

StreamBuilderのイメージは、コードの順序関係なく流れてきたデータをキャッチして処理を行う感じです。

そして2つの要素、streamとbuilderから構成されています。
では、次にコードをもとに詳細を説明します。

コード全体

main.dart
        Widget userName() {

    return StreamBuilder<QuerySnapshot>(

        //表示したいFiresotreの保存先を指定
        stream: Firestore.instance
        .collection('users')
        .document(firebaseUser.uid)
        .collection("transaction")
        .snapshots(),

        //streamが更新されるたびに呼ばれる
        builder: (BuildContext context,
            AsyncSnapshot<QuerySnapshot> snapshot) {

          //データが取れていない時の処理
          if (!snapshot.hasData) return const Text('Loading...');

          return Text(snapshot.data.documents[0]['userName']);

        }
     );
  }

表示したい場所にuserName()を記載すれば使える。

stream部分解説

main.dart
stream: Firestore.instance
        .collection('users')
        .document(firebaseUser.uid)
        .collection("transaction")
        .snapshots(),

streamでは表示したいFirestoreの保存先を指定します。そして最後に、【.snapshots()】を記載してデータを取得します。

builder部分解説

main.dart
 //streamが更新されるたびに呼ばれる
 builder: (BuildContext context,
            AsyncSnapshot<QuerySnapshot> snapshot) {

          //データが取れていない時の処理
          if (!snapshot.hasData) return const Text('Loading...');

          return Text(snapshot.data.documents[0]['userName']);

        }

builderはstreamが更新するするたびに呼ばれます。

【AsyncSnapshot<QuerySnapshot> snapshot】

一番上のこの部分で先程snapshotsで取得したデータをsnapshotに代入しています。

【if (!snapshot.hasData) return const Text('Loading...');】

この部分は、snapshotにデータが代入できていないときLoading... と表示する処理です。

【return Text(snapshot.data.documents[0]['userName']);】

最後にこの部分でデータを表示させています。
documents[0]の部分で表示させたいデータのindex番号を指定しています。['userName']で表示したいフィールド名を指定しています。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away