FireStoreの値を取得する

FireStoreの学習をやってみた。

参考にしたサイト
日本語の記事（こちらを参考にした）
https://flutternyumon.com/firestore-get-realtime-data/
公式ドキュメント
StreamBuilderについて書かれた公式ドキュメント
https://api.flutter.dev/flutter/widgets/StreamBuilder-class.html

開発環境

• macOS Monterey
• flutter2.10.3

やろうと思った理由
Firebaseとの接続をするときの知識が、まだ足りていないので、StatefulWidgetで先ずやってみようと思った。
コピペだけだと勉強にならないので、コードを書き換えたりFirebaseのフィールドを追加してみた。

main.dart

//ソース
import 'package:firebase_core/firebase_core.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  //ステップ１
  final _firestore = FirebaseFirestore.instance;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Chat')),
        body: SafeArea(
          //ステップ２
          child: StreamBuilder(
            stream: _firestore.collection('messages').snapshots(),
            builder:
                (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
              if (snapshot.hasError) {
                return const Center(
                  child: Text('取得できませんでした'),
                );
              }

              if (!snapshot.hasData) {
                return const Center(
                  child: Text("Loading"),
                );
              }

              return ListView(
                children: snapshot.data!.docs.map((DocumentSnapshot document) {
                  Map<String, dynamic> message =
                      document.data()! as Map<String, dynamic>;
                  return Card(
                    color: Colors.grey[100],
                    child: ListTile(
                      title: Text(
                        document['text'],
                        style: const TextStyle(
                            fontSize: 20,
                            fontWeight: FontWeight.bold,
                            color: Colors.black87),
                      ),
                      subtitle: Text(document['subtext']),
                    ),
                  );
                }).toList(),
              );
            },
          ),
        ),
      ),
    );
  }
}

Cloud Firestore データモデル
文字の書き方が理解できた気がする🤔

messages:
  text: ""
  subtext: ""

公式のドキュメント
https://firebase.google.com/docs/firestore/data-model?hl=ja#documents

ドキュメント内の複雑なネストされたオブジェクトはマップと呼ばれるらしい?
ドキュメントは JSON によく似ており、実際基本的には JSON と同じです。
一般的にドキュメントは軽量の JSON レコードとして扱うことができます。
RDBと構造が違うから、慣れるまでは難しそう...