FlutterでFirestoreと連携したリアルタイム更新

18760 ワード
Firebase Flutter AndroidStudio StreamBuilder Firestore AndroidStudio テキストリンク

はじめに

Flutterを使ってネイティブアプリを作っているが、Widgetの使い方やFirestoreとのデータ連携の仕方など、コードの書き方が分からずそれなりに苦労している。
一旦分かってしまえばかなり高速でアプリ開発ができそうなので、使い方やコードの書き方のメモを残しておく。
今回はタイトルにある通り、Firestoreと連携したリアルタイム更新のやり方ついてメモを残す。
※Flutter2をインストールした開発環境では、一部動かない部分があったため、修正を加えた記事も投稿した。【FlutterでFirestoreと連携したリアルタイム更新（Mac M1）】

Flutterの実行環境

  • Ubuntu 18.04LTS（GCP上）
  • Flutter 1.22.6
  • Dart 2.10.5
  • Android Studio 4.1.2
  • VScode 1.53.0 　　

メモ内容

事前準備として、FirestoreにTestCollectionというコレクションを作成しておき、その中にtitleというフィールドを持つドキュメントを１つだけ作成しておく。

※Firebaseへの接続が上手く行かない場合、こちらの記事を参考に。
　FlutterからCloud Firestoreのデータ取得 ＆ データ書き込み

リアルタイム更新のやり方を書く前に、まずは、リアルタイムではなくボタンをクリックして、データを追加した後に画面を更新するやり方について。setState()を利用して状態を更新する様なプログラム。

main.dart
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

void main() {
 runApp(App());
}

class App extends StatefulWidget {
 @override
  _AppPage createState() => _AppPage();
}

class _AppPage extends State<App> {
  // ボタンクリックの挙動で使う変数
  var insert_data;
  String add_number;
  String add_title;

  // Firestoreからのデータを格納しておく変数
  List<DocumentSnapshot> fire_documents;

  // ボタンクリック時のアクション内容
  set_data(){

    add_number = (fire_documents.length + 1).toString();
    add_title = 'title' '$add_number';

    insert_data = {
      'title': add_title,
    };
    Firestore.instance.collection('TestCollection').add(insert_data);

    setState(() {});
  }

 @override
 Widget build(BuildContext context) {

    return MaterialApp(
      home: Scaffold(

        // Stateの更新時に、Widgetが構築される
        body: FutureBuilder<QuerySnapshot>(
          future: Firestore.instance.collection('TestCollection').getDocuments(),
          builder:(context, snapshot) {
            if (snapshot.hasData) {

              // List<DocumentSnapshot>`をsnapshotから取り出す。
              fire_documents = snapshot.data.documents;

              return ListView.builder(
                shrinkWrap: true,
                itemCount: fire_documents.length,   //配列の長さの分だけ作成する。
                itemBuilder: (context, index) {
                  return ListTile(
                    title:Text(fire_documents[index]["title"]),
                  );
                },
              );
            } else if (snapshot.hasError) {
              return Center(child:Text('snapshot Error'));
            }
          },
        ),

        // 追加ボタン
        floatingActionButton: Container(
          margin: EdgeInsets.only(bottom: 10.0), // ボタンの配置
          //width: 40.0, // ボタンのサイズ。形にも依るが先に記載されている大きさが優先っぽい。
          //height: 40.0,

          child: FloatingActionButton.extended(
            backgroundColor: Colors.blue,
            icon: Icon(Icons.add),
            label: Text("追加"),

            // テーマ追加ボタンクリック時の処理 ⇒ ダイアログ立ち上げる
            onPressed: () => set_data(),
          ),
        ),
    ),
  );
 }
}

上記のコードは、右下のFloatingボタンをクリックすると、Firestoreにデータが追加されてsetState()することで再描画される仕組みになっている。 ※細かな作り込みはしてないので悪しからず。。。

しかし、上記のコードだと別の誰かがFirestoreに書き込みをして中身が変わっていても、Stateが更新されない限りは反映されない。
そこで、リアルタイムに反映するために使えるのがStreamBuilder。
StreamBuilderを使ったコードを書いてみると以下の様なコードになる。

main.dart
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

void main() {
 runApp(App());
}

class App extends StatefulWidget {
 @override
  _AppPage createState() => _AppPage();
}

class _AppPage extends State<App> {
 // ボタンクリックの挙動で使う変数
  var insert_data;
  String add_number;
  String add_title;

  // Firestoreからのデータを格納しておく変数
  List<DocumentSnapshot> fire_documents;

  // ボタンクリック時のアクション内容
  set_data(){
    add_number = (fire_documents.length + 1).toString();
    add_title = 'title' '$add_number';

    insert_data = {
      'title': add_title,
    };
    Firestore.instance.collection('TestCollection').add(insert_data);
  }

  @override
   Widget build(BuildContext context) {

    return MaterialApp(
      home: Scaffold(

        // リアルタイム更新  監視先は指定のコレクション全体
        body: StreamBuilder<QuerySnapshot>(
          stream: Firestore.instance.collection('TestCollection').snapshots(),
          builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {

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

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

            // user_id[array型]の中に自分のIDが含まれているドキュメントのみ取得されている
            fire_documents = snapshot.data.documents;

            // 中身のリスト表示部分
            return ListView.builder(
              // padding: const EdgeInsets.all(8),
              shrinkWrap: true,
              itemCount: fire_documents.length,   //配列の長さの分だけ作成する。
              itemBuilder: (context, index) {
                return ListTile(
                  title:Text(fire_documents[index]["title"]),
                );
              },
            );
        }),

        // 追加ボタン
        floatingActionButton: Container(
          margin: EdgeInsets.only(bottom: 10.0), // ボタンの配置
          //width: 40.0, // ボタンのサイズ。形にも依るが先に記載されている大きさが優先っぽい。
          //height: 40.0,

          child: FloatingActionButton.extended(
            backgroundColor: Colors.blue,
            icon: Icon(Icons.add),
            label: Text("追加"),

            // テーマ追加ボタンクリック時の処理 ⇒ ダイアログ立ち上げる
            onPressed: () => set_data(),
          ),
        ),
    ),);
  }
}

上記のコードは、画面上はあまり変化がない様に見えるが、試しにFirestoreにコンソールなどからデータを直接入力してみると、すぐに反映されるはず。