Flutter を MVVM で実装する

わさびーふがになるまで後 4 日

はじめに

この記事は Flutter Architecture Blueprints の解説記事です。
今回は Flutter アプリを MVVM で実装する上でどういう形にしていったかを解説していきたいと思います。Android エンジニアにとって脳内変換出来そうなキーワードも使っていきます。

Image for post
Image for post

MVVM

まずは MVVM の説明をしていきます。
※知ってる人は読み飛ばしてください

Image for post
Image for post
Flutter Architecture Blueprints
Image for post
Image for post
MVVM
main.dart

ViewModel

ViewModel は MVVM で核となる一番大事な部分です。
ChangeNotifier を継承しています。

home_view_model.dart

View

主に Flutter Hooks が登場します。
Flutter Hooks の HookWidget を継承しています。

home_page.dart
Image for post
Image for post
`useContext` can only be called from the build method of HookWidget
home_page2.dart

Repository

Freezed を使って Model を自動生成で作っています。ChangeNotifier で Flutter Architecture Blueprints みたいな作りをしていると copyWith を使うイメージがあまりありません。でも toString や hashCode も実装してくれるので便利です。

darticle.dart

Repository

NewsRepository と NewsRepositoryImpl がいます。Impl とかつけると Java っぽさ出てますね。Repository は不要そうに見えますが MVVM と Repository pattern 実現する上で、ViewModel がどこからデータを取得・更新するのかを意識させないためにビジネスロジックとデータ操作を分離することを目的としています。例えば、ネットワークの状況によってサーバから取得するか、ローカルキャッシュを使うかの決定は Repository で行ったりします。

news_repository.dart

DataSource

Repository と同じく NewsDataSource と NewsDataSourceImpl で分かれています。DataSource は実際にサーバの API を叩いたり、ローカルから取得したりする処理を書きます。 基本的に取得先毎に DataSource を作ることが一般的だと思います。

news_data_source.dart

Google Developers Expert for Android. #shibuya_apk

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store