【Flutter】GetXを使ってMVVMでポケモン図鑑を作る

こんにちは、Flutter民です✌

自分は今までproviderやRiverpodをメインに使用していたのですが、ここ最近GetXの評価が上がっており、状態管理ライブラリではこちらも主流になりつつあるようです。
出始めの頃は色々あって使用が忌避されていた¹のですが、現在は安定しており使い勝手も向上しているようです。

今回はGetXを使ってシンプルなポケモン図鑑アプリを作成してみます。

Sample

github.com

解説

アーキテクチャはMVVM構成です。
GetXControllerを使用してViewModelを作成して、そこからRepositoryのAPIをfetchします。

StateはRx型で管理し、View側からObxで更新を取得します。
Stateは今回もfreezedを使用しています。

// ViewModel側
Rx<PokeListViewModelData> state = const PokeListViewModelData.loading().obs;

Future<void> fetch() async {
  state.value = const PokeListViewModelData.loading()

  repository.fetchPokemonList().then((res) async {
    state.value = PokeListViewModelData.loaded(response: res);
  }).catchError((_) {
    state.value = const PokeListViewModelData.error();   });
}

// View側
final PokeListViewModel viewModel = Get.put(PokeListViewModel());

Obx(() {
    return viewModel.state.value.map(
      // 省略
    );
  }),
);

画面遷移はGet.toなどを使えば、引数も通常通りに渡すだけなので簡単に実装できます。

Get.to(PokeDetailPage(pokemon: pokemon)),

おわりに

触ってみるまでは半信半疑だったのですが、とても簡単かつシンプルにMVVM構成を実現できました。
今回使用したライブラリの範囲ではRiverpodやChangeNotifierと比較してもあまり変わらず、GetX自体に強く依存しているという印象もありません。
Flutterにおける今後の状態管理ライブラリの候補の一つとして検討しても良さそうですね。

---

1. 当時は破壊的変更が多くて安定してなかった？とかが原因だった気がする...あんまり詳しく覚えていません😢↩