見出し画像

Flutter firestore基礎

公式ドキュメント読みながら、firestoreの基礎を学習。
データベースにあるデータを画面に表示するってのをやりたい。

まず、インスタンスを作る。
FirebaseFirestore firestore = FirebaseFirestore.instance;

というかインスタンスってなに?って感じだけど、オブジェクトのことかな。classは設計図であって、実際に使う際は作る必要がある。なので、インスタンスを作る。マジックザギャザリングのインスタンスなら知ってる。

このインスタンスを作ることで、firestoreとやりとりできるようになるようだ。

次、データベースにデータを追加する場合。

instance.collection("コレクション名")で、コレクションリファレンスなるものを作ると、
collectionReference.add()が使える。この中身はMAPで、{キー:内容}を入れる。.thenやcatchErrorもあるようだ。テキストボタンを押すと、addUserメソッドが実行される。オッケー、なんとなくわかった。

class AddUser extends StatelessWidget {
  final String fullName;
  final String company;
  final int age;

  AddUser(this.fullName, this.company, this.age);

  @override
  Widget build(BuildContext context) {
    // Create a CollectionReference called users that references the firestore collection
    CollectionReference users = FirebaseFirestore.instance.collection('users');

    Future<void> addUser() {
      // Call the user's CollectionReference to add a new user
      return users
          .add({
            'full_name': fullName, // John Doe
            'company': company, // Stokes and Sons
            'age': age // 42
          })
          .then((value) => print("User Added"))
          .catchError((error) => print("Failed to add user: $error"));
    }

    return TextButton(
      onPressed: addUser,
      child: Text(
        "Add User",
      ),
    );
  }
}

次は、読みこみ。

リアルタイム更新ではなく、一回のみ読み込み。

ドキュメントIdと言うstring型のIDが必要。

FutureBuilder<DocumentSnapShot>()で、読み込むようだ、
プロパティが2つあり、
futureとbuilderがある。
futureには、
コレクションリファレンス.doc(documentId).get(),
builderには、(context 、snapshot){ }みたいなメソッド。
future: users.doc(documentId).get(),
builder: (BuildContext context, AsyncSnapshot<DocumentSnapshot> snapshot) {}
futureで読み込んだデータを格納し、ビルダーで表示するってことかな。
メソッド内は、
{Map<String, dynamic> data = snapshot.data!.data() as Map<String, dynamic>;
return Text("Full Name: ${data['full_name']} ${data['last_name']}");
これは、firestoreのスナップショットと言うデータをflutterで使えるマップと言うデータに変換感しているのかな。
表示は、
return Text("Full Name: ${data['full_name']} ${data['last_name']}");
ん、lastnameってどこから来たんだ???
まあいいか無視しよう。

class GetUserName extends StatelessWidget {
  final String documentId;

  GetUserName(this.documentId);

  @override
  Widget build(BuildContext context) {
    CollectionReference users = FirebaseFirestore.instance.collection('users');

    return FutureBuilder<DocumentSnapshot>(
      future: users.doc(documentId).get(),
      builder:
          (BuildContext context, AsyncSnapshot<DocumentSnapshot> snapshot) {

        if (snapshot.hasError) {
          return Text("Something went wrong");
        }

        if (snapshot.hasData && !snapshot.data!.exists) {
          return Text("Document does not exist");
        }

        if (snapshot.connectionState == ConnectionState.done) {
          Map<String, dynamic> data = snapshot.data!.data() as Map<String, dynamic>;
          return Text("Full Name: ${data['full_name']} ${data['last_name']}");
        }

        return Text("loading");
      },
    );
  }
}

とりあえずできた。細かい使い方を引き続き見ていく。

この記事が気に入ったらサポートをしてみませんか?