flutter ロゴ

flutter 構成

flutter systemc 01画像

flutter systemc 02画像

flutter systemc 03画像

Flutter 構成は下記の通り

  1. １.Reverpodを使った状態管理

    アプリ全体の状態管理には、公式で推奨されている Riverpod を採用しています。
    グローバルな状態や非同期処理、ロジックの共通化などを、安全かつ予測可能に構築できるため、大規模アプリにも適した構成が可能です。
    Providerのスコープ管理により、必要最小限の再構築でパフォーマンスにも配慮しています。

  2. ２.API通信はスマホ、web用通信を切替

    Flutterは単一のコードベースで複数のプラットフォームに対応できますが、通信方式には環境ごとの最適化が必要です。
    当構成では、Webとモバイルで自動的に通信方法やヘッダー設定を切り替える仕組みを取り入れ、認証やセキュリティ要件を柔軟に制御しています。
    たとえば、CORS対策やセッション管理の違いに対応し、より現実的な実装が可能です。

  3. ３.スマホはセキュアストレージ

    モバイルアプリでは、セキュリティを最優先に設計し、認証トークンやユーザ情報は FlutterSecureStorage にて暗号化して保存しています。
    生のトークンを扱うリスクを抑えつつ、セッション維持や自動ログインにも対応。
    不正アクセスやリバースエンジニアリングにも強い安全設計を採用しています。

  4. ４.WebはSharedPreferences

    Webアプリでは、セッション情報や軽量な状態は SharedPreferences（またはWeb Storage） を活用してブラウザ側に保持。
    セキュリティと利便性のバランスを取りながら、Cookieベースの認証やトークン管理とも連携可能です。
    環境に応じてローカル・セッションストレージの切り替えにも対応しています。

  5. ５.Reverpodで依存性注入

    依存関係の注入と管理にもRiverpodを活用し、機能の再利用性・保守性・テスト容易性を確保しています。
    たとえば、リポジトリやAPIクライアントなどはProviderとして登録され、必要な場所にだけ注入できる設計に。
    これにより、テスト環境の差し替えやモック対応もスムーズに行えます。

プロジェクトの構成は下記の通り

  • プロジェクト
    • main.dart
    • api
      • auth_api
        • auth_api.dart
        • auth_api_impl.dart
      • client
        • api_client.dart
        • api_client_impl.dart
        • api_client_web_impl.dart
        • create_api_client.dart
      • contact_form_api
        • contact_form_api.dart
        • contact_form_api_impl.dart
      • master_data_api
        • master_data_api.dart
        • master_data_api_impl.dart
    • component
      • contact_form
        • contact_confirm.dart
        • contact_finish.dart
        • contact_form_input.dart
      • menu
        • user_menu.dart
    • const
      • api_const.dart
    • model
      • api_response.dart
      • auth_state.dart
      • user.dart
      • contact_form
        • contact_form_data.dart
        • contact_form_data.freezed.dart
        • contact_form_data.g.dart
      • master_data
        • master_data.dart
        • master_data.freezed.dart
        • master_data.g.dart
    • provider
      • auth_provider
        • auth_async_notifier.dart
        • auth_async_notifier_impl.bk
        • auth_async_notifier_impl.dart
        • auth_provider.dart
      • contact_form_provider
        • contact_form_async_notifier.dart
        • contact_form_async_notifier_impl.dart
        • contact_form_provider.dart
      • di
        • api_di
          • api_client_provider.dart
          • auth_api_provider.dart
          • contact_form_api_provider.dart
          • master_data_api_provider.dart
        • repository_di
          • auth_repository_provider.dart
          • contact_form_repository_provider.dart
          • master_repository_provider.dart
        • storage_di
          • flutter_secure_storage_provider.dart
          • shared_preferences_storage_provider.dart
        • view_model_di
          • contact_form_view_model_provider.dart
          • login_view_model_provider.dart
    • repository
      • auth_repository
        • auth_repository.dart
        • auth_repository_impl.dart
      • contact_form_repository
        • contact_form_repository.dart
        • contact_form_repository_impl.dart
      • master_data_repository
        • master_data_repository.dart
        • master_data_repository_impl.dart
    • router
      • router.dart
    • screen
      • contact_form_screen.dart
      • index_screen.dart
      • login_screen.dart
      • user
        • user_dash_board.dart
    • storage
      • mobile_storage.dart
      • storage.dart
      • web_storage.dart
    • util
      • platform_util.dart
    • view_model
      • contact_form
        • contact_form_view_model.dart
        • contact_form_view_model_impl.dart
      • login
        • login_view_model.dart
        • login_view_model_impl.dart

Flutterでもサイトはこちらより確認できます

アカウントは空の状態で認証できるようにしてますので、そのままログインボタンを押してください

デモサイトはこちらより