スポンサーリンク

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

2020年1月5日

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

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

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

スポンサードリンク

『Flutter×Firebaseで始めるモバイルアプリ開発』をWEBアプリにして写経してみる 目次

  1. 『Flutter×Firebaseで始めるモバイルアプリ開発』をWEBアプリにして写経してみる(1)Windows10でFlutterをインストールしてAndroid実機で開発画面を表示
  2. 『Flutter×Firebaseで始めるモバイルアプリ開発』をWEBアプリにして写経してみる(2)Flutter on the webの設定(beta版)を行いNetlifyにデプロイ
  3. 『Flutter×Firebaseで始めるモバイルアプリ開発』をWEBアプリにして写経してみる(3)Firebaseの設定と一覧画面
  4. 『Flutter×Firebaseで始めるモバイルアプリ開発』をWEBアプリにして写経してみる(4)入力画面
  5. 『Flutter×Firebaseで始めるモバイルアプリ開発』をWEBアプリにして写経してみる(5)編集機能の実装

開発環境

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を利用しようとしているだけなのですが、かなり苦労しました。

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

ソースコード

https://github.com/adash333/flutterweb_firestore_kasikari_main/blob/406d9bd5302eaa2f5eef5f6114304d154dfb3c02/main.dart

StreamBuilderを用いて記載する方法

こちらにありました!感謝!

https://scrapbox.io/hnishim/flutter_for_web%E3%81%8B%E3%82%89Firestore%E4%B8%8A%E3%81%AE%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B

これと、以下の本を参考に、がんばって、書き換えてみました。疲れました。以降の写経が楽になったらよいなあー(棒)。

StreamBuilderを用いて書き換えたソースコード

https://github.com/adash333/flutterweb_firestore_kasikari_main/blob/97d7c38440ac21b181dc0a3aaad8d519fb9f4c52/lib/main.dart

上記はリスト表示までで、さらに、追加ボタンと編集リンクを追加すると、以下のようなコードになりました。

https://github.com/adash333/flutterweb_firestore_kasikari_main/blob/e65e14d10e71c681b260c4330dca8b4a3da34795/lib/main.dart

Flutter入門にお勧めの本

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

また、最初はちんぷんかんぷんですが、以下の本を3回くらい繰り返して読むと、かなりFlutterが分かってきた気になります。

スポンサーリンク

Flutter

Posted by twosquirrel