Flutter x Riverpod x MVVMで実現するシンプルな設計(Firebase, WebAPI対応)

Flutterを使って開発していますが、ゴチャゴチャしたソースになってしまいます。どうすれば綺麗なソースを実現できるか、4ヶ月間試行錯誤した結果です。テスト手法も盛り込みました!Firebase FirestoreとWebAPIも扱ってます

Ratings: 3.88 / 5.00




Description

Flutterでアプリの作成をしてます!以前はsetStateやBLocで状態管理してアプリを開発していました。しかし、どうにも拡張性が低くなって、メンテが難しくなってしまいました。

もっと便利な物はないかと調べると、最近は日本ではRiverpodが主流、ということで、使用してみました。WEBページなどで調べて、一通りマスターしましたが、どうにも綺麗に書けません。JavaFX(JavaのGUIライブラリ)では、もっと気持ちよく書けてたのに!ということで、MVVMパターンを使えば、モデルとビューをうまく切り分けられないかと試行錯誤しました。結果、いい感じにまとめることができました!

この講座では、Riverpodの基本的な使用方法を勉強します。それだけでなく、Riverpodを使用して、MVVMパターンを実現し、ロジックとビューを切り離し、メンテしやすい実装方法を学習します。ロジックとビューを切り離すことは、それぞれ実装できるだけがメリットではありません。それぞれでテストすることが可能になりました。Unit Test、Widget Test、Flutter Golden Testを使用して、内部的にも、外観的にもテストする方法も紹介してます。外からデータを与えたり、Mockを使うテスト手法も紹介してます。

またFirebaseのFirestoreからデータを追加し、riverpodで表示する方法や、WebAPIからのデータをriverpodで表示する方法も分かります。


Riverpod初心者の方はもちろん、中級者の方(ご意見、お待ちしてます)にも参考になると思います!ソースは全て閲覧可能ですので、ご自身の開発に役に立ててください!一緒に綺麗なソースを書いていきましょう!


【履歴】

2021/11/07 riverpod 1.0.0のリリースに伴い、講座との差異の講座を追加しました。ソースは修正しました。

2022/03/26 FutureProviderを使って、MVVMを実装する方法を更新しました。

What You Will Learn!

  • FlutterでシンプルなGUIを実現するための方法
  • Riverpodの基本的な使用方法
  • RiverpodでMVVMを実現する方法
  • Flutterでテストしやすいソースを作成する方法
  • Flutterの基本的なテスト方法
  • FlutterのMockを使用してテストする方法

Who Should Attend!

  • Flutterの状態管理を探している人
  • Flutterでソースがごちゃごちゃしちゃう人
  • Flutterでポリモフィズム(多態性)をマスターして、中級プログラマになりたい人