Open5

[Flutter] Firebase環境構築 -> FireStoreの利用

gonCgonC

必要なコマンドラインツールをインストール

  1. FirebaseCLIをインストール
  2. GoogleアカウントでFirebaseにログイン
$ firebase login
  1. 任意のディレクトリで次のコマンドを実行して、FlutterFire CLI をインストール
$ dart pub global activate flutterfire_cli
gonCgonC

FirebaseとFlutterアプリを接続する

flutterfire configure

Flutter アプリでサポートされているプラットフォーム(iOS、Android、ウェブ)を選択するよう求められ、選択したプラットフォームごとに、FlutterFire CLI によって Firebase プロジェクトに Firebase アプリが新規作成される。

gonCgonC

アプリでFirebaseを初期化する

  1. Flutterプロジェクトディレクトリで、次のコマンドを実行
flutter pub add firebase_core
  1. Flutterプロジェクトディレクトリで次のコマンドを実行して、FlutterアプリのFirebase構成を最新にする
flutterfire configure
  1. lib/main.dart ファイルで、Firebase Core プラグインと、以前に生成した構成ファイルをインポート
main.dart
import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';
  1. lib/main.dart ファイルで、構成ファイルによってエクスポートされた DefaultFirebaseOptions オブジェクトを使用して Firebase を初期化する
main.dart
await Firebase.initializeApp(
  options: DefaultFirebaseOptions.currentPlatform,
);
gonCgonC

Cloud Firestore データベースを作成する

  1. まだ Firebase プロジェクトを作成していない場合は作成します。Firebase コンソールで [プロジェクトを作成] をクリックし、画面の指示に沿って、Firebase プロジェクトを作成するか、既存の GCP プロジェクトに Firebase サービスを追加します。
  2. Firebase コンソールの [Cloud Firestore] セクションに移動します。既存の Firebase プロジェクトを選択するよう求められます。データベース作成ワークフローに従います。
  3. Cloud Firestore セキュリティ ルールの開始モードを選択します。→テストモードでOK
  4. データベースのロケーションを選択します。

プラグインをインストール

Flutter プロジェクトのルートから、次のコマンドを実行してプラグインをインストール

flutter pub add cloud_firestore

完了したら、Flutter アプリケーションを再ビルド

flutter run
gonCgonC

Firestore実装例

カスタムクラスを作成

city.dart
class City {
  final String? name;
  final String? state;
  final String? country;
  final bool? capital;
  final int? population;
  final List<String>? regions;

  City({
    this.name,
    this.state,
    this.country,
    this.capital,
    this.population,
    this.regions,
  });

  factory City.fromFirestore(
    DocumentSnapshot<Map<String, dynamic>> snapshot,
    SnapshotOptions? options,
  ) {
    final data = snapshot.data();
    return City(
      name: data?['name'],
      state: data?['state'],
      country: data?['country'],
      capital: data?['capital'],
      population: data?['population'],
      regions:
          data?['regions'] is Iterable ? List.from(data?['regions']) : null,
    );
  }

  Map<String, dynamic> toFirestore() {
    return {
      if (name != null) "name": name,
      if (state != null) "state": state,
      if (country != null) "country": country,
      if (capital != null) "capital": capital,
      if (population != null) "population": population,
      if (regions != null) "regions": regions,
    };
  }
}

ドキュメントを追加

final city = City(
  name: "Los Angeles",
  state: "CA",
  country: "USA",
  capital: false,
  population: 5000000,
  regions: ["west_coast", "socal"],
);
final docRef = db
    .collection("cities")
    .withConverter(
      fromFirestore: City.fromFirestore,
      toFirestore: (City city, options) => city.toFirestore(),
    )
    .doc("LA");
await docRef.set(city);

ドキュメントを更新

final washingtonRef = db.collection("cites").doc("DC");
washingtonRef.update({"capital": true}).then(
    (value) => print("DocumentSnapshot successfully updated!"),
    onError: (e) => print("Error updating document $e"));

ドキュメントの削除

db.collection("cities").doc("DC").delete().then(
      (doc) => print("Document deleted"),
      onError: (e) => print("Error updating document $e"),
    );

ドキュメントの取得

final docRef = db.collection("cities").doc("SF");
docRef.get().then(
  (DocumentSnapshot doc) {
    final data = doc.data() as Map<String, dynamic>;
    // ...
  },
  onError: (e) => print("Error getting document: $e"),
);

コレクション内の全てのドキュメントを取得する

db.collection("cities").get().then(
  (querySnapshot) {
    print("Successfully completed");
    for (var docSnapshot in querySnapshot.docs) {
      print('${docSnapshot.id} => ${docSnapshot.data()}');
    }
  },
  onError: (e) => print("Error completing: $e"),
);