くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

Flutter

MelosでFlutter/Dartをモノレポ運用する

Flutter/Dartでもモノレポで運用したいなと思って、 いろいろ調べたときの備忘録(*´ω`*) DartではMelosというCLIツールを使えばいいっぽい melos.invertase.dev FlutterFireやFlameなどでも使われている。 FlutterFire CLIなどでおなじみのInvertase社製。 …

TypeSpec(OpenAPI)でTypeScriptとDartのモデルを共通化する

Firestoreを使ってアプリとサーバを開発していて、 FlutterとCloud FunctionsやNitro Serverでモデルを共通化したいなと思い、 いろいろ調べてみたときの備忘録(*´ω`*) TypeSpecでOpenAPIの定義を書いて、 それぞれの言語で生成するのがいいかもしれない。 …

FlutterのUnit TestでDateTime.now()を固定する

FlutterのUnitTestのときに、現在時刻のテストをどうしようかなと、 いろいろ調べてみたときの備忘録(*´ω`*) このあたりを使うとよいらしい clock | Dart package テストしやすいDateTime.nowのパッケージ fake_async | Dart package Future/Stream/Timerな…

FlutterのTextFormFieldのカスタマイズ

Flutterのテキストフィールドをカスタマイズしたいなと思い、 いろいろ調べてみたときの備忘録(*´ω`*) 背景や枠のデザインはInputDecorationでするっぽい サンプル TextFormField( controller: controller, // オートフォーカスさせるか autofocus: true, /…

Dart/Flutterの独自パッケージを非公開で扱う

npmはGitHub Packagesでprivateなライブラリとして扱えるけど、 Dart/Flutterの場合はどうしようかなと、いろいろ調べてみたときの備忘録(*´ω`*) 公式ドキュメントをみると、Git packagesが使えるっぽい。 Package dependencies | Dart # ブランチ省略 depe…

Flutterのアプリ名を多言語化する

Flutterの多言語対応(internationalization/l10n)は、 flutter_localizationsをつかった方法が公式ドキュメントはこれ Internationalizing Flutter apps | Flutter Android/iOSのビルド関連はこのあたりに書かれているけど、 Build and release an Android a…

FlutterであとからPlatformを追加する

Android/iOS/Webなどいろいろ対応してるけど、 あとから追加や再作成したいなと思ったときの備忘録(*´ω`*) # webとmacosを作成 $ flutter create --platforms=web,macos . 実行すると再作成されるので、 README.mdやlib/main.dartなどもできてしまうので注…

Flutterで9-patchみたいに画像をいい感じに伸縮させたい(centerSlice)

FlutterでもAndroidの9-patch画像がつかえないかなと思い、 いろいろ調べてみたときの備忘録(*´ω`*) 9.pngファイル自体は対応していないが、 centerSliceで伸縮する部分を指定すればいいっぽい。 Image.asset( "images/button.png", height: 100, width: 35…

Flutter doctor --android-licensesでエラーになる

ひさびさにflutter doctorを実行するとこんなエラーが。。 $ fvm flutter doctor Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 3.16.9, on macOS 13.2.1 22D68 darwin-arm64, locale ja-JP) [!] Android tool…

Flutterで現在の言語設定を取得する

以下の記事からの引用。 Localizations.localeOf(context)で取得できるっぽい。 Flutterで端末内の言語設定を取得する | okaryo.log Locale locale = Localizations.localeOf(context); print(locale); // en_US print(locale.languageCode); // en print(lo…

FlutterのGestureDetectorでpaddingでもタッチを検出する

GestureDetectorをつかってContainerもタッチできるようにしたかったけど、 余白で反応しなかったので、いろいろ調べてみたときの備忘録(*´ω`*) HitTestBehaviorを設定するらしい 使い方 使い方はこんな感じ GestureDetector( // これを指定 behavior: HitT…

Flutterでステータスバー/ナビゲーションバーを非表示にする

Flutterでも全画面モードみたいに、 上のステータスバーや下のナビゲーションバーを非表示にしたいなと思い、 いろいろ調べてみたときの備忘録(*´ω`*) SystemChrome.setEnabledSystemUIMode()で設定できるらしい setEnabledSystemUIMode method - SystemChr…

FlameのGameLoopはどう実現しているのか

前回、Flutterのゲームエンジン「Flame」 に入門してみたけど、GameLoopってどうしてるのか気になり、 いろいろ調べてみたときの備忘録(*´ω`*) FlutterのFlameに入門する - くらげになりたい。 Tickerで実現してるっぽい ソースを見るとすごくシンプル impo…

FlutterのFlameに入門する

ずっと気になってたFlutterのゲームエンジン「Flame」 とりあえず、ドキュメントを読みつつ、 いろいろ整理したときの備忘録(*´ω`*) Flameとは | Getting Started Getting Started — Flame Flutter用のゲームエンジン。 シンプルで効果的なゲームループとゲ…

Flutterで文字サイズを自動で調節する(FittedBox)

Flutterで大きい文字サイズを指定したときに、 いい感じにサイズダウンしてほしくて、 いろいろ調べてみたときの備忘録(*´ω`*) FittedBoxを使うといいらしい(*´ω`*) FittedBox class - widgets library - Dart API AppBar( centerTitle: true, title: Fitt…

FlutterのWidgetの位置情報を取得する(RenderBox)

FlutterでWidgetの位置情報(Position)を取得したいと思い、 いろいろ調べてみたときの備忘録(*´ω`*) 位置情報はRenderBoxから取得できるっぽい。 使い方 自分自身の位置情報はこんな感じ。 RenderBoxはBuildContextから取得できる。 class FooWidget extend…

Flutterで`pointer-events: none`はIgnorePointer

Flutterでポインターイベントを拾ってほしくないなとおもい、 いろいろ調べてみたときの備忘録(*´ω`*) IgnorePointerを使えばいいらしい(*´ω`*) IgnorePointer class - widgets library - Dart API IgnorePointer( ignoring: true, child: RaisedButton( o…

Riverpodでstop/restartができるカウントダウンタイマーを作る

カウントダウンタイマーがほしくて、いろいろみていたけど、 よさそうなのがなかったので、試してみたときの備忘録(*´ω`*) ほしいもの start/stop/restart/resetができる 初期値/インターバルが設定できる 現在の時間が取得/listenできる Timer.periodicやS…

DartのDurationをいい感じにフォーマットする

DartのDurationにHH:mm:ss.SSみたいにフォーマットしたかったので、 いろいろ調べてみたときの備忘録(*´ω`*) Formatterはないっぽく、自前で整形しないといけないっぽい。。 整形する関数 HH:mm:ss.SSっぽくするのはこんな感じ。 String formatDuration(Dur…

Flutterで無限ループする背景を表示する(OverflowBox/AnimationController)

Flutterで横スクロールみたいな、流れる背景がつけたいなと思い、 いろいろ調べてみたときの備忘録(*´ω`*) できたのはこんな感じ。 このアドカレで作ったアプリで使っているやつ qiita.com つくりかた 基本はこの2つを使う感じ。 OverflowBox class - widge…

Flutter Webでもいい感じにシェアできるようにする(share_plus)

Flutterでシェア機能を利用したい場合、share_plusパッケージがあるけど、 Flutter Webの場合は、Web Share APIを使っていて、 Web Share APIをサポートしていないブラウザの場合、メーラーが立ち上がってしまう。。 なんとかいい感じにできないかと思い、 …

Flutterで好きなアイコンを追加する(IconData/FlutterIcon)

FlutterのIconで好きなアイコンを追加したいなと、 いろいろ調べてみたときの備忘録(*´ω`*) IconDataはフォントらしく、フォントファイルを追加する必要があるっぽい。 Icon(Icons.copy); // Icons.copyの中身 /// <i class="material-icons md-36">copy</i> &#x2014; material icon named "copy…

Flutterで特定のプラットフォームのときだけimportを切り替える(Conditional Import)

Flutterでdart:htmlなど特定のプラットフォームでしか動かないパッケージを 使いたいなと思ったときにいろいろ調べたときの備忘録(*´ω`*) Conditional Import(条件付きインポート)という機能があるらしい。 Conditionally importing and exporting library …

Flutterでトースト通知を表示する(toastification)

FlutterでToast通知を使いたいなと思って、 いろいろ調べてみたときの備忘録(*´ω`*) 調べてみると色々あるけど、 toastification | Flutter Package fluttertoast | Flutter Package cherry_toast | Flutter Package 見た目的に好きだったtoastificationに…

Flutterでクリップボードにコピーする

Flutterでクリップボードにコピーしたいなと思ったときに、 いろいろ調べてみたときの備忘録(*´ω`*) これでいけるっぽい(*´ω`*) import 'package:flutter/services.dart'; // copy final data = ClipboardData(text: "foobar"); await Clipboard.setData(d…

GitHub ActionsでFlutterをビルドする(subosito/flutter-action)

FlutterでもGitHub Actionsでビルドしたいなと思って、 いろいろ調べてみたときの備忘録(*´ω`*) subosito/flutter-actionでできるらしい ワークフローファイル 使い方はこんな感じ。 # .github/workflow/flutter_build.yml name: "Flutter Build Deploy" "o…

Riverpodの各Providerに再入門する(3度目)

Flutterの状態管理ライブラリのRiverpod。 いつも迷うので、再度入門してみたときの備忘録(*´ω`*) プロバイダの一覧 プロバイダの種類 生成されるステートの型 具体例 StateNotifierProvider StateNotifierのサブクラス イミュータブルで複雑なステートオブ…

Flutterで端末の文字サイズに依存しないようにする(TextScaler/textScaleFactor)

Flutterでは、端末の文字サイズの設定に応じて、 文字の大きさなどを自動で調整してくれる。 ただ、予期せぬレイアウト崩れなども起こるので、 無視したり、指定した範囲内のみにしたい。。 個別に設定できるけど、一括で設定したいなと思ったときに、 いろ…

FlutterのRadioボタン/Checkboxのサイズを変更する

ラジオボタンやチェックボックスのサイズを変えたいなと思ったけど、 Issueになってるぽかった(*´ω`*) Checkbox/Radio size · Issue #81334 · flutter/flutter ワークアラウンドとしては、Transformを使って拡大縮小すればよいっぽい Transform.scale(scale…

Flutterのcollectionパッケージが便利だった

dartでこんな感じの 「条件に一致した最初の要素を取得する」 みたいなことをしたかった。 final item = items.firstWhere((v) => v.id == 1); 見つからないときはnullが返ってきてほしいけど、 条件に合うものがないと、StateErrorがthrowされる。。 orElse…