flutter

[Flutter] 2020年10月版_FlutterからCloud Firestore(Firebase)に繋げてみた

概要

Flutterを使って、Cloud Firestore(Firebase)に繋げてみる。

2020年10月15日時点で、Firebaseのデーターベースに繋げる際に、他のサイトでは公式サイトとは異なっていたためメモとして残しておく。

環境

$ flutter doctor
[✓] Flutter (Channel stable, v1.17.3, on Mac OS X 10.15.7 19H2, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 12.0.1)
[✓] Android Studio (version 4.0)
[✓] IntelliJ IDEA Community Edition (version 2020.1.1) specific functionality.
[✓] VS Code (version 1.50.0)
[✓] Connected device (1 available)

 

最終的イメージ

画面イメージ

最終的に以下のように、Firebaseのデータベースに登録した2つのデータをリスト形式( ListTile() )で表示します。

最終的な画面イメージ

データベース内容

DB情報

コレクション名:users

フィールド:title

タイプ:string

値:1つめのタイトルです

前提

  • Flutterの環境構築が出来ていること
  • Android Studio で Flutterプロジェクトが作成済みであること
  • iOSエミュレーターが起動出来ていること
  • Googleアカウントを所持していること

手順

基本的に、Firebase の Docs を元に進めます。

実装コードのみ確認したい方は、こちらの手順から。

1.環境を設定する

環境設定は出来ている前提のため次へ進めます。

2.Firebase プロジェクトを作成

firebaseのコンソールにアクセスします。(firebaseのコンソール情報は こちら

2-1.「プロジェクトを追加」を押下

プロジェクトを追加

2-2.任意のプロジェクト名を入力

プロジェクトに名前をつける

今回は「test」とします。

プロジェクトの名前をつける

2-3.「続行」を押下する

Googleアナリティクス

2-4.デフォルトアカウントを選択して「プロジェクトを作成」を押下する

プロジェクト作成中

プロジェクト作成完了

 

3.Firebase を使用するようにアプリを構成する

3-1.ワークフローを起動

iOSアイコンを押下する。

iOSアプリを構成する

 

3-2.iOSバンドルID

3-2-1.iOSバンドルIDを確認するために、Android Studio を起動する。

3-2-2.ターミナルウィンドウで「open ios」と入力する。(もしくはflutterプロジェクトのiosディレクトを開く。)

3-2-3.「Runner.xcworkspace」を開く。

3-2.4.左メニューの「Runner」タブを選択、Generalタブが開き「Bundle Identifier」の値をコピーする。

3-2-5.FirebaseのWebUIの「iOSバンドルID」の欄に、3-2.4 でコピーした値を貼り付ける。

3-3.アプリのニックネーム

任意の名前を入力する。

3-4.App Store ID

空欄で問題ありません。

3-5.アプリを登録を押下

3-6.設定ファイルのダウンロード

3-7.設定ファイルの配置

ダウンロードした設定ファイルを、3-2-3で開いた「Runner.xcworkspace」UI上のRunnerディレクトリにコピーする。

設定ファイル設置

 

4.Flutter Fire プラグインを追加する

4-1.pubspec.yaml ファイルに2つのパッケージ(firebase_core、cloud_firestore)を追加する。

2020年10月XX日時点では以下のバージョンが最新となっています。

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^0.1.3
  firebase_core: ^0.5.0+1
  cloud_firestore: ^0.14.1+3

 

最新バージョンを確認したい場合は、こちらを参照してください。(ページ下部の参考サイトにも記載しています。)

4-2.パッケージを取得

pub get コマンドを実行するか、Android Studio では、 pub get ボタン(リンク)を押下して、パッケージを取得します。

 

5.データベース作成

5-1.Firebaseを開く

FirebaseのWebUIを開く。

5-2.Cloud Firestoreの作成

5-2-1.左メニューの開発タブの中にある「Cloud Firestore」を押下する。

5-2-2.「データベースの作成」を押下する。

データベース作成

5-2-3.「テストモードで開始する」を選択し、次へを押下する。

モード選択

5-2-4.ロケーションはデフォルトのままで、有効にするを押下する。

ロケーション選択

 

6.データベースデータ登録

6-1.コレクションを開始を押下する

コレクションの登録

6-2.コレクションIDを入力する

コレクションID入力

6-3.各項目を入力する

6-3-1.ドキュメントIDは自動採番を押下する。

6-3-2.今回はフィールドに「title」を入力する。

6-3-2.今回は値に「テストテキスト」を入力する。

項目入力

6-4.登録されたことを確認

登録後

 

7.Flutterコード実装

全体のコードはこちら

最小限のコードで実装しています。他にも考慮する部分もありますが、詳細は公式ドキュメントを参考にしてください。

7-1.コレクションのインスタンスを設定する

6-2 で作成したコレクション名を指定する。

// 自分で作成したコレクション名を指定
Query users = FirebaseFirestore.instance.collection('test');

7-2.StreamBuilderを用意する

StreamBuilder<QuerySnapshot>(
  stream: users.snapshots(),
  builder: (BuildContext context, stream) {
    // TODO
  }
)

 

7-3.取得したデータから解析

StreamBuilder<QuerySnapshot>(
  stream: users.snapshots(),
  builder: (BuildContext context, stream) {
    // ここ追加
    QuerySnapshot querySnapshot = stream.data;
    return ListView(
            children: querySnapshot.docs.map((DocumentSnapshot document) {
              return ListTile(
                title: Text(document.data()['title']),
              );
          }).toList(),
      );
  }
)

 

おわりに

今後データを増やたり、他のfirebaseサービスも試したいと思います。

また、不足点や認識が異なっている点がありましたら、ご指摘いただけると助かります。

参考サイト

-flutter
-, , , , , ,

Copyright© エンジニアが学んだことをアウトプットしていく , 2022 All Rights Reserved Powered by AFFINGER5.