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

2020年1月2日2020年2月28日

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

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

前回は、WebアプリをNetlifyにデプロイするところまで行いました。

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

今回は、貸し借りアプリのデータの保存場所としてのFirebase（Firestore）の設定を行います。

Contents

1. 『Flutter×Firebaseで始めるモバイルアプリ開発』をWEBアプリにして写経してみる目次
2. 開発環境
3. 前回までのソースコード
4. Firebaseアプリの新規作成
5. Flutter WebアプリとFirebaseの紐づけ
6. Cloud Firestoreの設定
7. テストデータを作成
8. 一覧画面の実装
9. ListViewとListTileでリスト表示
10. フローティングボタンの追加
11. 編集ボタンの追加
12. ソースコード
13. StreamBuilderを用いて記載する方法
14. StreamBuilderを用いて書き換えたソースコード
15. Flutter入門にお勧めの本

『Flutter×Firebaseで始めるモバイルアプリ開発』を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

前回までのソースコード

https://github.com/adash333/flutter_firestore_kasikari/tree/027bae5aa953aa72da781e2f9f15aaf674d87e0d

Firebaseアプリの新規作成

https://console.firebase.google.com/ にGoogleアカウントでログインして、新規プロジェクトを作成します。

Flutter WebアプリとFirebaseの紐づけ

以下のページを参考にしました。
https://qiita.com/hiko1129/items/73ea988df0c537657b10

また、こちらのサイトも参考にしました。
https://pub.dev/packages/firebase

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

（変更前）

（変更後）

web/index.htmlにfirebaseのscriptタグを追加します。（main.dart.jsよりも前に読み込んだ方がよさそうな気がしました。）

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

lib/main.dartにfirestoreの記述等を追加します。

import 'package:firebase/firebase.dart';
import 'package:firebase/firestore.dart' as fs;

void main() {
  initializeApp(
    apiKey: "YourApiKey",
    authDomain: "YourAuthDomain",
    databaseURL: "YourDatabaseUrl",
    projectId: "YourProjectId",
    storageBucket: "YourStorageBucket");

  fs.Firestore store = firestore();
  fs.CollectionReference ref = store.collection("messages");

  ref.onSnapshot.listen((querySnapshot) {
    querySnapshot.docChanges().forEach((change) {
      if (change.type == "added") {
        // Do something with change.doc
      }     
    });
  });
}

上記の “YourApiKey" などは、Firebaseで、以下の画面をクリックしたときに出てくる文字列を入力します。

（変更前） lib/main.dart

（変更後） lib/main.dart

Cloud Firestoreの設定

先ほどのFireabaseプロジェクトに戻り、画面左側の『開発』＞『Database』をクリックして、Cloud Firestoreをクリックします。

いったん、テストモードで開始します。

しばらく、以下の画面で、待ちます。

テストデータを作成

『コレクションを開始』をクリックして、データを追加していきます。

一覧画面の実装

ターミナル画面で、以下を入力します。（pubspec.yamlを保存した時点で、自動で実行されていたかもしれません。）

flutter packages get

Flutter×Firebaseで始めるモバイルアプリ開発の『7.2 リスト作成』のコードを参考にして、lib/main.dart を書き換えます。

→うまくいかず、、、挫折、、、

いったんあきらめて、
https://qiita.com/hiko1129/items/73ea988df0c537657b10
のコードをコピペして、実行してみます。
さらに、 floating action buttonを3回押してみました。

flutter run -d chrome

Firestoreの方にも、messages コレクションが作成され、ドキュメントが追加されています。

これを参考に、 https://github.com/chasibu/kasikari_memo/blob/22f3f83fb826ed315efd73d81c400fc0c7690878/lib/main.dart とにらめっこしながら、 kasikari-memo の中身をリスト表示したいのですが、、、また今度、、、

Flutter×Firebaseで始めるモバイルアプリ開発の方では、 https://pub.dev/packages/cloud_firestore のパッケージを利用しており、こちらは、WEB対応していない。

ListViewとListTileでリスト表示

Firestoreは以下のような感じにする

lib/main.dart　は以下のような感じ

すると、以下のような感じとなる。もう少し工夫したい。。。

参考： https://api.flutter.dev/flutter/material/ListTile-class.html

さらに少し変更

// title: Text(message['borrowOrLend']),
title: Text("【 " + (message['borrowOrLend'] == "lend"?"貸": "借") +" 】"+ message['stuff']),
// subtitle: Text(message['stuff']),
subtitle: Text('期限 ： ' + message['date'].toString().substring(0,10) + "\n相手 ： " + message['user']),

やっと、Firestore内のデータのリスト表示ができました。

参考： https://github.com/chasibu/kasikari_memo/blob/22f3f83fb826ed315efd73d81c400fc0c7690878/lib/main.dart

この時点でのコード

https://gist.github.com/adash333/8c4d8bf16f5ba92e6fda74e0bc98bc41

フローティングボタンの追加

画面の右下にある丸い、『＋』というボタンです。

floatingActionButton: FloagintActionButton(
  child: const Icon(Icons.add),
  onPressed: () {
    print("新規作成ボタンを押しました");
  }
),

dart言語の、 “, " と、 “; “の使い方の違いが分かりません。。。

編集ボタンの追加

それぞれのカードの右下に、『編集』ボタンを追加します。

は、"ButtonTheme.bar()"を用いているのですが、今回は、以下のように変更してみました。

ButtonTheme.bar(
  child: ButtonBar(
    children: <Widget>[
      FlatButton(
        child: const Text("編集"),
        onPressed: ()
        {
          print("編集ボタンを押しました");
        }
      )
    ],  
  )
)

参考： https://api.flutter.dev/flutter/material/Card-class.html

Flutter WebでFirestoreを利用しようとしているだけなのですが、かなり苦労しました。

次は、入力画面の実装へ行きたいと思います。（できるだろうか、、、）