スポンサーリンク

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

2020年1月5日

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

前回は、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/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” という構文を用いるようです。さっぱりわかりませんが、以下の参考サイトをざっと読んで、とりあえず、次に進みたいと思います。

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

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

入力画面で、『締切日変更』をクリックすると、以下のようにカレンダーが表示されて、日付を選択することができるようになりました。

この時点でのソースコード

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

Firestoreへの登録機能の実装

適当に変更しながら、、、

参考: https://github.com/FirebaseExtended/firebase-dart/blob/master/example/firestore/index.dart

入力チェック機能も、、、

入力画面で、データに何も入れない状態で、保存ボタンをクリックしてみると、以下のように表示されます。

今度は、文字を入力してから、保存ボタンを押してみます。

だめだったので、もう一度、

やったー!

やっと、Flutter on the Webから、Firestoreに書き込みができるようになりました。

次は、編集機能の実装をしたいと思います。

この時点でのソースコード

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

Flutter入門にお勧めの本

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

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

スポンサーリンク

Flutter

Posted by twosquirrel