Flutterアプリ アーキテクチャ比較

技術要件

• アプリ開発フレームワーク: Flutter
• アプリ開発言語: Dart (+ Swift + Kotlin)
• 開発環境: Android Studio最新版
• 提供言語: 日本語のみ
• プラットフォーム: SP(iOS + Android)

各アーキテクチャパターン比較

パターン	MVVM	BLoC	Redux
構成要素	Model, View, ViewModel	Model, BLoC, Widget	View, Action, Middleware, Reducer, Store
利点	Android MVVM経験者には学習コスト低 / RxDart不要可	Google推奨 / 部分的リビルド可 / Stream系と相性◎	状態が一方向で競合少 / 全状態をstore管理 / 状態調査が容易
懸念点	notifyListenersで広範囲再描画	アーキテクチャが重め / RxDart慣れ必要	学習コスト・コード量大 / ボイラープレート多 / 非同期実装が煩雑

各アーキテクチャの構造

MVVM（Model-View-ViewModel）

Viewから状態やロジックをViewModelに分離できる（関心の分離）。ViewModelはViewへの参照を一切持たないという特徴がある。

• View: 入力受付・描画
• ViewModel: 状態保持、Viewへの通知
• Repository: APIやDBとの接続、データ加工

BLoC（Business Logic Component）

UIとは独立したBLoCでビジネスロジックと状態管理をStreamベースで構築し、イベントと状態の明確な流れを保つことができる。

• Widget: ユーザ入力 → BLoCへStream送信
• BLoC: 状態管理、入力変換・出力Stream
• Repository: API/DB接続、データ変換

Redux

アプリケーション全体の状態を単一のStoreで一元管理し、ActionとReducerを介して状態変更が明示的かつ追跡可能になるのが特徴。

• View: ユーザ入力
• Action: 処理トリガ
• Middleware: 非同期処理
• Reducer: 状態変更定義
• Store: 全体状態を保持

サンプルアプリ実装リンク（郵便番号検索）

MVVM実装例
BLoC実装例
Redux実装例
使用API: http://zipcloud.ibsnet.co.jp/doc/api

参考リンク

Dart速習（Java/Kotlin経験者向け）
Flutter Widget一覧（最新版）
pub.devでのパッケージ検索