FlutterのCloud FirestoreパッケージがWEB対応したので使ってみる

2020年2月28日2020年4月19日

以前、2020年1月時点ではWEB対応していなかったcloud_firestoreパッケージがWEB対応したらしいので、使ってみることにしました。

https://pub.dev/packages/cloud_firestore

　以下の本をWebアプリに変更して写経しています。

Flutter×Firebaseで始めるモバイルアプリ開発

この第7章を、WEBアプリにしてやってみたいと思います。

Contents

1. 開発環境
2. 新規Flutterアプリの作成（WEBアプリ）
3. Firebaseの設定
4. pubspec.yamlの変更
5. web/index.htmlの編集
6. リスト作成
7. ソースコード

開発環境

Panasonic CF-RZ6
Windows10 Pro (1803)
git version 2.20.1.windows.1
VisualStudioCode 1.41.1
AndroidStudio 3.5
Flutter v1.12.13+hotfix.5 を、C:/flutter/ に展開し、WindowsのPathを設定（C:\flutter\bin）し、channnelをbetaに変更し、flutter config --enable-web　を実行
Chrome

新規Flutterアプリの作成（WEBアプリ）

以下に記載したとおりに、Flutterのchannelをstable から beta に変更しておきます。

『Flutter×Firebaseで始めるモバイルアプリ開発』をWEBアプリにして写経してみる（２）Flutter on the webの設定（beta版）を行いNetlifyにデプロイ

flutter channel
flutter channel beta
flutter config --enable-web

C:/f/ フォルダをVisualStudioCodeで開き、Ctrl+@でターミナル画面を開き、以下を入力します。

flutter create flutter_firestore_kasikari2

すると、C:/f/flutter_firestore_kasikari2 フォルダが作成されるので、一度VisualStudioCodeを閉じて、その後、C:/f/flutter_firestore_kasikari2 フォルダをVisualStudioCodeで開き、Ctrl+@でターミナル画面を開き、以下を入力します。

flutter run -d chrome

3分くらい時間がかかるので、この間に、Firebaseの設定を行っておきます。

Firebaseの設定

Flutter×Firebaseで始めるモバイルアプリ開発の第6章の部分となります。以下のやり方と同様にFirebaseアプリの作成と、Firestoreの設定を行います。

『Flutter×Firebaseで始めるモバイルアプリ開発』をWEBアプリにして写経してみる（３）Firebaseの設定と一覧画面

pubspec.yamlの変更

pubspec.yamlのdependenciesにfirebaseを追加します。

cloud_firestore: ^0.13.4

pubspec.yaml を保存すると、私の環境では、自動的に

flutter packages get

が実行され、cloud_firestoreパッケージがインストールされました。

web/index.htmlの編集

引き続き、Flutter Webでcloud_firestoreパッケージを使えるように設定

https://github.com/FirebaseExtended/flutterfire/blob/master/packages/cloud_firestore/cloud_firestore_web/README.md の説明に従って設定していきます。

まず、 https://console.firebase.google.com/ 　にログインして、以下のようにクリックしていって、APIキーなどを、手元のメモ帳などにコピーしておきます。

ここの、

var firebaseConfig = {
  apiKey: "xxxxxxxxxxxxx",
  authDomain: "xxxxxxxxxxx",
  .....
}

の部分をコピーしておきます。

次に、web/index.html を開き、下の方の、

<script src="main.dart.js" type="application/javascript"></script>

の『直前』に、以下のようなコードを挿入します。"apiKey: …"　のところは、上記のFirebaseのご自身のapiKeyなどに書き換えてください。

  <script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-firestore.js"></script>

  <script>
    // TODO: Replace the following with your app's Firebase project configuration.
    // See: https://support.google.com/firebase/answer/7015592
    var firebaseConfig = {
      apiKey: "...",
      authDomain: "[YOUR_PROJECT].firebaseapp.com",
      databaseURL: "https://[YOUR_PROJECT].firebaseio.com",
      projectId: "[YOUR_PROJECT]",
      storageBucket: "[YOUR_PROJECT].appspot.com",
      messagingSenderId: "...",
      appId: "1:...:web:...",
      measurementId: "G-..."
    };
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
  </script>

実際には、以下のようになります。

（変更前）

（変更後）

リスト作成

lib/main.dartを、こちらのコードの前半に書き換えます。

（開発サーバを起動するときは、 “flutter run -d chrome", リロードは"r", サーバ停止は"q"）

（変更前）

（変更後）

なお、Firestore内のデータは以下のように手入力しています。

うまくいったようです。cloud_firestoreパッケージがFlutter webでも使用できるようになって便利になりました。 Flutter×Firebaseで始めるモバイルアプリ開発をほぼ写経するだけで、WEBアプリも作成できそうです。

あ、timestampのところがうまくいっていませんでした。いずれ、改善されると思いますが、パッケージのバグが修正されるのを待つしかありません、、、
→待っていましたが、2020/4/19現在、改善されていないので、

substring() 関数
int.tryParse() 関数

を用いて、強引に書き換えることにしました。

subtitle: Text('期限：' + DateTime.fromMillisecondsSinceEpoch(int.tryParse(document['date'].toString().substring(18, 28)) * 1000).toString().substring(0, 10) + "\n相手：" + document['user']),

しかし、これだと、Androidアプリのときと、WEBアプリのときでコードが変わってしまうのがかなり微妙です。