FlutterでFirebaseのCloud Firestoreを使う設定方法

FlutterでFirebaseを使う方法を解説します。

Firebaseプロジェクトの作成

Androidアプリの追加

まずはFierbaseのプロジェクトを作成します。作成後、プロジェクトの設定からAndroidアプリを追加します。

パッケージ名はAndroid/app/build.gradleのapplicationIdに設定しているもを入力します。

google-service.jsonをAndroid/appフォルダ配下に置きます。

指定されたモジュールをbuild.gradleに設定してインストールします。

Cloud Firestoreからデータを取得する

下記ソースコードをmain.dartに追加して、bodyに対してnew TestListとすることでFirestoreからデーアを取得できます。

streamを使うとFirestoreの変更をリアルタイムに取得しviewに反映することができます。

class TestList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StreamBuilder<QuerySnapshot>(
      stream: Firestore.instance.collection('todos').snapshots(),
      builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
        if (snapshot.hasError)
          return new Text('Error: ${snapshot.error}');
        switch (snapshot.connectionState) {
          case ConnectionState.waiting: return new Text('Loading...');
          default:
            return new ListView(
              children: snapshot.data.documents.map((DocumentSnapshot document) {
                var dateString = document['limitDay'].toDate().toString();
                return new ListTile(
                  title: new Text(document['title']),
                  subtitle: new Text(dateString),
                );
              }).toList(),
            );
        }
      },
    );
  }
}

ビルドに下記エラーが出る可能性があります。

D8: Cannot fit requested classes in a single dex file (# methods: 74144 > 65536)

このエラーが出た場合、Android/app/build.gradleにmultiDexEnabledを設定することで解決できます。

android {
    defaultConfig {
        multiDexEnabled true
    }
}

まとめ

FlutterにFirebaseを導入するのは非常に簡単ですね。さらにFirestoreを使うのも設定が楽なので初めての人でも問題なく使えるかと思います。

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

髙妻智一

2013年CyberAgent新卒入社 スマホゲームを作る子会社に所属し、サーバーサイドのエンジニアを担当。２年目の終わりから新規子会社の立ち上げに参加し、サーバーサイドのエンジニアリーダーとしてサービースのリリースから運用までを担当。 2018年仮想通貨のスマホウォレットを提供するGinco Incにブロックチェーンエンジニアとして入社。

最新記事 by 髙妻智一 (全て見る)

• Polkadot(Substrate)のアドレスとトランザクションについて - 2023-03-09
• 【無料公開】「Goで始めるBitcoin」3章 Bitcoinノードとの通信　技術書典8 - 2020-03-08
• エンジニアがゼロから技術ブログを書くための方法をまとめました - 2019-05-25