『Flutter×Firebaseで始めるモバイルアプリ開発』をWEBアプリにして写経してみる（４）入力画面
以下の本をWebアプリに変更して写経しています。
前回は、Firestoreのデータを一覧表示するところまでやりました。
今回は、編集画面を作成したいと思います。
『Flutter×Firebaseで始めるモバイルアプリ開発』をWEBアプリにして写経してみる 目次
- 『Flutter×Firebaseで始めるモバイルアプリ開発』をWEBアプリにして写経してみる（１）Windows10でFlutterをインストールしてAndroid実機で開発画面を表示
- 『Flutter×Firebaseで始めるモバイルアプリ開発』をWEBアプリにして写経してみる（２）Flutter on the webの設定（beta版）を行いNetlifyにデプロイ
- 『Flutter×Firebaseで始めるモバイルアプリ開発』をWEBアプリにして写経してみる（３）Firebaseの設定と一覧画面
- 『Flutter×Firebaseで始めるモバイルアプリ開発』をWEBアプリにして写経してみる（４）入力画面
- 『Flutter×Firebaseで始めるモバイルアプリ開発』をWEBアプリにして写経してみる（５）編集機能の実装
- 『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
前回までのソースコード
入力画面の作成
『 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についてですが、以前、まとめたページがあるので、もしよろしければご覧ください。
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を使った非同期処理についてまとめてみた
入力画面で、『締切日変更』をクリックすると、以下のようにカレンダーが表示されて、日付を選択することができるようになりました。
この時点でのソースコード
Firestoreへの登録機能の実装
適当に変更しながら、、、
参考： https://github.com/FirebaseExtended/firebase-dart/blob/master/example/firestore/index.dart
入力チェック機能も、、、
入力画面で、データに何も入れない状態で、保存ボタンをクリックしてみると、以下のように表示されます。
今度は、文字を入力してから、保存ボタンを押してみます。
だめだったので、もう一度、
やったー！
やっと、Flutter on the Webから、Firestoreに書き込みができるようになりました。
次は、編集機能の実装をしたいと思います。
この時点でのソースコード
Flutter入門にお勧めの本
以下の本をWebアプリに変更して写経しています。
また、最初はちんぷんかんぷんですが、以下の本を3回くらい繰り返して読むと、かなりFlutterが分かってきた気になります。