タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
デジスマチームの荒谷(@_a_akira)です。最近の特技は、家の外観1枚と内装4,5枚の写真から施工したハウスメーカーを特定することです。AIにはまだ負けません。 この記事はデジスマチームブログリレーの10日目の記事です。 普段はデジスマ診療のアプリ開発を担当していますが、今年の初めから新規事業のアプリをFlutterで開発しました。このアプリは、エムスリーで7つ目のFlutterアプリとなります。 新規開発にあたり、国内外の設計事例やカンファレンスを調査しましたが、「Flutterのアーキテクチャにおける正解は何か」という問いに、未だ明確な答えがないのが現状だと認識しています。 デジスマのアプリは5年前の2020年頃に開発したため、当時はまだBLoCやProviderが主流でした。同時期にRiverpodが登場し、今後の主流になるだろうという潮流があったことを記憶しています。また、当時
使ったライブラリ riverpod hooks_riverpod dio freezed json_serializable Result アーキテクチャのところに行く前に、、 Flutter公式デモcompass_appにもあったResultを取り入れてます。 APIの戻り値に使います。 ただし、そこからAIさんにもみてもらって、いくつかメソッドを追加したり、一部の名前を変更したりしてます。 Swiftだと Result.success / Result.failure ですけど Result.ok / Result.error なんですね。 result.dart sealed class Result<T> { const Result(); /// Creates a successful [Result], completed with the specified [value]
Flutter 3.x, Dart 3.x, Riverpod 2.x に対応🚀 ✨直近の主な更新 - 2024年9月1日：ref.listenManualについての説明と用語集チャプターを追加 - 2023年10月6日：「Riverpod v3.0 の変更点（v2.xと比較）」チャプターを追加 - 2023年2月23日：最新情報をもとに全体的に改修・Tipsのチャプターを追加（内容少） - 2023年2月19日：Testのチャプターを追加（内容少） - 2023年2月12日：riverpod_generatorとNotifierProviderのチャプターを追加 --- 本書は、「Riverpod」に主眼を置いた、実践的入門書です📚 状態管理のライブラリが豊富なFlutterですが、その選択肢の多さに迷われる方も少なくないのではないでしょうか？ その数ある状態遷移ライブラリの中でも広
はじめに Flutterにおける状態管理の手法は、数多く存在します。 筆者は、その中でもRiverpodを好んで利用しています。最近はFlutterKaigi 2023の公式アプリでも採用しました。 このようにRiverpodを採用していると、「Riverpodの勉強方法はどのようにすればいいのか」とか、「便利さがよく理解できない」という声をよく聞きます。勉強方法に関しては、公式ドキュメントを読むのが一番です。とはいえ、急に公式ドキュメントを読むのはハードルが高いかもしれません。 本記事では、筆者がRiverpodを好んで使う理由をまとめます。「なぜRiverpodを便利だと思う人がいるのか」を知ることで、Riverpodへの関心を高めてもらえれば幸いです。 TL;DR 文章が長くなってしまったため、先に結論を簡潔に。書き始めた時には、1万字を超えるとは思っていませんでした…。 以下の4つ
はじめに FlutterでRiverpodを使った開発をしていると、必ず遭遇する設計上の疑問があります。 「RepositoryクラスにRefを渡してもいいの？」 この疑問は単純そうに見えて、実はRiverpodの設計思想とクリーンアーキテクチャの原則が交差する重要なポイントです。本記事では、この問題を深く掘り下げ、なぜアンチパターンとされるのか、そしてどのような設計が推奨されるのかを実践的な観点から解説します。 TL;DR ❌ NG: ビジネスロジック層（Repository/Service/UseCase）にRefを渡す ✅ OK: Provider関数内でRefを使い、必要な依存関係のみを注入 理由: 単一責任の原則、テスタビリティ、フレームワーク非依存性の維持 解決策: コンストラクタインジェクション、メソッド引数、Interceptorパターン 例外: ドメインロジックが薄いシン
今回紹介する Riverpod は Flutter の状態管理パッケージです。Riverpod のおかげで僕の Flutter ライフは最高に快適になりました。紛れもない神パッケージです。今まで provider パッケージをフル活用してアプリを開発してきましたが、新しいアプリでは Riverpod パッケージを使っています。 Riverpod は Flutter でよく使われている provider パッケージを開発している人が、provider パッケージで問題のある部分を改良したものです。 2021年の11月に正式版（バージョン 1.0.0 )が公開されて、より安心して使えるようになりました。 Riverpod の実践的なアーキテクチャについては、こちらまで。 provider の問題点と Riverpod の解答 provider パッケージは充分に優れていて、正直そんなに困ること
Oracle Database Technology Night 92 Database Connection control FAN-AC
Riverpod is a reactive caching and data-binding framework that was born as an evolution of the Provider package. According to the official documentation: Riverpod is a complete rewrite of the Provider package to make improvements that would be otherwise impossible. Many people still view it as a "state management" framework. But it is much more than that. In fact, Riverpod 2.0 borrows many valuabl
When building complex apps, choosing the correct app architecture is crucial, as it allows you to structure your code and support your codebase as it grows. Good architecture should help you handle complexity without getting in the way. But it's not easy to get it right: “Not enough” architecture leads to poorly organized code that lacks clear conventions“Too much” of it leads to over-engineering,
id:kikuchy です。 婚活サービスyoubrideのスマートフォンアプリは以前からFlutterを採用しています。 developer.diverse-inc.com このアプリでは、始めはscoped_model、次にproviderを状態管理ツールとして採用してきました。 この度、通常の開発を大きく止めることなくproviderからriverpodへと移行できたので、どのように移行したのかをお話したいと思います。 前提：なぜriverpodにしたのか providerパッケージ（以下、provder）もriverpodパッケージ（正確にはflutter_riverpodパッケージ。以下、riverpod）も同じ作者（Remi Rousseletさん）による状態管理＆依存性注入のためのライブラリです。 両者で実現できる機能はほとんど変わりません。 できることは主に以下のとおりです
@riverpod Future<String> boredSuggestion(Ref ref) async { final response = await http.get( Uri.https('boredapi.com', '/api/activity'), ); final json = jsonDecode(response.body) as Map; return json['activity']! as String; } class Home extends ConsumerWidget { @override Widget build(BuildContext context, WidgetRef ref) { final boredSuggestion = ref.watch(boredSuggestionProvider); // Perform a switch
そんな疑問、悩みにお答えします！ 本記事は、Flutter × Riverpodの基本的な使い方の解説記事となります。 サンプルアプリを基にRiverpodにおける状態の共有、参照、更新の方法を解説します。 記事後半では、Flutter大学で公開している、 Flutter × Riverpodのサンプルリポジトリを紹介します。 ぜひ読んでRiverpodの使い方を学んでみてください！ Riverpod とは？ 背景 Riverpodについて解説する前に、まず背景として解決したい問題を紹介します。 例えば、カウンターアプリのカウンターの値を管理するクラスがあったとして、 このインスタンスをアプリの色々なところで使いたい、 そんな時どうすれば良いでしょうか？ 思いつく方法としては、 以下の図のように main.dartでインスタンス(Instance)を定義し、 Widget ツリーの下層にイ
タグ AIandroidAndroid StudioAnimatedBuilderAnimatedContainerAnimationAnimationControllerAppLocalizationsAssetsboxdecorationbuttoncameracatchCDChatGPTCICircleAvatarCircleBordercompileSdkVersion 33Completerconditional importcurveDartdatetimedecodedevice nameElevatedButtonencodeenhanced-enumsenumfindfinderFirestoreFlutterflutter genflutter pubFlutter WebFlutterFireFlutterGenfreezedfvmGestureBindingGlas
Riverpod 3が登場するいま、FlutterやRiverpodの表面的な使い方を超えて、宣言的UI・状態管理の本質や設計理論を深く掘り下げます。 本書は、現代的なUI設計や状態管理の根本原則を、Flutter/Riverpodを題材にしつつも、他のフレームワークや一般的なソフトウェア設計にも応用できる普遍的な視点から解説しています。 「なぜそう設計するのか」「どこまで粒度を分割すべきか」「責務の分離とは何か」といった設計上の本質的な問いに答え、実践的なコード例とともに理論の追求と実践を目指します。 ※ 何か本書で洞察があれば、支援いただけるとうれしいです。
改めてRipverpodの基本的な使い方を整理しておきたくなったので書き出してみる。 Riverpod Compile safe No more ProviderNotFoundException or forgetting to handle loading state. Using Riverpod, if your code compiles, it works. 定義したグローバル変数を直接参照するので、コンパイルできる=型があっていれば、動作が保証されると。より安全にプログラミングできるってことですね。 Provider, without its limitations
FlutterのTodoアプリで Riverpod useProvider StateNotifier Freezed の基本的な使い方を覚える Flutter の Riverpod / useProvider / StateNotifier / Freezed の基本的な使い方を覚えます。 筆者は Flutter 初学者の為、 題材として簡単な Todo アプリを選びました。 前回の記事で Todo アプリを題材に Riverpod / useProvider / ChangeNotifier の基本的な使い方を書いているので、今回はこちらの記事をアップデートする形で実装していきます。 アーキテクチャは簡易版の MVVM で、今回外からデータ取得などしないので Model は作成せず、View と View からロジックを引き剥がす為、 ViewModel のみ実装します。 最終的にこん
はじめに お久しぶりです。とりかつ(torikatsu923)です。 Flutterで開発をしているとflutterfire x riverpod x go_router の構成をとることがよくあります。 この構成でGoRouterの認証ガードを作ってみたらハマリポイントがあることがわかりました。 今回はその落とし穴と回避方法について紹介します。 はじめに FlutterFire x riverpod x go_routerの落とし穴 回避方法 おわりに FlutterFire x riverpod x go_routerの落とし穴 FlutterFireでは認証状態はonAuthStateChanged()でStream<User?>として取り出すことができます。 ここにriveropdのStreamProviderを組み合わせると、認証状態の変更を監視するのが容易になります。 しかし、
本記事の実装で以下のRiverpodのアンチパターンを踏んでいるため、あくまで参考程度としてください。 再描画範囲を限定していない（本記事の実装ではScaffoldを丸ごと再描画している） 対象読者 Flutterの基礎知識がある Riverpod, Freezedを使ったことがない ドメイン駆動設計（DDD）でのアプリ開発がない 本記事の目的 本記事では各技術の説明を最低限にし、実際に手を動かすことでRiverpod+Freezed+DDDのミニマムな開発が体験できるように執筆しています。 前提条件 Flutterプロジェクトを作成していること パッケージのインストール Riverpod 以下を参考にパッケージをインストールします はじめに | Riverpod pubspec.yamlに以下を追記します
本記事は編集時点の最新バージョンである v2.1.1 を元に執筆しています。バージョンによっては挙動やシンタックスが異なる点にご注意ください。 はじめに Riverpod、非常に便利で強力な状態管理パッケージですね。 私が最初に触り始めたのは約2年前頃の v0.6.0 ですが、そこから v1のリリース・v2のプレリリースと着々と進化を遂げているのが分かります。 そんな有用パッケージですが、ドキュメント 自体は用意されているものの（数ヶ月前日本語訳も提供 されましたね👏）、その内容は Provider の種類や使い分けや修飾詞に留まっており、少しまだ物足りなさを感じます。Flutter のドキュメントが手厚すぎるがゆえに相対的にそう見えてしまっているだけかもしれません。 今回は、上記のドキュメントにはそこまで手厚く記載されてはいないものの、Riverpod を扱う上で重要な AsyncVa
Flutter Riverpod で DI したクラスを Mockito でモック化して UnitTest を書きます。 アーキテクチャとして MVVM を想定し、Data 層である ApiClient Class と Repository Class を Reverpod で DI します。 Repository Class に DI した ApiClient Class を Mockito の Mock 対象とします。 Mockito を使用して Repository Class の Unit Test を書いていきます。 環境macOS Big Sur 11.3.1Android Studio 4.2.1Flutter 2.2.0Dart 2.13.0Package installpubspec.yaml に以下を追記して flutter pub get を実行します。 depend
The one controversy about flutter is the fact that there is way “too many” state management solutions and making the choice for which to use is a challenge. There is some truth to that as well as the fact that there is a mostly overlooked advantage to this, I will write a detailed article about this sometime soon, but the one advantage is that it is rather easier to have state management solutions
はじめに Riverpod v3のリリースから3〜4ヶ月経ち、またanalyzerのアップデート対応のためにバージョンアップを検討している方も多いのではないでしょうか？ [1] v3はv2に比べると、特に参照が切れたProviderの検知が強化されました。結果として、不要なProviderが破棄されやすくなっています。このためbuildメソッド内でref.watchを利用している箇所には影響がないものの、ButtonのonPressed内でref.readを利用している箇所に影響が出ることがあります。 この記事では、特にref.readで非同期処理を参照する時の実装について現在考えていることをまとめます。また、最近考えている「StatelessなSingletonはkeepAliveしてもよいのでは？」という点についても触れたいと思います。 なお、すべて筆者が調べたり考えたりした内容です。
本セクションの前に「プロバイダとは」のセクションに目を通していただくことをおすすめします。 ここでは複数のプロバイダのステート（状態）を組み合わせる方法をご紹介します。 プロバイダのステートを組み合わせるこれまでプロバイダの簡単な使用方法をご紹介しましたが、実際の開発ではプロバイダを他のプロバイダと組み合わせる場面が多いかと思います。 このような場面では、プロバイダのコールバック関数に渡される ref オブジェクトの watch メソッドを使用してください。 例として、次のようなプロバイダがあるとします。
Flutter Riverpod は状態管理の package です。 Flutter Riverpod は DI としても利用できてテスタビリティを向上させることができます。 DI をするとインスタンスの mocking が可能になり、テスタビリティが向上します。 Flutter では代表的な Mockito という mock package があるので、そちらを利用して 基本的な UnitTest を書くことができます。 また、Http 通信をする 箇所は通信を mock する MockWebServer という package があるので、そちらを利用して UnitTest を書くことができます。 今回は題材として簡単な Github の repository 検索アプリを選びました。 検索キーワードで Github の repository 検索をするシンプルなアプリです。 アーキ
【概要】 1/23開催された『potatotips #94 @ 株式会社YouTrust』での登壇資料になります。 【主な内容】 - サンプルアプリケーション紹介 - 検索可能なマルチセレクト形式のUI実装例 - buttons_tabbar（タブ切替）とdropdown_search（検…
はじめにenechainでソフトウェアエンジニアをしている@kkagurazakaです。 enechainが提供しているeSquareというプロダクトは、電力を筆頭に、あらゆる企業が様々なエネルギー商品を売り買いできるオンライントレーディングプラットフォームです。そして、そのモバイルアプリはFlutterで開発されています。 今回の記事では、eSquareのモバイルアプリで採用されており、Flutter開発で広く使われている状態管理 & DIライブラリであるRiverpodについて取り上げます。そんなRiverpodですが、2022年10月に初のメジャーバージョンアップであるv2がリリースされました 🎉 enechainのアプリもv2に対応済みで、無事に運用できています。本記事ではこのRiverpodをv2にアップデートするにあたり、参考となる情報をお伝えします。 ビルドを通すまで実のと
Riverpodは、筆者の一番好きなFlutterの状態管理ライブラリです。 この記事では、筆者が見聞きする中で、「RiverpodのProviderにおいて、ここに注目するとうまく整理できるのではないか？」と考えていることをまとめます。 はじめに 本記事においては、riverpod_generatorが導入されていることを前提とします。 そのほか、筆者がどのようにRiverpodを捉えているかについては、過去に書いた記事をご参照ください。 変化の伝播 あるProviderが変化し、それを参照しているProviderが再計算されることを考えます。例として、1秒おきに更新されるProviderと、その日付を文字列かするProviderを示します。 @riverpod DateTime current(Ref ref) { final timer = Timer( const Duration
はじめに ご覧いただきありがとうございます。ganです。 Riverpod と Firebase Auth を使いたい、、、けど、あんまり情報ない、、、 そう思ってしまっいまいました。ということで Riverpod と Firebase Auth のテンプレート的なコードを考えていこうと思います。 こういう実装はどうですか？という提案ですので、こうした方がいい、その書き方はあまり良くない、ということがあればコメントください！おなしゃす！！ それではよろしくお願いします！ 対象者 Riverpod、認知はしてる Riverpodについてもっと詳しく知りたい方 認証にFirebase Authを使いたい方 今回の内容 Firebase Authのメールアドレスとパスワードを使ったサインインとサインアップ、サインアウトの実装（全体のコードはgithubから見れます！ぜひ見てね！！） Riverp
□ 登壇者 Kakeru Nakabachi GitHub: https://github.com/b4tchkn Twitter: @b4tchkn □登壇資料 https://speakerdeck.com/b4tchkn/timudecai-yong-siteiruriverpodwoshi-tutaflutterfalseakitekutiyatoriverpod-v1-dot-0-0 □Flutter × Kotlin Multiplatform by CyberAgentについて サイバーエージェントでは、モバイルアプリのクロスプラットフォーム開発に注力しており、FlutterやKotlin Multiplatformのようなクロスプラットフォームフレームワークを実際にプロダクトに導入するケースも増えてまいりました。開発過程で得た知見を業界内に還元すべく、Flutter、K
この記事は 2025/01/23 Flutter エンジニアの集いの発表内容をまとめ直したものとなります。 パネルディスカッションめちゃくちゃ盛り上がりました。またやりたい〜〜 概要 Riverpod は難しいとよく話題に上がります。仮に難しくとも相応の理由があれば良い技術選定になるはずですが、代替手段に溢れていると難しさはデメリットになりがちです。 とくに、状態管理手法にはProvider もあるし、こちらのほうがシンプルです。せっかく使うなら、「僕はこういう理由で Provider ではなく Riverpod を使うんだ！」言いたいなぁと思いました。 この記事は、僕がそう言えるようになるための調査記録と見解です。 Provider vs Riverpod という話題には公式の解説があって、だいぶ参考にしました。こちらのほうが原典に近いので良かったら読んでみてください。 ※ 本記事におけ
【Flutter】Integrationテストのシンプルな書き方Flutterでアプリを作成する際に自動テストをしっかりと書くようにしています。 Flutterによる自動テストを3記事に分けて公... ユニットテストするControllerクラス Riverpodでコードを書いていると、Controllerのようなロジッククラスをよく書くと思います。 ロジッククラスにはアプリの処理がゴリゴリに書いてあるので、しっかりとテストをしたいところです。 今回は以下のような超簡易Controllerクラスをテストする場合を想定します。 final calcProvider = StateNotifierProvider((ref) => CalcController(ref.read)); class CalcController extends StateNotifier<CalcState> {
riverpod_generator Riverpod の自動生成ができるパッケージです。実装したい項目をふわっと書いて、@riverpod のアノテーションを付けたらいつもの build_runner くんが自動生成してくれます。 適当な例を試してみます。必要なパッケージは次の通り。 $ flutter pub add riverpod riverpod_annotation $ flutter pub add build_runner riverpod_generator -d カウンターアプリでを例に解説したいので、とりあえず数字を監視して画面に表示させてみます。 いつもの手書きの場合 final CounterProvider = Provider<int>((ref) => 0); ... @override Widget build(BuildContext context,
Provider使い分け Provider 状態を持たない値やクラスで使う。 基本的に値のoverrideはProviderScopeでのみ可能。 StateProvider 状態を持つ値で使う。 watch(stateProvider).state = newValue で状態を更新できる。 StateNotifierProvider 状態を持たせたい、かつ値を操作するビジネスロジックを持たせたい時に使う intやboolなど単純な値でも良いし、いくつかの要素をまとめたオブジェクトでも良い。 .autoDispose 参照がなくなったら、自動的に破棄されても良い （画面単位のProviderなど） .family Providerに直接引数を渡して使いたい。 値によって複数作る可能性があるProviderなどで使う。
import 'package:flutter/material.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:flutter_mvvm/view/home_page.dart'; void main() { runApp(const ProviderScope(child: MyApp())); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, title: '
この記事は Flutter Advent Calendar 2021 カレンダー2の8日目の記事です。 実務のアプリ、providerからriverpodに移行しよう！…できるか！？ つい1ヶ月ほど前の11/5に riverpod のバージョン 1.0.0 がリリースされました。 riverpod は provider の欠点を解消するモチベーションで作成されたものなので、 provider を使用しているプロジェクトではぜひ riverpod を使用したいものです。 私が所属している会社では古くからFlutterアプリ開発をしており、かなり以前から provider を使用して依存性注入と状態管理を行ってきました。 山のようにある provider.Provider や flutter_state_notifer.StateNotifierProvider を全部一気に移行するのは、nu
今個人で作っているアプリの状態管理をFlutterの状態管理手法の選定 を参考に以下の構成にしています。 Riverpod StateNotifier freezed FlutterHooks この構成のアプリのデータ永続化にsembastを採用しました。この状態管理の構成とsembastについて扱った日本語の記事がないようだったので、後から自分で参照できるように記事にします。sembastを利用している部分を任意の構成での書き方に合わせればsembastを導入できると思います。 触れないこと（本記事の前提知識） 状態管理に関係するパッケージの使い方 状態管理をこの構成にした理由 Flutterの基礎知識 環境 ❯ flutter --version Flutter 1.22.6 • channel stable • https://github.com/flutter/flutter.g
Dart/Flutterの状態管理ライブラリとして有名なRiverpodですが、ライブラリの利用から一歩踏み込んで、内部の実装を整理・図解してみます。 対象読者： Riverpod / StateNotifierを使ったことがある方 flutter_riverpod1.0.3、flutter_state_notifier0.7.1を元に解説します 全体的な仕組み理解を優先し、コードや図では一部省略し、主要な部分を載せます （各所にgithubへのリンクを張るので、詳細はそちらからどうぞ！） おさらい Riverpodを導入するアプリでは、 ProviderScopeでアプリ全体を囲み、
作ったもの 超絶シンプルなTodoアプリです。 SQLiteの勉強がてら作りました。 Riverpod・Flutter hooks・StateNotifier・freezedを使用しています。 UIは適当です。 一覧 追加 クローン後、rootディレクトリで flutter pub run build_runner build --delete-conflicting-outputs flutter run これでアプリが起動します。 実装 ディレクトリ構造 ├── lib │ ├── main.dart │ ├── views │ │ ├── todo_add_page.dart │ │ └── todo_list_page.dart │ ├── viewModels │ │ └── todo_view_model.dart │ ├── states │ │ └── todo_state
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く