スポンサーリンク

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

2020年2月22日

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

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

前回は、Firestoreにデータを追加（Create）するところまでやりました。

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

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

スポンサーリンク

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

  1. 『Flutter×Firebaseで始めるモバイルアプリ開発』をWEBアプリにして写経してみる（１）Windows10でFlutterをインストールしてAndroid実機で開発画面を表示
  2. 『Flutter×Firebaseで始めるモバイルアプリ開発』をWEBアプリにして写経してみる（２）Flutter on the webの設定（beta版）を行いNetlifyにデプロイ
  3. 『Flutter×Firebaseで始めるモバイルアプリ開発』をWEBアプリにして写経してみる（３）Firebaseの設定と一覧画面
  4. 『Flutter×Firebaseで始めるモバイルアプリ開発』をWEBアプリにして写経してみる（４）入力画面
  5. 『Flutter×Firebaseで始めるモバイルアプリ開発』をWEBアプリにして写経してみる（５）編集機能の実装
  6. 『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/046d785d4e8882cda92eaf42d0d3e656132847d0/lib/main.dart

新規作成画面を利用して編集機能を実装する

以下の4つを行うとのことです。

  1. MyaInputForm()関数に、引数this.document を追加
  2. 新規作成ボタンの修正
  3. 編集ボタンの処理追加
  4. 編集データの作成

また、適当に変更して、なんとかなったようです。

と思いきや、なんとかなっていませんでした。。。がっくし

この後、うまくいっているような気もしたので、このままとします。

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

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

削除機能の実装

_MyInputFormStateクラスに削除機能を追加します。

編集画面で何らかの項目を変更しないと、削除できません。。。どうしたらよいだろうか、、、

→いろいろ試してみたのですが、結局わかりませんでした。あきらめて、そのままとします。

ここまでのソースコード

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

次は、ログイン機能の実装にtryしてみたいと思います。

作成中

Firestore,Flutterfirebase,firestore,Flutter,flutter for web,flutter on the web,Flutter×Firebaseで始めるモバイルアプリ開発

Posted by twosquirrel