【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で作った。（みんながやってるから）

https://zenn.dev/dev_tatsuya/articles/cffaa7c50dfad7

https://qiita.com/tokkun5552/items/5dcb79e5283a67c2b2fe

freezed

https://www.youtube.com/watch?v=RaThk0fiphA&list=TLGGuEaca0LUlggwNzA1MjAyMg

• 使い方

https://zenn.dev/sakusin/articles/b19e9a2c3829e0

不変クラスを自動生成してくれるライブラリである。
状態にはmutable、immutableがあるが基本immutableしか使わない。

mutable = 可変、　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

これは今回参考にしたプログラムで使っていたもので興味もあったやつなので書いておきます。
https://pub.dev/packages/retrofit

長所

httpを使ってAPI周りを実装したりすると結構コードが長くなったりサーバ側との通信をどれがどれなのかわからなくなりがちだが
retrofitを使うとアノテーションでパスを指定して書けるので一眼で分かりやすくなったり、
コードを自動生成してくれるので実装が楽になる。。らしい。。。

短所

欠点は、freezed同様に別にビルドが必要だが、freezedでやっているのでついでに入れちゃうのもありだろう。

flutter_dotenv

これも今回参考にしたプログラムで使っていたものだが、めっちゃ便利だった。
まぁ、fvmとか使っていたらほぼいらないが、
PHPやVueなどで環境変数を定義するファイル.envがflutterでも使えるってやつだ。
今回はQiitaのトークンを記載する際に使っていた。

実際に作ってみた

まずはベースから

https://zenn.dev/dev_tatsuya/articles/cffaa7c50dfad7

こちらの方の記事をベースに、というかほぼそのまま実装したのでベースがしっかりしていた。

流れ的には、
retrofitで通信したAPIの内容をriverpodで読み込んでその内容をViewで表示するという流れになる。
いつもはコードを書くが今回はコード量が多いため割愛する。上記作者のGitを参照してロジックを追ってほしい。

https://github.com/dev-tatsuya/flutter-qiita-client

やってみて

長所

• 慣れたらローコードで状態管理しやすい。
• エラー発生時の特定などもしやすいのがいい部分だ。

短所

• おそらく初心者がやったら、泣くだろうと思う内容だった。
• 一個のViewに対して複数のAPIなどを管理するのが難しそう。
• 独自のステートレスWidgetなのでライブラリの変更が大きいと影響されやすそうだ。

結論

自分はカスタムがしやすいBlocでいいかなと思った。
使いこなしてないだけか、Blocの方が使い慣れているだけかもしれないが。。