Riverpod による実用的なアーキテクチャを Todo リストを例に考えてみる | Flutter

この記事は古くなっています。新しい内容は こちら になります（https://note.com/mxiskw/n/n78a69ca171cb）。

以前のバージョンをすでに購入されている方は、
2021年度中に Emailアドレスに添えて記事の後半のパスフレーズを Twitter で DM していただければ、新しい記事をプレゼントしますのでお気軽にどうぞ。Twitter: @ytiskw

Riverpod を使った実用的な Flutter アーキテクチャを考えてみたので共有します。Riverpod って何やねん、という人は、こちらを先にご覧ください。新しい Flutter の状態管理パッケージです。パッケージは主に hooks_riverpod / flutter_hooks / freezed を使用します（全部同じ作者です。この人、すごいっす..）。

作るもの

最小限の Todo リストを作ります。ただし、データがメモリ内だけじゃつまらないので、SharedPreferences に永続保存するようにしていきます。これを外部 DB にすれば今回の内容は容易に転用可能です。
アプリでできることは以下です。
・入力されたテキストを Todo アイテムとして永続化できる
・永続された Todo リストを表示できる
・日付順を昇順、降順にしてソートできる
・完了を押すと完了フラグを永続化できる

アーキテクチャ図解

これから見ていくアーキテクチャを図解してみました。矢印はデータの流れを表します。登場人物は、Entity, Client, Repository, State, ViewController, View です。最小限の構成にしたかったので絞ったものもあります。

アプリが複雑化してきた時には Repository と ViewController の間に Usecase などを導入すると見通しが良くなりそうです。
ここで言っている Entity はDBに対応したデータの入れ物のことです。
View と Entity 以外は、Riverpod の Provider を元にして宣言されます。
それでは、それぞれ詳しくみていきましょう。

レポジトリはこちらにあります：https://github.com/ttlg/riverpod_todo/tree/old