スポンサーリンク

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

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

https://pub.dev/packages/cloud_firestore

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

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

スポンサードリンク

開発環境

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 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の設定を行います。

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のところがうまくいっていませんでした。いずれ、改善されると思いますが、パッケージのバグが修正されるのを待つしかありません、、、

ソースコード

web/index.html

https://gist.github.com/adash333/5b089d4c58ecef7d4d950264a14d8633

スポンサーリンク