providerを使ったFlutter MVVMプロジェクト

MVVM in Flutter using Providersを参考に作ったMVVMサンプルプロジェクトです。

ファイル構成

• users_list/views

  • home_screen.dart

    リスト画面、１行ごとのWidgetはcomponents/user_list_row.dartで表示している

  • user_detail_screen.dart

    リスト画面をタップしたときに表示される詳細画面

  • add_user_screen.dart

    リスト画面のナビゲーションバーにある"+"ボタンタップしたときに表示される入力画面

• users_list/view_models

  • user_view_model.dart

    ViewModel。下記の機能を実現

    • リストの取得
    • リスト画面でタップされたときに選択されたユーザー情報の保持
    • 入力画面の入力情報保持とリストへ追加

• users_list/models

  • users_list_model.dart

    JSONデータ構造を定義しているファイル。quicktypeで生成されたコードベースにNullSafetyの追加対応している

  • user_error.dart

    user_view_model.dartでリスト取得した結果エラーとなった時のエラー情報を保持するための定義

• users_list/repo

  • user_services.dart

    JSONデータを取得する(fetch)

  • api_status.dart

    JSONデータ取得結果を保持するための定義

• users_list/components

  • user_list_row.dart

    リスト表示の１行ごとのデザインを定義したWidget

  • app_titile.dart

    タイトル表示などに使うようの装飾をつけたText Widget

  • app_loading.dart

    ロード中のプログレス表示するWidget

  • app_error.dart

    エラー発生時のメッセージ表示するWidget

参考

• MVVM in Flutter using Providers

  参考にした記事

• [#Google Flutter - MVVM in Flutter using Providers.](https://youtu.be/W1e7d3cvnRo)

  上記記事のハンズオン動画

• quicktype

  JSONからDartコードを生成してくれるサイト