hnvn/flutter_image_cropper: A Flutter plugin for Android and iOS supports cropping imagesを使うときにエラーが出ていた件、解決。

Flutter Webで使うときはweb/index.htmlにcssとjsを追加するようにREADMEに書かれていた。

ドキュメントはちゃんと読まないと、かえって時間を浪費してしまう例だ。

ただ、スマホのブラウザで表示したときにはみ出してしまうので、この辺は要調査。

crop使うために、–web-rendererをcanvaskitにしたら、Firebase Storageの画像を表示できなくなってしまった。

Displaying images on the web | Flutterにも書かれていて、いくつか回避策が提示されていた。

Firebase Hostingはfirebase.jsonで設定できるらしいが、今回問題になっているのはStorageの方で。

画像の選択前後で表示だし分けしたい件、Prvider使って実装してたけど、setStateで良いことに気づいた。

だいぶFlutterのことがわかってきた気がする。

（cropはまだできていない）

Flutter Webでブラウザ表示したときに、漢字が中国風になってしまう件。

--web-renderer htmlで動かせば回避できていたのだけれど、cropを試すのに--web-renderer canvaskitにしたら再発した。

Flutter Webでのフォント問題を解決するを参考にsawarabiGothicにして解決。

アップロードする画像を正方形にしたかったので、加工用のパッケージを入れてみた。

hnvn/flutter_image_cropper: A Flutter plugin for Android and iOS supports cropping images

これがFlutter Webだとどうもうまく動かない。

croppie_dart.dart:129 Uncaught (in promise) TypeError: dart.global.Croppie is not a constructor
    at new croppie_dart._Croppie.new (croppie_dart.dart:129:50)
    at Croppie.new (croppie_dart.dart:68:12)
    at cropImage (image_cropper_for_web.dart:120:21)
    at cropImage.next (<anonymous>)
    at runBody (async_patch.dart:84:54)
    at Object._async [as async] (async_patch.dart:123:5)
    at image_cropper_for_web.ImageCropperPlugin.new.cropImage (image_cropper_for_web.dart:74:33)
    at cropper.ImageCropper.new.cropImage (cropper.dart:86:21)
    at NewPostPage.dart:206:52

Flutter、まだわからないことが多い。。

次は、Top Flutter Image Cropping, Image Cropper packages | Flutter Gemsで見つけたxclud/flutter_crop: Crop any widget/image in Android, iOS, Web and Desktop with fancy and customizable UI, in pure Dart code.を試してみようと思う。

昨日の2度呼ばれて2度目の内容が反映されない件。

結局よくわからなかったので、反映されない部品（WebViewX）だけ古い実装に戻すことにより回避した。

Firestore倍の回数呼び出すことになりそうだけど、仕方ない。

Firestoreから取得したデータを、Wighetの構築に受け渡しするのに引数並べるの大変になってきたので、 modelクラスの導入をしてみた。

参考：

• 【Flutter & FireStore】Modelを作成して、データの一覧を取得 する
• 【Flutter & FireStore】Modelを作成して、データの一覧を取得・表示する　その２

無事に引数はまとめることができたのだが、ChangeNotifierProviderを入れたせいなのか描画が2回呼ばれて、どうやら1回目はデータが取れていない状態、2回目はデータが入った状態らしい。

Flutterでのレイアウトの組み合わせ方を学ぼう～実際の画面例を使用 (1/2)：CodeZine（コードジン）を参考に実装し始めたら、サンプルコードがわかりにくいのに気づいた。

lib/list/CouponListView.dartの抜粋など抜粋と明示されているものの、全体がないので部分をどう組み合わせているのかがわかりにくい。

どこかに全体コード置かれていたりするのだろうか？

Drawerが表示できるようになったが、onTapが反応しない。

Flutter webだからかと思ったけど、Add a Drawer to a screen | Flutterのサンプルは動いているので、他の原因っぽい。

ログアウト機能しか使う予定なかったし、ドロワー以外の方法でも良いか。。

Flutterで始めるモバイルアプリ開発連載一覧：CodeZine（コードジン）の第8回以降を読んだ。

サンプルがわりと分かりやすくて良いと思った。

ChoiceChip と Drawer を取り入れてみた。