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やら出てきて、そこまで凝ったことしなくても良いんだけどな、、という気持ちになった。

YouTubeみたいな動画配信とチャットできるサイト作るのに良さそうなサービスないかな、と思って探したのがAmazon Interactive Video Service。

動画の配信はOBSを使って簡単にできそう。

• Live Streaming with Amazon Interactive Video Service

S3に自動的に保存することもできるようなので、後から視聴することもできそう。

• Amazon S3 への自動録画 - Amazon Interactive Video 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を使うのが良さそう。

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

DropdownButton class - material library - Dart APIのサンプルを持ってきて、サンプルではchildとvalueを同じ文字列にしてるのを別々に指定できるようにして、とりあえずループ使わないで配列直接指定にしてみたら、エラー。

Assertion failed:
file:///home/umemak/sdk/flutter/packages/flutter/lib/src/material/dropdown.dart:882:15
items == null || items.isEmpty || value == null ||
              items.where((DropdownMenuItem<T> item) {
                return item.value == value;
              }).length == 1
"There should be exactly one item with [DropdownButton]'s value: One. \nEither zero or 2 or more
[DropdownMenuItem]s were detected with the same value"

dropdownValueの初期値をサンプルからコピーしたまま直してなかった。。