画像を表示する際、先に画像サイズがわかっている場合は以下のように高さを計算しあらかじめ高さを確保しておくと読み込み後に高さがガタッと変わることなく表示できて体験が良い。 なお以下は CachedNetworkImage を使っているが、LayoutBuilder で constra…

Flutter hooks で useTextEditingController(); とか useScrollController(); が使えてめっちゃ便利と思っていて、これを webview_flutter などでも使いたい。 やり方は前に Flutter hooks で画面遷移のイベント変化を custom hooks でいい感じに検知する - …

Flutter 3.10.1 にしたら flutter format が使えなくなってしまった The "format" command is deprecated. Please use the "dart format" sub-command instead, which has the same command-line usage as "flutter format". github actions で flutter form…

Flutter で画面遷移の検知をするのには routeObserver.subscribe(...) したり with RouteAware する必要があって、結構めんどい。(参考: 【Flutter】RouteAwareで遷移を検知する方法 | 417.Run()) 理想としては、 final appLifecycleState = useAppLifecycle…

flutterfire configure すると ios/firebase_app_id_file.json が生成される。 Crashlytics で利用される firebase_app_id_file で grep すると Xcode の Run Script のみ検出される。ここだけで使われているようだ。 "$PODS_ROOT/FirebaseCrashlytics/uploa…

今まで Flutter 開発は Android Studio でやっていたけど、VSCode に移行した。 理由は AI の波が来ていて VSCode がその波に一番のりやすそうだったから。GitHub Copilot とかはライセンスの問題はあれど今後解決されていくだろうし、基本的に VSCode に寄…

cloud_firestore_odm で生成された型を riverpod generator で利用したかったがダメっぽい。これは firestore がどうこうではなく、generated されたコードに対し generator を使うことができないっぽい。 まず以下のコードで FeedQuerySnapshot が生成され…

Flutter には SliverAppBar というものがあり、これを使うとヘッダーの AppBar をいい感じに表示することができる。 Twitter iOS アプリのプロフィールページなどのように、PullToRefresh するとヘッダー画像が blur していい感じに表示される、というのも S…

App Store でリリースしたら対応言語が EN 英語になってて、これを日本語に修正する。 Xcode 側で修正を行う これは App Store Connect の設定ではなく、Xcode でビルドする時の設定。 PROJECT の Localization に Japanese を追加する 対応としてはこれだけ…

Flutter Advent Calendar 2022 の13日です！ qiita.com Flutter で storybook 的なことができるライブラリで有名なのだと monarch, storybook_flutter, Widgetbook がある。 今回は web に公開できるやつを選びたい。デザイナーやPdMに見てもらったりが簡単…

Firebase Remote Config を Android で利用しようとしたら以下のようなエラーが出た。 I/flutter ( 6164): ----------------FIREBASE CRASHLYTICS---------------- I/flutter ( 6164): FormatException: Invalid envelope I/flutter ( 6164): #0 StandardMet…

fvm を利用したプロジェクトをアップグレードする。 $ fvm releases -------------------------------------- May 11 22 │ 3.0.0 stable -------------------------------------- $ fvm install 3.0.0 $ fvm use 3.0.0 $ fvm flutter --version Flutter 3.0.…

Flutter で画面回転を無効にし縦固定にしたい、としてググると SystemChrome.setPreferredOrientations を設定しろと出てきたりする。 しかし、これだと splash screen は横で表示されてしまうので良くない。AndroidManifest.xml や Info.plist で設定する方…

$ dart ./scripts/page_generator.dart sign_in みたいにしたら sign_in_page.dart, sign_in_view_mode.dart, sign_in_view_state.dart みたいに必要なファイル群をガッっと生成してくれるやつを作る。iOS でいう Generamba とかそういう系のやつ。 既存のコ…

pub.dev 画面遷移の際に type safe にできるので auto_route を使っているが、WillPopScope で囲んだ AlertDialog を閉じれずにハマった。 Android の戻るボタンでダイアログが閉じれないように WillPopScope で囲んだダイアログを作る。Android back ボタン…

Icons.account_circle の人間の部分の色だけ変えたい。が、それをやるのは結構ややこしい。普通にアイコンを設置すると人間部分は透過となっている。 After のように人間部分に色を設定する。 Before After 最初のコード 普通に actions に IconButton を入…

iOSアプリ(もしくはFlutterアプリ)を開発するとき、iOS Simulator は iPhone を使うより iPad を使うと色々な画面サイズが簡単に確認できて便利。なお、iPadアプリに対応していることが前提。(この開発方法は前職の同僚がやっていた) iPhone だと固定サイズ…

www.youtube.com この Youtube で述べられている内容だが、Flutter で build メソッドがでかくなってきて component に分割するか〜と思う時がある。 その時、 Helper Methods と呼ばれる方法と、 class で Widget を作る方法があるがパフォーマンスの観点か…

Dart でデフォルト引数を使いたくて、こんな感じで書いてみると The default value of an optional parameter must be constant. というエラーが出てしまう。 class HogeClass { // The default value of an optional parameter must be constant. HogeClass…

iOS には Readable Content Guide という考え方があり、iPad などの大きな端末では横幅いっぱいにコンテンツが表示されないようになっている。 参考: iOSでの読みやすい幅 - クックパッド開発者ブログ Flutter で iPad を意識せず実装するとボタンが横に間伸…

Flutter のテスト実行には watch がなくて不便だと思っていたのでファイルの変更を検知して自動でテストを実行する。 watchman を使うので別に Flutter に限った話ではない。 watchman いれる https://facebook.github.io/watchman/ install 方法は色々ある…