FlutterでCloud Firestoreを使う（Android）

FlutterでCloud Firestoreを使う

スケルトンで作成されるカウンターアプリをFirebaseのCloud Firestoreを使用するカウンターアプリに変更したいと思います。

条件

• Flutter 2.10.3
• Cloud Firestoreのテスト開発

事前準備

• google-services.json

Firebaseで取得したgoogle-services.jsonをapp配下にコピーします。

• AndroidManifest.xml

"android.permission.INTERNET"を追加する

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.sample">

    <uses-permission android:name="android.permission.INTERNET" />

• google-servicesを追加する

build.gradle

    dependencies {
        classpath 'com.google.gms:google-services:4.3.10'
    }

/app/build.gradle

apply plugin: 'com.google.gms.google-services'

注意として、compileSdkVersion/minSdkVersion/targetSdkVersionは、適切な値に変更しましょう。

• Flutterにプラグラインを追加

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2

  # この2つを追加
  firebase_core: ^1.13.1
  cloud_firestore: ^3.1.10

Cloud Firestoreの準備

カウンターアプリを変更

• Firebaseを初期化

main.dart

import 'package:firebase_core/firebase_core.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

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

• Firebaseのインスタンスを作成

main.dart

  CollectionReference sample = FirebaseFirestore.instance.collection('sample');

• _incrementCounter()メソッドを修正

countをインクリメントして、DBを更新します。

main.dart

  void _incrementCounter() async {
    _counter++;
    await sample.doc("doc").update({
      'count': _counter
    });
  }

• Firebaseの取得

bodyの中身を修正します。
DocumentSnapshotを使用して、sample - doc - countを取得します。

main.dart

      body: StreamBuilder<DocumentSnapshot>(
          stream: sample.doc("doc").snapshots(),
          builder: (BuildContext context, AsyncSnapshot<DocumentSnapshot> snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return const Center(child: CircularProgressIndicator());
            }

            if (snapshot.hasData) {
              _counter = snapshot.data!['count'];
              return Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    const Text(
                      'You have pushed the button this many times:',
                    ),
                    Text(
                      '$_counter',
                      style: Theme.of(context).textTheme.headline4,
                    ),
                  ],
                ),
              );
            } else {
              return Container();
            }
          }
      ),

以上です。

---

以外に簡単なことですが、最新の情報がなかったり、一番簡単に操作するサンプルがなかったので自分で作成してみました。