context は「住所」

build メソッドの第一引数 BuildContext context は、そのWidgetがツリーのどこにいるかを表すオブジェクト。

@override
Widget build(BuildContext context) {
  // context を使って「ツリーの上方向」を探索できる
}

context を使う3つの場面

筋トレメモの実コードで context が使われている場面:

1. ナビゲーション

await Navigator.of(context).push(
  MaterialPageRoute(
    builder: (_) => const RoutineManageScreen(),
  ),
);

2. テーマ取得

Theme.of(context).textTheme.titleMedium?.copyWith(
  fontWeight: FontWeight.bold,
)

3. ダイアログ・スナックバー表示

showDialog(
  context: context,
  builder: (ctx) => AlertDialog(...),
);

context.mounted チェック

非同期処理の後に context を使うときの注意点:

Future<void> _onRoutineTap(...) async {
  await ref.read(activeWorkoutProvider.notifier).startSession(data);
  if (!context.mounted) return;  // ← まだ画面が存在するか確認！
  Navigator.of(context).push(...);
}

レイヤー境界: context は Repository に渡してはダメ 弱点

筋トレメモのアーキテクチャを思い出そう:

UI (Widget)  →  Provider  →  Repository  →  DB
  context ✅      ref ✅       なし ✅      なし ✅

Repository の引数を見てみよう:

class WorkoutRepository {
  final AppDatabase _db;

  Future<void> saveSession(
    ActiveWorkoutState recordState, {  // ← ドメインデータだけ！
    String? userId,
    SyncService? syncService,
  }) async { ... }
}

Repository に BuildContext が一切ないことに注目。

Scaffold: 画面の骨組み

return Scaffold(
  appBar: AppBar(title: const Text('履歴')),
  body: sessionsAsync.when(
    loading: () => const Center(child: CircularProgressIndicator()),
    error: (e, _) => Center(child: Text('エラーが発生しました: $e')),
    data: (sessions) { ... },
  ),
);

Column / Row: 縦並び・横並び

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    const SizedBox(height: 24),
    Row(  // ← 横並び: アプリ名 + 設定ボタン
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Column(children: [Text('筋トレメモ'), ...]),
        GestureDetector(child: Icon(Icons.settings)),
      ],
    ),
    const CalendarWidget(),
    Expanded(child: ListView(...)),
  ],
)

ListView: スクロールできるリスト

ListView.separated(
  itemCount: routineList.length + 1,
  separatorBuilder: (_, _) => const SizedBox(height: 12),
  itemBuilder: (context, index) {
    if (index == routineList.length) {
      return _FreeSessionCard(...);
    }
    return _RoutineCard(data: routineList[index], ...);
  },
)

Container / SizedBox: サイズと装飾

Container(
  decoration: BoxDecoration(
    color: AppColors.card,
    borderRadius: BorderRadius.circular(12),
    border: Border.all(color: AppColors.border),
  ),
  child: Row(children: [...]),
)

const SizedBox(height: 24),  // 24px の縦スペース
const SizedBox(width: 8),    // 8px の横スペース

GestureDetector vs InkWell 弱点

筋トレメモには両方のパターンがある:

GestureDetector（リップルなし）

GestureDetector(
  onTap: () async { ... },
  child: const Icon(Icons.settings, ...),
)

InkWell（リップルあり）

InkWell(
  borderRadius: BorderRadius.circular(12),
  onTap: () { ... },
  child: Padding(
    padding: const EdgeInsets.all(16),
    child: Column(...),
  ),
)

NavigationBar: タブ切り替え

筋トレメモの画面下部にあるタブ:

home: Scaffold(
  body: screens[_selectedIndex],
  bottomNavigationBar: NavigationBar(
    selectedIndex: _selectedIndex,
    onDestinationSelected: (index) {
      setState(() => _selectedIndex = index);
    },
    destinations: const [
      NavigationDestination(icon: Icon(Icons.home), label: 'ホーム'),
      NavigationDestination(icon: Icon(Icons.history), label: '履歴'),
    ],
  ),
)

push: 新しい画面を「積む」

Navigator.of(context).push(
  MaterialPageRoute(
    builder: (_) => const WorkoutScreen(),
  ),
);

push すると画面が「スタック」に積まれる:

pop / popUntil: 画面を「取り除く」

ダイアログを閉じる + 元の画面まで戻る例:

Navigator.of(ctx).pop();  // ← ダイアログを閉じる
ref.read(activeWorkoutProvider.notifier).discardSession();
Navigator.of(context).popUntil((route) => route.isFirst);
// ↑ 最初の画面（ホーム）まで一気に戻る

popUntil のスタック変化:

pushAndRemoveUntil: 入れ替えて積む

トレーニング完了時のナビゲーション:

Navigator.of(context).pushAndRemoveUntil(
  MaterialPageRoute(
    builder: (_) => WorkoutSummaryScreen(summary: summary),
  ),
  (route) => route.isFirst,  // ← ホーム画面だけ残す
);

スタック変化のイメージ: