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

Flutter Firebase




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

 

Firebaseプロジェクトの作成

Androidアプリの追加

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

Flutter Android

 

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

 

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

Firebase Android google-service-json

 

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

Firebase SDK Android

 

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






よく読まれている関連記事はこちら



コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です