くらげになりたい。

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

Flutter

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…

FlutterのLayoutをざっとまとめてみた

Flutterのレイアウト関連、調べてもすぐ忘れるので、 ざっとまとめてみた(*´ω`*) 公式ドキュメントはこのあたり。 Flutter widget index | Flutter Widget catalog | Flutter こっちのほうがカテゴリに分かれててわかりやすい Android開発者向けのガイドだ…

flutter_hooksのuseEffectで一度だけ処理をする

画面を開いたときに、初期化処理などをしたいと思って、 いろいろ調べたときの備忘録(*´ω`*) flutter_hooksのuseEffectを使うとよいっぽい。 rrousselGit/flutter_hooks コード import 'package:flutter/material.dart'; import 'package:flutter_hooks/flu…

Flutterのflavorをちゃんと理解する

本番/開発でfloverを使ってるけど、 flutter_flavorizrベースなので、 あまりちゃんとわかってない。。 Flutterの公式ドキュメントだとこのあたりなので、 それぞれ調べてみたときの備忘録(*´ω`*) Create flavors of a Flutter app | Flutter flutter run -…

Flutterでスプラッシュ画面を追加する(flutter_native_splash)

flutter_native_splashパッケージを使ういい感じにできるっぽい。 対応しているのは、Android/iOS/Web。 flavorにも対応しているけど、Desktop系は非対応。 Desktop Support · Issue #168 · jonbhanson/flutter_native_splash Flutter公式のドキュメントはこ…

Firebase UI for Flutterでログイン画面とかを楽に作る

FirebaseUI for WebのFlutter版があったので、 いろいろ試してみたときの備忘録(*´ω`*) firebase_ui_auth | Flutter Package ちなみに、FlutterFire UIもあったが、今はdeprecated。 firebase_ui_authへのマイグレーションが書かれている。 flutterfire_ui …

FlutterにFirebaseを導入してみる(FlutterFire CLI+Flavor)

ひさびさにFlutterのセットアップをしてたら、 FlutterFire CLIを使った形になってて、かなりハマったので、 いろいろ調べたときの備忘録(*´ω`*) Flutter アプリに Firebase を追加する invertase/flutterfire_cli: A CLI to help with using FlutterFire i…

Flutterでflavor付きだとiOSでbuildエラーになる(flutter_flavorizr)

flutter_flavorizrを使って、 dev、stag、prodの3つのflavorを用意してる。 いつのまにか、iOS/macOSで起動ができなくなったので、 いろいろ調べたときの備忘録(*´ω`*) でてきたエラーメッセージはこんな感じ。 Unable to load contents of file list: '/Ta…

FlutterでGoogle Fontsを扱う(google_fontsパッケージ)

FlutterのYoutubeチャンネルを見てたら、 便利なパッケージがあったので試してみたときの備忘録(*´ω`*) google_fonts | Flutter Package Browse Fonts - Google Fonts 使い方 とりあえずインストール。 $ fvm flutter pub add google_fonts $ fvm flutter p…

BrickHub/masonで動的な質問を扱う(最終確認の例)

前回、前々回の続き。BrickHub/masonでいろいろ試したときの備忘録(*´ω`*) 前回: BrickHub/masonでテンプレート(bricks)を作ってみる - くらげになりたい。 前々回: BrickHub/masonでコード生成をしてみる - くらげになりたい。 前回まででとりあえずの作り…

BrickHub/masonでテンプレート(bricks)を作ってみる

前回の続き。オレオレテンプレートの作り方をみてみる(*´ω`*) BrickHub/masonでコード生成をしてみる - くらげになりたい。 公式ドキュメントだとこのあたり。 Creating Bricks | BrickHub Docs 雛形の作成 $ mason new example ✓ Generated 5 file(s). (34…

BrickHub/masonでコード生成をしてみる

FlutterのYouTubeを見てたらこんなのが(*´ω`*) ドキュメントはこれが公式っぽい。 BrickHub Docs GitHubのTemplateリポジトリを使ってたけど、 アプリ名とかを変えるのがすこしめんどくさい。。 これなら、変数で指定できるので、だいぶ楽になりそう(*´ω`*…

Flutterのはじめかた(16ヶ月ぶり3回目)

何度もFlutterに入門してる気がするけど、 再々度入門してみたときの備忘録(*´ω`*) 前回はこちら Flutterを再開するときにやったこと(再インストール) - くらげになりたい。 Flutter自体もだけど、主要ライブラリも大きく変わっていて、 便利だけど、再度キ…

Flutterのgo_routerでパスとタブを一致させる(StatefulShellRoute.indexedStack/BottomNavigationBar)

FlutterでBottomNavigationBarを使う場合、 currentIndexなどを使う必要があるけど、go_routerでパスと一致させたいなと思って、 いろいろ試したときの備忘録(*´ω`*) StatefulShellRoute.indexedStackを使うといいらしい。 StatefulShellRoute.indexedStack…

FlutterのGlabalKeyについてしらべてみた

go_routerをさわってて、GlabalKeyが出てくるけど、 なにかな?と思って調べたときの備忘録(*´ω`*) GlobalKey class - widgets library - Dart API Flutter GlobalKey - YouTube 特定のWidetsなどを、どこからでもアクセスできるようにできるやつらしい。 V…

Flutterで多言語対応する(l10n/flutter_localizations/intl)

Flutterで多言語対応する方法を少し調べてみたときの備忘録(*´ω`*) (localization/l10nで、internationalization/i18nでじゃない) 公式ドキュメントはこのあたり Internationalizing Flutter apps | Flutter intl | Dart Package 仕組みと流れ 基本的な流れ…

Flutterでレスポンシブに対応する方法

Flutterで画面サイズに応じて、レイアウトを変える方法について、 いろいろ調べてみたときの備忘録(*´ω`*) 公式ドキュメントのこの辺りがベースになるっぽい。 Creating responsive and adaptive apps | Flutter Building adaptive apps | Flutter なので、…

Flutterでページ遷移をいい感じにする(animations/標準トランジション)

go_routerに再入門してみたけど、ページ遷移のアニメーションが微妙。。 Flutterのgo_routerに再入門する - くらげになりたい。 いろいろ見てみると、公式ドキュメントがよいライブラリを公開していたので、 試してみたときの備忘録。 animations | Flutter …

Flutterのgo_routerに再入門する

久々に見直してたら、@TypedGoRouteを使って、 パスパラメタとかも型を意識して呼び出せるようになってた。 go_router | Flutter Package Type-safe routes topic - Dart API go_router(今週のパッケージ) - YouTube いろいろ忘れているので、再度入門した…

FlutterでWebを含めてPlatformを判定する

Flutter WebでTargetPlatformを指定しようとしたら、 TargetPlatform.webがなかったので、 いろいろ調べたときの備忘録(*´ω`*) Webの場合は、kIsWebを使わないといけない TargetPlatform.webやPlatform.isWebは存在しないっぽい。 また、ブラウザでPlatform…

VSCodeでFlutterプロジェクトを新しく作るときにやること

今までAndroid StudioでFlutterしてたけど、 VSCodeでやってみたときの備忘録(*´ω`*) 新規プロジェクトを作成するときいつも忘れるのでまとめておく。 事前準備 flutterとfvmはインストール済みの想定。 flutter Install | Flutter fvm: flutterのバージョ…