『Flutter×Firebaseで始めるモバイルアプリ開発』をWEBアプリにして写経してみる（４）入力画面

2020年1月4日2020年1月5日

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

前回は、Firestoreのデータを一覧表示するところまでやりました。

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

今回は、編集画面を作成したいと思います。

Contents

1. 『Flutter×Firebaseで始めるモバイルアプリ開発』をWEBアプリにして写経してみる目次
2. 開発環境
3. 前回までのソースコード
4. 入力画面の作成
5. 一覧画面から入力画面への画面遷移
6. ラジオボタンの有効化
7. 日付選択画面の作成
8. この時点でのソースコード
9. Firestoreへの登録機能の実装
10. この時点でのソースコード
11. 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/flutterweb_firestore_kasikari_main/blob/e65e14d10e71c681b260c4330dca8b4a3da34795/lib/main.dart

入力画面の作成

『 Flutter×Firebaseで始めるモバイルアプリ開発』の8.1章を、ほぼ、一字一句写経するのみでした。Navigationを設定していないので、まだ入力画面を見ることはできません。
　 https://github.com/adash333/flutterweb_firestore_kasikari_main/blob/5269191c48ffeb13019ead0fcfdee9ff2a747529/lib/main.dart

一覧画面から入力画面への画面遷移

Navigatorという機能を使い、以下のように、pushとpopで記載します。

push: 次のページを指定して移動
pop:  pushで表示したページを閉じて、その前に表示していた画面へ戻る

今回は、一覧画面の画面右下の『＋』ボタンをクリックすると、入力画面へ移動するようにするには、以下のように記載します。

floatingActionButton: FloatingActionButton(
  child: const Icon(Icons.add),
  onPressed: () {
    print("新規作成ボタンを押しました");
    Navigator.push(
      context,
      MaterialPageRoute(
        settings: const RouteSettings(name: "/new"),
        builder: (BuildContext context) => MyInputForm()
      ),
    );
  },
),

バックボタンはコードなどを記載しなくても、入力画面の左上に表示され、そのバックボタンをクリックすると、一覧画面にちゃんと戻ります。（Ionic Framework 2のときのroutingのpush, pop と全く同じような感じです。）

ラジオボタンの有効化

  // _setLendOrRent()関数を定義
  void _setLendOrRent(String value) {
    setState(() {
      _data.borrowOrLend = value;
    });
  }

// RadioListTile　のborrow, lendそれぞれのところに以下を追加
_setLendOrRent(value);

日付選択画面の作成

非同期処理を使うらしいです。非同期処理については、JavaScriptについてですが、以前、まとめたページがあるので、もしよろしければご覧ください。

https://i-doctor.sakura.ne.jp/web/doku.php?id=00.javascript:01.%E5%90%8C%E6%9C%9F%E5%87%A6%E7%90%86%E3%81%A8%E9%9D%9E%E5%90%8C%E6%9C%9F%E5%87%A6%E7%90%86

Dart言語では、非同期処理では

import 'dart:async';

でインポートしておき、”Future”　という構文を用いるようです。さっぱりわかりませんが、以下の参考サイトをざっと読んで、とりあえず、次に進みたいと思います。

参考１： https://qiita.com/akatsukaha/items/f7c4fa9746e69f9b458d
@akatsukaha
2018年08月03日に投稿
Dartでの非同期処理（then vs async/await）

参考２：https://qiita.com/arthur_foreign/items/4d85423e9307512237da
@arthur_foreign
2019年11月11日に更新
【Dart/Flutter】async libraryでFutureとStreamを使った非同期処理についてまとめてみた