昨日見つけたFlutterで始めるモバイルアプリ開発連載一覧：CodeZine（コードジン）の第7回まで読んだ。

ここまではFlutterというよりはDartの言語的な解説がメインで、いままで何となくでやっていた所が復習できた。

ただ、書かれた時期がFlutter2の登場以前なので、細かいところや作法は現在と変わっているかもしれない。

基本的な実装ができたので、Firebase HostingにデプロイしてPixel4で表示してみた。

画像をアップロードして画面の表示項目が増えたら、画面下部のボタンが画面外に出て押せなくなってしまった。

SingleChildScrollView でまるっと囲んでしまえば良いらしい。

PWAとしてインストールしていた場合は、再インストールしないと修正が反映されない。

Flutterでのレイアウトの組み合わせ方を学ぼう～実際の画面例を使用 (1/2)：CodeZine（コードジン）

こういうリスト作りたいなと思って検索してたどり着いたのだけど、

Flutterで始めるモバイルアプリ開発連載一覧：CodeZine（コードジン）

この連載一通り読んでみれば勉強になりそう。

親コレクションと子コレクションがあったとして、子を親のサブコレクションにするか、子に親のIDを持たせて別のコレクションにするか問題。

別のコレクションにした場合、クエリ時にwhereを使って親IDを指定して絞り込むと、orderByが使えない。 エラーにならないけど、ゼロマッチになってしまう。

orderByを使いたかったので、サブコレクションを使うことにした。

毎回ログイン画面に遷移して面倒だなぁと思っていた件。

FlutterWebでFirebaseAuthのcurrentUserがリロード時にnullになることに対しての対処法

同様に、runAppの前に

await FirebaseAuth.instance.userChanges().first;

を入れたら解消した。

lib直下にmainとstateと画面ごとのファイルをおいているけど、ProviderやらRiverpodの参考に見てるページはmainに全部書いていて、ページごとに分割した書き方がいまいちわからない。

状態管理も考慮したファイル構成はどうなのかなとググったら、repositoryやらserviceやら出てきて、そこまで凝ったことしなくても良いんだけどな、、という気持ちになった。

ファイルを選択してFirebase Storageにアップロードする処理は昨日できた。

フォーム画面で選択したファイルを、アップロードする前にプレビュー表示をしたい。

画像の表示はImage class - widgets library - Dart APIを使えばできる、のだけれど、画面を表示したタイミングではまだ画像が選択されていないので何も表示できない。

画像を選択したら描画されるようにしたい。

画像を選択してアップロードする機能を付けたい。

アップロード先はFirebase Storageで。

Flutter×Firebase(CloudStorage)でファイルダウンロードとアップロードを簡単に実現する方法 - Qiita

を見て実装してみたところ、Unsupported operation: Platform._operatingSystemなエラーが。

Webだと対応していない書き方なのかな・・環境ごとに分けるの面倒だな・・

google cloud functions - Flutter web - Upload Image File to Firebase Storage - Stack Overflow

go_router 続き。

パラメータを渡すところは、go_router/parameters.mdx at main · csells/go_routerを見て書いたらうまくいった。

あとはログイン周り（リロードしたときにログイン状態を維持したい）は、routerとは別次元の問題なのでいったん置いておく。 開発中は自分しか使わないし問題なし。

画面レイアウトの調整が面倒な件、ロジックを作り始めると、目的の画面にたどり着くまでに手数が必要になるせいだと気づいた。

ということで、目的の画面に直接アクセスできるように（Webアプリ版なので）URL指定で開けるようにする。

そのためにはrouterを使うのが良さそう。

軽く検索したところ、以下のパッケージがヒットした。