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新卒入社
スマホゲームを作る子会社に所属し、サーバーサイドのエンジニアを担当。2年目の終わりから新規子会社の立ち上げに参加し、サーバーサイドのエンジニアリーダーとしてサービースのリリースから運用までを担当。
2018年仮想通貨のスマホウォレットを提供するGinco Incにブロックチェーンエンジニアとして入社。
最新記事 by 髙妻智一 (全て見る)
- Polkadot(Substrate)のアドレスとトランザクションについて - 2023-03-09
- 【無料公開】「Goで始めるBitcoin」3章 Bitcoinノードとの通信 技術書典8 - 2020-03-08
- エンジニアがゼロから技術ブログを書くための方法をまとめました - 2019-05-25
コメントを残す