【Flutter/Dart】riverpodを使ってみた
導入
いつもはBlocを使って開発をしているが、今回は長期休みの期間を使ってriverpodを使って開発してみました。
riverpod、その他ライブラリについて
riverpod
状態管理のライブラリで、Viewとビジネスロジック＋状態管理を分離できます。
なので、分けて開発ができるのはもちろん、パーツごとでの操作がやりやすいという利点があります。
Flutterでriverpodを使うパターンとして、色々な方法があることがわかった。
| pkg名 | 内容 | URL |
|---|---|---|
| riverpod | Flutterに関連するすべてのクラスが削除された、Dartのみのバージョンです。通常、Flutterでのアプリ開発では選択しないと思いますので以降、言及しません。 | https://pub.dev/packages/riverpod |
| flutter_riverpod | Flutterで Riverpod を使う上での基本的な利用方法です。 | https://pub.dev/packages/flutter_riverpod |
| hooks_riverpod | 後述の flutter_hooks を併せて使う方法です。以下のいずれかに当てはまる場合は使用を検討すると良いかもしれません。 | https://pub.dev/packages/hooks_riverpod |
今回は一番下のhooks_riverpod + freezed + flutter_hooksで作った。（みんながやってるから）
freezed
- 使い方
不変クラスを自動生成してくれるライブラリである。
状態にはmutable、immutableがあるが基本immutableしか使わない。
長所
freezedはそのimmutableのクラス構造をローコードで書けたり、copyWithをクラスに用意してくれたり、nullの設定に対応できる利点がある。
短所
コマンドでのコード生成を行わないとダメなところだ。
あとはJsonなどを複合したい場合はjson_serializableのライブラリを入れたりしないとダメとかのルールが存在しているので注意が必要だ。
- ビルドコマンド
flutter pub pub run build_runner build --delete-conflicting-outputs
flutter_hooks
flutter_hooksはStateless Widgetでの値の変更に対応できるようにできるライブラリです。
hooks_riverpodで状態の変更管理して、その管理された状態を見て実際に動くのがflutter_hooksっていう建前らしいが、hooks_riverpod単体でも動作するらしい。
公式にはどっちも入れてねと書いてあるので入れることを強くお勧めする。
retrofit
これは今回参考にしたプログラムで使っていたもので興味もあったやつなので書いておきます。
長所
httpを使ってAPI周りを実装したりすると結構コードが長くなったりサーバ側との通信をどれがどれなのかわからなくなりがちだが
retrofitを使うとアノテーションでパスを指定して書けるので一眼で分かりやすくなったり、
コードを自動生成してくれるので実装が楽になる。。らしい。。。
短所
欠点は、freezed同様に別にビルドが必要だが、freezedでやっているのでついでに入れちゃうのもありだろう。
flutter_dotenv
これも今回参考にしたプログラムで使っていたものだが、めっちゃ便利だった。
まぁ、fvmとか使っていたらほぼいらないが、
PHPやVueなどで環境変数を定義するファイル.envがflutterでも使えるってやつだ。
今回はQiitaのトークンを記載する際に使っていた。
実際に作ってみた
まずはベースから
こちらの方の記事をベースに、というかほぼそのまま実装したのでベースがしっかりしていた。
流れ的には、
retrofitで通信したAPIの内容をriverpodで読み込んでその内容をViewで表示するという流れになる。
いつもはコードを書くが今回はコード量が多いため割愛する。上記作者のGitを参照してロジックを追ってほしい。
やってみて
長所
- 慣れたらローコードで状態管理しやすい。
- エラー発生時の特定などもしやすいのがいい部分だ。
短所
- おそらく初心者がやったら、泣くだろうと思う内容だった。
- 一個のViewに対して複数のAPIなどを管理するのが難しそう。
- 独自のステートレスWidgetなのでライブラリの変更が大きいと影響されやすそうだ。
結論
自分はカスタムがしやすいBlocでいいかなと思った。
使いこなしてないだけか、Blocの方が使い慣れているだけかもしれないが。。
Author And Source
この問題について(【Flutter/Dart】riverpodを使ってみた), 我々は、より多くの情報をここで見つけました https://zenn.dev/tomofyro/articles/333adc0fc668f3著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol