Flutter: フェーズ2実践 — ShopAppコア版

Q: GoRouterのredirectでRiverpod状態にどうアクセスしますか？

ProviderScope.containerOf(context).read(provider) を使ってredirect内でプロバイダーを読み取ります。

Q: Hiveの初期化に失敗したらどうなりますか？

initHive()をtry-catchでラップし、失敗時はHiveデータをクリアして再初期化します： await Hive.deleteBoxFromDisk('products') 。

散らばった部品がエンジンに組み上がる — フェーズ2は独立した知識を完全なアプリアーキテクチャに組み立てます。

📋 前提条件: 以下を先にマスターしている必要があります

レッスン1：Flutter入門と環境構築

レッスン2：Dart言語クラッシュコース

レッスン3：ウィジェットの基礎

レッスン4：レイアウトシステム

レッスン5：StatefulWidgetとインタラクション

レッスン6：マテリアルデザインと主要ウィジェット

レッスン7：フェーズ1実践 — ShopAppスターター

レッスン8：ナビゲーションとルーティング

レッスン9：フォームと入力

レッスン10：リストとスクロール

レッスン11：ネットワークとREST API

レッスン12：状態管理 — Riverpod

レッスン13：ローカルストレージ

1. このレッスンで学ぶこと

アーキテクチャの階層化：Presentation(Widget) → Application(Notifier) → Infrastructure(Dio+Hive)
Riverpodグローバル状態：cartProvider + authProvider + productProviderの連携
Dioインターセプター：Bearerトークン自動付与 + 401自動リフレッシュ
Hiveオフラインキャッシュ：ネットワーク障害時にキャッシュされた商品データを表示
完全なユーザーフロー：閲覧 → カート追加 → ログイン → チェックアウト → 注文確認（USD決済）

2. アーキテクチャ混沌のリアルなストーリー

(1) 悩み：スパゲッティコード

Bobのフェーズ1 ShopAppスターターはローンチしましたが、コードは混乱状態：ネットワークリクエストがウィジェット内に散在し、状態管理はsetStateとコールバックが混在し、キャッシュロジックがbuildメソッド内に書かれています。機能を1つ追加するのに5つのファイルを修正する必要があり、リリースのたびにバグを混入するリスクがあります。10万DAUのアプリはスパゲッティコードでは維持できません。

(2) 三層アーキテクチャソリューション

クリーンアーキテクチャはコードを3つの層に分割します：Presentation（UI）、Application（ビジネスロジック/状態）、Infrastructure（データソース）。依存関係は外から内へ一方向に流れます。

(3) メリット：保守性、テスト性、拡張性

三層アーキテクチャにリファクタリング後、Bobは支払いモジュールを追加する際、Notifier + Repositoryを追加するだけで、UI層に触れる必要がありません。ユニットテストではRepositoryをモックしてNotifierをテストでき、ネットワークに依存しません。

3. 三層アーキテクチャ設計

graph TD
    subgraph Presentation
        HP2[HomePage]
        DP2[DetailPage]
        CP2[CartPage]
        CK[CheckoutPage]
    end
    subgraph Application Layer
        PN2[ProductNotifier]
        CN2[CartNotifier]
        AN[AuthNotifier]
    end
    subgraph Infrastructure
        DR2[DioRepository]
        HR[HiveCache]
        SS2[SecureStorage]
    end
    HP2 --> PN2
    DP2 --> CN2
    CP2 --> CN2
    CK --> AN
    PN2 --> DR2
    AN --> SS2
    PN2 --> HR

TEXT

> 出力： ローカルのFlutter SDKで実行してください（Flutter 3.x / Dart 3.x）。PistonサーバーにはFlutterがインストールされていません — 手元のマシンで`flutter run`して動作確認してください。実際のUI/状態はプラットフォームにより多少異なる場合があります。

(1) 層の責務

層	ディレクトリ	責務	依存先
Presentation	`screens/`, `widgets/`	UIレンダリング + ユーザーインタラクション	Application
Application	`notifiers/`, `providers/`	状態管理 + ビジネスロジック	Infrastructure
Infrastructure	`repositories/`, `storage/`, `network/`	データ取得 + 永続化	models

(2) プロジェクト構造

TEXT

lib/
├── main.dart
├── app.dart                    # MaterialApp.router
├── core/
│   ├── router.dart             # GoRouter config
│   ├── network/
│   │   ├── dio_client.dart     # Dio instance + interceptors
│   │   └── api_exception.dart  # Unified error
│   └── storage/
│       ├── secure_storage.dart
│       ├── hive_cache.dart
│       └── shared_prefs.dart
├── models/
│   ├── product.dart
│   ├── cart_item.dart
│   ├── order.dart
│   └── user.dart
├── notifiers/
│   ├── auth_notifier.dart
│   ├── product_notifier.dart
│   └── cart_notifier.dart
├── repositories/
│   ├── product_repository.dart
│   ├── auth_repository.dart
│   └── order_repository.dart
└── screens/
    ├── home_page.dart
    ├── detail_page.dart
    ├── cart_page.dart
    ├── checkout_page.dart
    └── login_page.dart

TEXT

> 出力： ローカルのFlutter SDKで実行してください（Flutter 3.x / Dart 3.x）。PistonサーバーにはFlutterがインストールされていません — 手元のマシンで`flutter run`して動作確認してください。実際のUI/状態はプラットフォームにより多少異なる場合があります。

4. インフラストラクチャ層の実装

▶ サンプル

TEXT

> 出力： ローカルのFlutter SDKで実行してください（Flutter 3.x / Dart 3.x）。PistonサーバーにはFlutterがインストールされていません — 手元のマシンで`flutter run`して動作確認してください。実際のUI/状態はプラットフォームにより多少異なる場合があります。

：Dioクライアントラッパー

DART

import 'package:dio/dio.dart';

// ⚙️ Install dependency: flutter pub add dio

// Custom class definition sources:
// - SecureStorage: see Lesson 13 Flutter Secure Storage
// - AuthInterceptor: see Lesson 11 Dio Auth Interceptor

class DioClient {
  late final Dio _dio;

  DioClient({required String baseUrl, required SecureStorage storage}) {
    _dio = Dio(BaseOptions(
      baseUrl: baseUrl,
      connectTimeout: const Duration(seconds: 10),
      receiveTimeout: const Duration(seconds: 30),
    ));
    _dio.interceptors.addAll([
      AuthInterceptor(storage: storage, dio: _dio),
      LogInterceptor(requestBody: true, responseBody: true),
    ]);
  }

  Future<Response> get(String path, {Map<String, dynamic>? queryParams}) =>
      _dio.get(path, queryParameters: queryParams);

  Future<Response> post(String path, {dynamic data}) =>
      _dio.post(path, data: data);

  Future<Response> put(String path, {dynamic data}) =>
      _dio.put(path, data: data);

  Future<Response> delete(String path) => _dio.delete(path);
}

TEXT

> 出力： ローカルのFlutter SDKで実行してください（Flutter 3.x / Dart 3.x）。PistonサーバーにはFlutterがインストールされていません — 手元のマシンで`flutter run`して動作確認してください。実際のUI/状態はプラットフォームにより多少異なる場合があります。

▶ サンプル

TEXT

> 出力： ローカルのFlutter SDKで実行してください（Flutter 3.x / Dart 3.x）。PistonサーバーにはFlutterがインストールされていません — 手元のマシンで`flutter run`して動作確認してください。実際のUI/状態はプラットフォームにより多少異なる場合があります。

：Productリポジトリ

DART

import 'package:dio/dio.dart';

// ⚙️ Install dependency: flutter pub add dio

// Custom class definition sources:
// - DioClient: see Lesson 4 Dio client wrapper in this lesson
// - ProductCache: see Lesson 13 Hive Product Cache
// - Product: see Lesson 11 json_serializable model

class ProductRepository {
  final DioClient _client;
  final ProductCache _cache;

  ProductRepository(this._client, this._cache);

  Future<List<Product>> getProducts({int page = 1, String? category}) async {
    try {
      final response = await _client.get('/products', queryParams: {
        'page': page, 'limit': 20, if (category != null) 'category': category,
      });
      final products = (response.data['items'] as List)
          .map((j) => Product.fromJson(j)).toList();
      await _cache.saveProducts(products);
      return products;
    } on DioException {
      // Offline fallback
      final cached = await _cache.getProducts();
      if (cached.isNotEmpty) return cached;
      rethrow;
    }
  }

  Future<Product> getProductById(int id) async {
    final cached = await _cache.getProductById(id);
    if (cached != null) return cached;
    final response = await _client.get('/products/$id');
    return Product.fromJson(response.data);
  }
}

TEXT

> 出力： ローカルのFlutter SDKで実行してください（Flutter 3.x / Dart 3.x）。PistonサーバーにはFlutterがインストールされていません — 手元のマシンで`flutter run`して動作確認してください。実際のUI/状態はプラットフォームにより多少異なる場合があります。

5. アプリケーション層の実装

▶ サンプル

TEXT

> 出力： ローカルのFlutter SDKで実行してください（Flutter 3.x / Dart 3.x）。PistonサーバーにはFlutterがインストールされていません — 手元のマシンで`flutter run`して動作確認してください。実際のUI/状態はプラットフォームにより多少異なる場合があります。

：Auth Notifier

DART

import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';

// ⚙️ Install dependency: flutter pub add flutter_riverpod riverpod_annotation
// ⚙️ Dev dependency: flutter pub add --dev riverpod_generator build_runner

// Custom class definition sources:
// - User: see Lesson 12 @riverpod Auth example
// - secureStorageProvider/authRepoProvider: see Lesson 13 storage layer

@riverpod
class Auth extends _$Auth {
  @override
  AsyncValue<User?> build() {
    // Check stored token on app start
    _checkStoredToken();
    return const AsyncData(null);
  }

  Future<void> _checkStoredToken() async {
    final storage = ref.read(secureStorageProvider);
    final token = await storage.getAccessToken();
    if (token != null) {
      state = await AsyncValue.guard(() => ref.read(authRepoProvider).validateToken(token));
    }
  }

  Future<void> login(String email, String password) async {
    state = const AsyncLoading();
    state = await AsyncValue.guard(() async {
      final result = await ref.read(authRepoProvider).login(email, password);
      await ref.read(secureStorageProvider).saveTokens(
        accessToken: result.accessToken, refreshToken: result.refreshToken, userId: result.user.id,
      );
      return result.user;
    });
  }

  Future<void> logout() async {
    await ref.read(secureStorageProvider).clearAll();
    state = const AsyncData(null);
  }
}

TEXT

> 出力： ローカルのFlutter SDKで実行してください（Flutter 3.x / Dart 3.x）。PistonサーバーにはFlutterがインストールされていません — 手元のマシンで`flutter run`して動作確認してください。実際のUI/状態はプラットフォームにより多少異なる場合があります。

▶ サンプル

TEXT

> 出力： ローカルのFlutter SDKで実行してください（Flutter 3.x / Dart 3.x）。PistonサーバーにはFlutterがインストールされていません — 手元のマシンで`flutter run`して動作確認してください。実際のUI/状態はプラットフォームにより多少異なる場合があります。

：Cart Notifier（永続化版）

DART

import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';

// ⚙️ Install dependency: flutter pub add flutter_riverpod riverpod_annotation
// ⚙️ Dev dependency: flutter pub add --dev riverpod_generator build_runner

// Custom class definition sources:
// - CartItem: see Lesson 12 CartNotifier example
// - Product: see Lesson 11 json_serializable model
// - cartStorageProvider: see Lesson 13 Hive cart persistence

@riverpod
class Cart extends _$Cart {
  @override
  List<CartItem> build() {
    // Load from local storage on init
    _loadFromStorage();
    return [];
  }

  Future<void> _loadFromStorage() async {
    final storage = ref.read(cartStorageProvider);
    final items = await storage.loadCart();
    if (items.isNotEmpty) {
      state = items;
    }
  }

  Future<void> _persist() async {
    final storage = ref.read(cartStorageProvider);
    await storage.saveCart(state);
  }

  void addItem(Product product) {
    final idx = state.indexWhere((i) => i.product.id == product.id);
    if (idx >= 0) {
      state = [...state]..[idx] = state[idx].copyWith(quantity: state[idx].quantity + 1);
    } else {
      state = [...state, CartItem(product: product, quantity: 1)];
    }
    _persist();
  }

  void updateQuantity(int productId, int qty) {
    if (qty <= 0) { removeItem(productId); return; }
    state = [for (final i in state) i.product.id == productId ? i.copyWith(quantity: qty) : i];
    _persist();
  }

  void removeItem(int productId) {
    state = state.where((i) => i.product.id != productId).toList();
    _persist();
  }

  void clear() { state = []; _persist(); }
}

TEXT

> 出力： ローカルのFlutter SDKで実行してください（Flutter 3.x / Dart 3.x）。PistonサーバーにはFlutterがインストールされていません — 手元のマシンで`flutter run`して動作確認してください。実際のUI/状態はプラットフォームにより多少異なる場合があります。

6. プレゼンテーション層の実装

▶ サンプル

TEXT

> 出力： ローカルのFlutter SDKで実行してください（Flutter 3.x / Dart 3.x）。PistonサーバーにはFlutterがインストールされていません — 手元のマシンで`flutter run`して動作確認してください。実際のUI/状態はプラットフォームにより多少異なる場合があります。

：GoRouter認証ガード

DART

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';

// ⚙️ Install dependency: flutter pub add flutter_riverpod go_router

// Custom class definition sources:
// - authProvider: see Lesson 5 Auth Notifier in this lesson
// - MainScaffold: custom Shell route container Widget

final router = GoRouter(
  initialLocation: '/',
  redirect: (context, state) {
    final authState = ProviderScope.containerOf(context).read(authProvider);
    final isLoggedIn = authState.valueOrNull != null;
    final isLoginRoute = state.matchedLocation == '/login';
    if (!isLoggedIn && !isLoginRoute) return '/login';
    if (isLoggedIn && isLoginRoute) return '/';
    return null;
  },
  routes: [
    ShellRoute(
      builder: (_, __, child) => MainScaffold(child: child),
      routes: [
        GoRoute(path: '/', builder: (_, __) => const HomePage()),
        GoRoute(path: '/cart', builder: (_, __) => const CartPage()),
        GoRoute(path: '/profile', builder: (_, __) => const ProfilePage()),
      ],
    ),
    GoRoute(path: '/product/:id', builder: (_, s) => DetailPage(id: int.parse(s.pathParameters['id']!))),
    GoRoute(path: '/checkout', builder: (_, __) => const CheckoutPage()),
    GoRoute(path: '/login', builder: (_, __) => const LoginPage()),
  ],
);

TEXT

> 出力： ローカルのFlutter SDKで実行してください（Flutter 3.x / Dart 3.x）。PistonサーバーにはFlutterがインストールされていません — 手元のマシンで`flutter run`して動作確認してください。実際のUI/状態はプラットフォームにより多少異なる場合があります。

▶ サンプル

TEXT

> 出力： ローカルのFlutter SDKで実行してください（Flutter 3.x / Dart 3.x）。PistonサーバーにはFlutterがインストールされていません — 手元のマシンで`flutter run`して動作確認してください。実際のUI/状態はプラットフォームにより多少異なる場合があります。

：HomePageによるプロバイダー消費

DART

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';

// ⚙️ Install dependency: flutter pub add flutter_riverpod go_router

// Custom class definition sources:
// - productProvider/cartItemCountProvider/cartProvider: see Lesson 12
// - ProductCard: custom product card Widget

class HomePage extends ConsumerWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final productsAsync = ref.watch(productProvider);
    final cartCount = ref.watch(cartItemCountProvider);
    return Scaffold(
      appBar: AppBar(title: const Text('ShopApp'), actions: [
        Badge(count: cartCount, child: IconButton(icon: const Icon(Icons.shopping_cart),
          onPressed: () => context.go('/cart'))),
      ]),
      body: productsAsync.when(
        loading: () => const Center(child: CircularProgressIndicator()),
        error: (err, _) => Center(child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
          Text('Error: $err'), const SizedBox(height: 16),
          FilledButton(onPressed: () => ref.read(productProvider.notifier).refresh(), child: const Text('Retry')),
        ])),
        data: (products) => RefreshIndicator(
          onRefresh: () => ref.read(productProvider.notifier).refresh(),
          child: GridView.builder(gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2, mainAxisSpacing: 8, crossAxisSpacing: 8, childAspectRatio: 0.7),
            itemCount: products.length,
            itemBuilder: (_, i) => ProductCard(product: products[i], onAddToCart: () {
              ref.read(cartProvider.notifier).addItem(products[i]);
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text('${products[i].name} added to cart'), duration: const Duration(seconds: 1)));
            }),
          ),
        ),
      ),
    );
  }
}

TEXT

> 出力： ローカルのFlutter SDKで実行してください（Flutter 3.x / Dart 3.x）。PistonサーバーにはFlutterがインストールされていません — 手元のマシンで`flutter run`して動作確認してください。実際のUI/状態はプラットフォームにより多少異なる場合があります。

7. 完全な例：main.dart起動フロー

DART

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:shared_preferences/shared_preferences.dart';

// ⚙️ Install dependency: flutter pub add flutter_riverpod shared_preferences

// Custom class definition sources:
// - DioClient: see Lesson 4 in this lesson
// - SecureStorage: see Lesson 13
// - initHive(): see Lesson 13 Hive initialization
// - ShopApp: custom MaterialApp Widget
// - sharedPreferencesProvider/dioClientProvider: Riverpod Provider

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  // Initialize storage
  await initHive();
  final prefs = await SharedPreferences.getInstance();
  final dioClient = DioClient(baseUrl: 'https://api.shopapp.com/v1', storage: SecureStorage());

  runApp(ProviderScope(
    overrides: [
      sharedPreferencesProvider.overrideWithValue(prefs),
      dioClientProvider.overrideWithValue(dioClient),
    ],
    child: const ShopApp(),
  ));
}

class ShopApp extends ConsumerWidget {
  const ShopApp({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return MaterialApp.router(
      title: 'ShopApp',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(colorSchemeSeed: Colors.blue, useMaterial3: true),
      routerConfig: router,
    );
  }
}

TEXT

> 出力： ローカルのFlutter SDKで実行してください（Flutter 3.x / Dart 3.x）。PistonサーバーにはFlutterがインストールされていません — 手元のマシンで`flutter run`して動作確認してください。実際のUI/状態はプラットフォームにより多少異なる場合があります。

❓ よくある質問

Q 三層アーキテクチャは過剰設計ですか？

A 小規模プロジェクトではウィジェット内に直接ロジックを書いても問題ありません。プロジェクトが5ページを超え、複数のデータソースがある場合、三層アーキテクチャによりコードの保守性が向上します。

Q RepositoryとNotifier間でエラーはどう伝播しますか？

A RepositoryはApiExceptionをスローし、NotifierはAsyncValue.guardでキャッチし、UIは.when(error:)で表示します。

Q オフラインキャッシュの有効期限はどう実装しますか？

A Hiveにデータとともにタイムスタンプを保存し、読み取り時に期限切れかどうか（例：1時間）を確認し、期限切れなら再取得します。

Q GoRouterのredirectでRiverpod状態にどうアクセスしますか？

A ProviderScope.containerOf(context).read(provider)を使ってredirect内でプロバイダーを読み取ります。

Q Hiveの初期化に失敗したらどうなりますか？

A initHive()をtry-catchでラップし、失敗時はHiveデータをクリアして再初期化します：await Hive.deleteBoxFromDisk('products')。

Q トークンリフレッシュ中の同時リクエストはどう処理しますか？

A Completerロックを使用：最初の401がリフレッシュをトリガーし、他の401リクエストはCompleterの完了を待ってからリトライし、複数回のリフレッシュを回避します。

📖 まとめ

三層アーキテクチャ：Presentation → Application → Infrastructure、依存方向は一方向
Riverpod Notifierがビジネスロジックと状態を管理、Repositoryがデータ取得を管理
Dioインターセプターがトークン付与と401リフレッシュを統一的に処理
Hiveキャッシュによりオフラインフォールバックが可能、ネットワーク障害時にキャッシュデータを表示
GoRouter redirectがルート認証ガードを実装

📝 練習問題

基本 (⭐)：フェーズ1プロジェクトを三層アーキテクチャでリファクタリングし、ウィジェット内のネットワークリクエストをRepositoryに抽出してください。
中級 (⭐⭐)：Auth Notifier + SecureStorageを追加し、ログイン状態の永続化と401自動リフレッシュを実装してください。
チャレンジ (⭐⭐⭐)：完全なユーザーフローを実装してください：商品閲覧（オフラインキャッシュ）→ カート追加（永続化）→ ログイン（トークンリフレッシュ）→ チェックアウト（フォームバリデーション）→ 注文確認。ネットワーク障害時の各ステップでグレースフルデグラデーションを適用してください。

← 前のレッスン | 次のレッスン →

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

私たちについて