Flutter : Cloud Firestore からデータの読み込みと保存まずAndroidで確認

Firebase Hosting に Angular をホスティングして、そこから Firestore にアクセスできたので、同じことをFlutterでも実現する。

1.FlutterにFirebaseを適用

https://firebase.google.com/docs/flutter/etup?hl=ja

この辺りを参考に。

昨年の10月ごろに設定したときには、いろいろトラブルシュートが面倒だった気がするが、Flutterプラグインなど各種ツール類のバージョンが上がってか、かなりすんなり。

2.Flutter アプリ Firebase と統合

2.1 クイックスタート

このあたりを参考に。

2.2 FIrestore設定

Firestoreのセキュリティールールなどの設定は、Firesotreの確認をした時のものを使いまわす

2.3 FirebaseにFlutterアプリの登録

(1) アプリケーションID の設定

https://developer.android.com/studio/build/application-id?hl=ja

(2) google.service.json のダウンロードとFlutterアプリへの登録

Firebaseのコンソール、プロジェクトの概要の歯車アイコンから設定ページを開く

google.service.jsonをダウンロードし

Android Studio のFlutterアプリの、android/app/ にインポートする

メニュー Tools – Flutter – Flutter Package Get を実行

3.Flutter Fire

FluttFlutterから、Firebaseを使うためのプラグインの一覧

https://firebaseopensource.com/projects/firebaseextended/flutterfire/

から、

Cloud Firestore plugin for Flutter を使用する。

https://pub.dev/packages/cloud_firestore

Flutter、Firebase、Angular と Googleにロックオンされた感はあるが、Google謹製フレームワーク同士の連携のため、このあたりの連携ツールが充実しているのは捗る。

ここで、いったん動かしてみると、multidex エラーとやらが発生するので、以下を参照して対応

64K を超えるメソッドを使用するアプリ向けに multidex を有効化する

https://developer.android.com/studio/build/multidex?hl=ja

3.1 Cloud Firestore プラグイン

https://pub.dev/packages/cloud_firestore

こいつを使う。

4.確認実装

Angular同様、テキストフィールドに、LoadボタンでFiresotreの値を読みこみ、Saveで保存するだけ。

4.1 設定

(1) pubspec.yaml

cloud_firestore をdependenciesに追記

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  cloud_firestore: 0.13.4+2

(2) /android/app/build.gradle

上で述べたmultidexの対応をdependencies に追記
Googleサービスを利用する記述を最後尾に追記

dependencies {
    def multidex_version = "2.0.1"
    implementation "androidx.multidex:multidex:$multidex_version"
               :
}
apply plugin: 'com.google.gms.google-services'  // Google Play services Gradle plugin

(3) /lib/main.dart

import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final message = "Initial Message.";
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Sample',
      home: MyPage(message:this.message),
    );
  }
}

class MyPageState extends State<MyPage>{
  // テキストフィールドのステートを管理
  final _stateController = TextEditingController();

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    this._stateController.dispose();
    super.dispose();
  }

  /// LoadボタンがおされたらFirestoreの値を取得
  void loadOnPressed() {
    Firestore.instance.document("sample/sandwichData")
        .get().then((DocumentSnapshot ds){
          setState(() {
            this._stateController.text = ds["hotDogStatus"];
          });
          print("status=$this.status");
        });
  }

  /// SaveボタンがおされたらFirestoreに値を保存
  void saveOnPressed() {
    Firestore.instance.document("sample/sandwichData")
        .updateData({"hotDogStatus":_stateController.text})
        .then((value) => print("success"))
        .catchError((value) => print("error $value"));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter State Sample'),
      ),
      body: Column(
        // Columnの配置場所
        mainAxisAlignment: MainAxisAlignment.start,
        // Widgetのサイズ
        mainAxisSize: MainAxisSize.max,
        //　Columnに組み込んだWidgetの配置場所
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            mainAxisSize: MainAxisSize.max,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Flexible(
                child: TextField(
                  controller: _stateController,
                ),
              ),
              Padding(
                padding: EdgeInsets.all(2.0),
                child: RaisedButton(
                    onPressed: saveOnPressed,
                    child: Text("Save")),
              ),
              Padding(
                padding: EdgeInsets.all(2.0),
                child: RaisedButton(
                    onPressed: loadOnPressed,
                    child: Text("Load"))
              )
            ],
          ),
        ],
      ),
    );
  }
}

class MyPage extends StatefulWidget {
  final String message;
  MyPage({this.message}):super() {}
  @override
  State<StatefulWidget> createState() => new MyPageState();
}