torikatsu.dev

Flutterとかプログラミングとかガジェットとか書きます

Flutter

Top level ShellRoute というパターンの紹介

Flutterでgo_routerを使う中で「Top Level ShellRoute」というパターンが意外とイケると気づいたため紹介します。 pub.dev Top Level Shell Routeとは go_router_builderのルート定義の保守性が上がる 余談: pathを / とした TypedGoRouteをトップレベルに置…

riverpod_generatorを使ってみる

2022/11/20追記: スニペットに間違いがあったため修正しました こんにちは、とりかつ@torikatsu923です。 riverpod関連のパッケージにriverpod_generatorというものがあります。 これはアノテーションをつけるだけで各providerを生成してくれるとても便利な…

【Flutter】プリコンパイルされたcloud_firestoreでビルド時間を短縮する

こんにちは、とりかつ(@torikatsu)です。 Flutter x Firebaseの組み合わせで開発をすることがよくあり、DBにCloud Firestoreを選択することも多いのではないでしょうか。 FlutterからCloud Firestoreを利用する場合はcloud_firestoreを使うことになると思い…

【Flutter】flutterfire x riverpod x go_routerで認証ガードをつくるときの落とし穴

はじめに お久しぶりです。とりかつ(torikatsu923)です。 Flutterで開発をしているとflutterfire x riverpod x go_router の構成をとることがよくあります。 この構成でGoRouterの認証ガードを作ってみたらハマリポイントがあることがわかりました。 今回は…

【Flutter】RivderpodのStateNotifierがoverrideWithProviderできるようになっていた

こんにちは、とりかつ(@torikatsu923)です。 RiverpodでScopedProviderを使わなくてもStateNotifierをoverrideできるようになっていました。 今回はStateNotifierをoverrideする方法について紹介します。 今までのStateNotifier.family 以前以下のような記事…

【Flutter】freezed・json_serializableのファイル生成先を変更するためのbuild.yaml

こんにちは、とりかつ(@torikatsu923)です。 今回の記事ではfreezed・json_serializableのファイル生成先を変更する方法を紹介します。 課題感 freezed・json_serializableは、手動で作成するのが面倒なコードをサクッと生成できるため非常に便利です。しか…

【Flutter】Dartの実行環境を作る

こんにちは、とりかつ(torikatsu923)です。 Flutter開発をしていると、Dartの実行環境が欲しい時があります。 例えばFreezedのようなflutter sdkに依存しないDart onlyなパッケージを試したい時などが考えられます。 今回はDartの実行環境の作り方を紹介しよ…

【Flutter】dart-definesでアプリの環境を切り替える

はじめに こんにちは、とりかつ(@torikatsu923)です。 アプリ開発をしていると本番、ステージング、開発と環境を分けたい場合があります。 Flutterでアプリの環境を切り替える方法として、今まではFlavorを使う方法がありました。 最近、DartDefinesという仕…

【Flutter】Canvasで線香花火を作る

はじめに こんにちは、とりかつ(@torikatsu)です。 夏も終わりに近づいてきました。みなさん夏休みはどこかいかれましたか? 私はうっかり夏休みを取り損ねたためずっと仕事でした() 今年はコロナの影響もあって花火大会や夏祭りもなかったため、夏を感じる…

【Flutter】ListViewで子要素がListViewの内側に表示されたか検知する

こんにちは、とりかつ(https://twitter.com/torikatsu923)です。 いきなりですが、FlutterにはListViewという大変便利なWidgetがあります。 api.flutter.dev ListView+ListTileを使うことで数分で以下のようなUIを作ることができます。 このような画面をさく…

【Flutter】いい感じのローディング画面を表示したい!

こんにちは、とりかつ(@torikatsu923)です。 よくアプリでこんな感じのローディング画面を見かけると思います。 アプリ起動時にただ真ん中でぐるぐるするのを見ているより、いい感じのローディング画面が表示されていたら、きっとユーザは退屈しなくて済むと…

【Flutter】riverpod 1.0.0-dev.0の変更点まとめ

こんにちは、とりかつ((@torikatsu923)https://twitter.com/torikatsu923)です。 今朝、riverpodの1.0.0-dev.0が公開されました! I have published a dev-release of Riverpod v1: riverpod 1.0.0-dev.0Go give it a try https://t.co/OWGQ6evu4O— Remi Rou…

null-safetyとお友達になるTips

こんにちは、とりかつ((@torikatsu923)https://twitter.com/torikatsu923)です。 Flutterで開発をする際はDartを書くことになります。DartにはNNBD(null-safety) があり、Flutter側でもnull-safetyの対応がどんどん進んでいます。 null-safetyのおかげで、nu…

【Flutter】MVVMなアーキテクチャで初期化処理をしたい!

こんにちは、とりかつ(@torikatsu923)です。 私は趣味でFlutterアプリの開発をしていて、MVVMライクなアーキテクチャをriverpod+StateNotifier+freezedで状態管理をしています。 この状態管理手法は非常に便利ですが、初期化処理をする際にすこし詰まりまし…

【Flutter】今週のインプット 2021/5/17-23

こんにちは、とりかつ((@torikatsu923)https://twitter.com/torikatsu923)です。 今回の記事は、Flutterについてここ一週間(2021/5/17-23)でのキャッチアップをつらつら書いていこうと思います。 Flutter2.2 Dart2.13 Flutter web dev tool のアップデート r…

【riverpod】画面遷移時にStateNotifierへ値を渡す方法

こんにちは、とりかつ(@torikatsu923)です。 普段私はFlutterで開発しており、riveropd+StateNotifier+freezedでMVVMライクに状態管理をしています。 先日、画面遷移を実装する際、画面遷移時にStateNotifierで作ったViewModelのコンストラクタへ渡そうとし…

Flutterの文脈におけるアーキテクチャと状態管理のパターンと状態管理の手法の違い

こんにちは、とりかつ(@torikatsu923)です。 Flutterは状態管理の手法が数多くあり、状態管理の手法は日々進化しています。 それゆえ、最新の情報に敏感になる必要があり、私は日々色々な記事を読み漁っています。 そんな中でふと、Flutterの状態管理周りの…

riverpodでStateNotifierの取得方法が変わった件について

はじめに こんにちは、とりかつ(@torikatsu923)です。 私はStateNotifier+Riverpod+Freezedを使用してMVVMライクにFlutterアプリを開発しています。 4月の頭にriverpodが0.13.1+1から0.14.0にアップデートされたのですが、このアップデートでは破壊的変更が…

flutter+Stripeでクレジットカード決済をさくっと作る

こんにちは、とりかつ@torikatsu923です。 今回はFlutter+Stripeでサクッとクレジットカード決済を実装する方法を紹介したいと思います はじめに 個人開発をしていると、自身のプロダクトを収益化したい欲に駆られることがあります。 お金を扱う関係上、決済…

Flutterのネイティブ広告をKotlinで実装する

はじめに 先日、Google Mobile Adsのflutterプラグインが発表されました。 developers.google.cn 先祖のプラグインにあたるAdmobは非常に使いづらかった印象だったので、ついにきたか!と非常にわくわくしました。 早速実装をしようと以下の公式docを参照し…

Riverpodのドキュメントを意訳してみた2

お久しぶりです。今回は前回に引き続きriverpodを読んでいたので、メモ代わりに意訳をまとめました。 今回まとめたのは、以下の二つです。 riverpod.dev riverpod.dev Providerをreadする このガイドでは、どうやってProviderを使用するのかを知ることができ…

Riverpodのドキュメントを意訳してみた1

こんにちは。 私は、現在FlutterアプリにRiverpod導入を考えています。導入に先立ってRiverpodの公式ドキュメントを読みました。 いつかドキュメント全体をざっくり見返すときにあまり頭を使いたくないため、メモの意味も兼ねてドキュメントを意訳して記事に…

Dartのコンストラクタ紹介2

こんにちは、とりかつです。 今回は、前回の記事で紹介しきれなかったファクトリコンストラクタについて紹介したいと思います。 ファクトリコンストラクタ おわりに ファクトリコンストラクタ Dartにはgenerative constructor, constant constructorの他にfa…

Dartのコンストラクタ紹介

こんばんは。最近Flutterでアプリ開発をしているとりかつです。 Dartにはコンストラクタが数種類あるのですが、Flutterをはじめたてのころ、けっこうつまづきました。 そこで今回の記事ではDartのコンストラクタの種類と使い方について紹介したいと思います…

WidgetやProviderのライフサイクルについて調べてみた

現在Flutterでアプリ開発をしているのですが、ウィジェットやProviderのライフサイクル周りで少しハマりました。 そこで今回の記事ではWidgetやProviderのライフサイクルについて紹介したいと思います。 ハマったケース1 問題 CustomScrollView内にProvider…

Blocパターンでのフォームバリデーション

最近、Flutterでアプリ開発をしているのですが、Blocパターンでフォームのバリデーションのスマートな実装方法についてまとめられた記事があまりなく、どハマりしました。 そこで今回の記事では、BlocパターンでRxDartを用いたスマートなフォームのバリデー…