Flutter,Firebase : DocumentSnapshot型の値の取得方法、

Question

https://firebase.flutter.dev/docs/firestore/usage#document--query-snapshots

import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:flutter_signin_button/button_builder.dart';

import './register_page.dart';
import './signin_page.dart';

import 'package:cloud_firestore/cloud_firestore.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(AuthExampleApp());
}

/// The entry point of the application.
///
/// Returns a [MaterialApp].
class AuthExampleApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Firebase Example App',
        theme: ThemeData.dark(),
        home: Scaffold(
          body: AuthTypeSelector(),
        ));
  }
}

/// Provides a UI to select a authentication type page
class AuthTypeSelector extends StatelessWidget {
  // Navigates to a new page
  void _pushPage(BuildContext context, Widget page) {
    Navigator.of(context).push(
      MaterialPageRoute<void>(builder: (_) => page),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Firebase Example App"),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(
            child: SignInButtonBuilder(
              icon: Icons.person_add,
              backgroundColor: Colors.indigo,
              text: 'Registration',
              onPressed: () => _pushPage(context, RegisterPage()),
            ),
            padding: const EdgeInsets.all(16),
            alignment: Alignment.center,
          ),
          Container(
            child: SignInButtonBuilder(
              icon: Icons.verified_user,
              backgroundColor: Colors.orange,
              text: 'Sign In',
              onPressed: () => _pushPage(context, SignInPage()),
            ),
            padding: const EdgeInsets.all(16),
            alignment: Alignment.center,
          ),
          UserInformation(),
        ],
      ),
    );
  }
}

class UserInformation extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    CollectionReference users = FirebaseFirestore.instance.collection('users');
    users.get().then((QuerySnapshot querySnapshot) {
      querySnapshot.docs.forEach((doc) {
        //↓docはDocumentSnapshot型なのでこの形の参照で値が得られるのか?
        print('????${doc["full_name"]},${doc.runtimeType},${doc.reference}');

        //↓doc.data()の返り値はMap<String,dynamic>なのでこの形で値が得られることに
        //全く疑問は無い。
        print('????${doc.data()["full_name"]}');
      });
    });

    return StreamBuilder<QuerySnapshot>(
      stream: users.snapshots(),
      builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
        if (snapshot.hasError) {
          return Text('Something went wrong');
        }

        if (snapshot.connectionState == ConnectionState.waiting) {
          return Text("Loading");
        }

        //ListViewをColumnの中に入れようとするとエラーが出るので、
        //↓Expandedでラップする必要がある。
        return Expanded(
          child: new ListView(
            children: snapshot.data.docs.map((DocumentSnapshot document) {
              return new ListTile(
                title: new Text(document.data()['full_name']),
                subtitle: new Text(document.data()['company']),
              );
            }).toList(),
          ),
        );
      },
    );
  }
}

//result
flutter: ????Test Tarou,QueryDocumentSnapshot,DocumentReference(users/CgewvkhWjYeuW5trtFJ8)
flutter: ????Test Tarou
flutter: ????Test Jirou,QueryDocumentSnapshot,DocumentReference(users/CzyuXDo6TQuKATaOuKeU)
flutter: ????Test Jirou
flutter: ????Test Sabu,QueryDocumentSnapshot,DocumentReference(users/nww8lBuC8j2q05cXQBUA)
flutter: ????Test Sabu
flutter: ????Test Gorouxx,QueryDocumentSnapshot,DocumentReference(users/rQhMqCKtlwLPtiKK0azZ)
flutter: ????Test Gorouxx
flutter: ????Test Tarou,QueryDocumentSnapshot,DocumentReference(users/CgewvkhWjYeuW5trtFJ8)
flutter: ????Test Tarou
flutter: ????Test Jirou,QueryDocumentSnapshot,DocumentReference(users/CzyuXDo6TQuKATaOuKeU)
flutter: ????Test Jirou
flutter: ????Test Sabu,QueryDocumentSnapshot,DocumentReference(users/nww8lBuC8j2q05cXQBUA)
flutter: ????Test Sabu
flutter: ????Test Gorouxx,QueryDocumentSnapshot,DocumentReference(users/rQhMqCKtlwLPtiKK0azZ)
flutter: ????Test Gorouxx

FlutterFireのドキュメントのサンプルを動かしていたのですが、
二つ疑問が発生しました。

(1)コードのコメントにも書いてますが、
querySnapshot.docs.forEach
のコールバックの引数docはDocumentSnapshot型だと思うのですが、
doc["full_name"]の形で、各ドキュメントの"full_name"フィールドの値を取得できています。
これに違和感を感じているのですが、DocumentSnapshot型はMap型なのでしょうか?
document_snapshot.dartを見てもそのようには見えないのですが、
Map型じゃないのに
doc["full_name"]の形で値が取得できるのでしょうか。
まあできているのですが。
というかdoc["full_name"]で値が取得できるのならdata()メソッドは必要ないんじゃないか、
と思ってしまいます。

(2)'users'コレクションには現在ドキュメントが四つ存在しているのですが、
なぜか4つのドキュメントが2回、4✖️2=8回コンソールに表示されています。
上記のコードだと各ドキュメントが1回ずつ、つまり4回表示されるはずだと思うのですが、
なぜ各ドキュメントが2回表示されるのでしょうか。

Answer 1

(1) doc["full_name"]の形でアクセスできるのは、以下の様に、[]演算子のオーバーライドが実装されているからです。doc["full_name"]と書けば、get("full_name")が呼ばれることになります。

dynamic operator [](dynamic field) => get(field);

data()メソッドと[]演算子(get()メソッド)の違いですが、前者は、Mapを返すだけなので、もし存在しないフィールド名でアクセスしても、nullを返すだけですが、後者は、例外を返します。また、後者は、FieldPathクラスを渡すこともでき、マップで入れ子になっているデータにも一気にアクセスすることができます。

doc[FieldPath(['name', 'first'])];

(2) おそらく、buildメソッドが２回動いたのだと思います。buildメソッドは複数回動くものだと想定しておいて下さい。

Comments

[moriman]

回答を頂きましてありがとうございました。

(1)確かにありますね(笑)二つの違いも納得できました。
(2)なるほどですね。そう言われれば確かにそうですね、その発想は思いつきませんでした。
ちょっともう、Flutterの中の話になると考えてもキリがない、というか限界があると思うのですが、
一応少し試したみた結果、
停止→再実行すると一回の表示でした。
Hot Restartすると、質問文に記載したように二回表示されました。
昨日はHot Restartしていたような気がします。
はっきりとは分かりませんが、再実行とHot Restartの違いなのかもしれません。

streamでもそうですし、それ以外の状態管理でも、状態が変わるたびにbuildメソッドが実行されるというのはそうですよね。
ありがとうございました。