Riverpod,FlutterHooks,ChangeNotifierを使ったMVVMアーキテクチャを学ぶ

2 min読了の目安(約1300字TECH技術記事

はじめに

https://github.com/wasabeef/flutter-architecture-blueprints

をコードリーディングしたので、その際のメモ書きです。

flutter-architecture-blueprints とは

wasabeef さんが書いた 「FlutterでRiverpodを使ったMVVM設計のコード」 です。

RiverpodやFlutter Hooksを使って書かれています。
ViewModel は ChangeNotifier を使用しています。

RiverpodやFlutter Hooksは世に出て日が浅いので、ネットを見渡しても 情報は少ない です。
ですので、「flutter-architecture-blueprints」はRiverpodやHooksを学ぶための、貴重な情報源 です。

wasabeefさんによる説明

#0 Flutter の設計を決める
https://medium.com/@wasabeef/0-flutter-の設計を決める-4c6df9a77d67

コードを読んだ感想

Riverpodを使ったモダンなFlutterアプリ開発の理解を深めるのに参考になりました。
学びが深かった点としては、以下です。

  • Riverpod, Hooks, ChangeNotifierでのMVVM、DIのやりかた
  • Hooksの使い方(useProvider, useMemorize, useFuture)
  • freezedを使って状態のイミュータブル化
  • Dioを使ってのAPI呼び出し周り
  • ネットワークリソースとローカルリソースの切り替え
  • Theme管理(light and dark themes切り替え)
  • Mockitoを使ったテストの書き方
  • deployment/flavor切り替え
  • GitHubActions/Bitrise/Codemagicを使ったCI周り

新規にFluttrerアプリを作るのであれば
「flutter-architecture-blueprints」をテンプレのベースにして開発するのが良いと感じました。

wasabeefさんによるMVVM設計の説明

Flutter を MVVM で実装する
https://medium.com/@wasabeef/flutter-を-mvvm-で実装する-861c5dbcc565