ナビゲーションドロワー Navigation Drawer

左上の「≡」を押すと、画面の左から行き先の一覧が引き出しのように滑り出てくる。

別名: ドロワーハンバーガーメニューサイドメニュー引き出しメニュースライドメニューHamburger Menu
動き: 左から出てくる背景が暗くなる左端からスワイプ
作り方: 標準ウィジェット Flutter に入っているものだけで作れます

本物の Flutter ウィジェットが動きます（初回は数秒かかります）

別タブで大きく開く ↗

どんなもの？

「≡」の見た目から「ハンバーガーメニュー」とも呼ばれます。行き先が多いときに、普段は隠しておけます。

Scaffold の drawer に NavigationDrawer を渡すだけで、AppBar の左上に≡ボタンが自動で付き、

画面の左端から右へスワイプしても開くようになります（スマホのみ。Flutter は PC（macOS・Windows・Linux）では

この引き出す動きを無効にしているので、PC の Web で見ているこのデモでは≡ボタンで開いてください）。

項目を選んだら Scaffold の closeDrawer() で閉じます。

こんなときに

行き先が6個以上ある、またはたまにしか使わない画面（設定・ヘルプなど）がある

避けたい場面

主な画面を全部ドロワーにしまう（隠れているので使われにくい。主な3〜5個はボトムナビゲーションに）

最小コード

final scaffoldKey = GlobalKey<ScaffoldState>();

Scaffold(
  key: scaffoldKey,
  appBar: AppBar(title: const Text('メール')), // 左上に≡が自動で付く
  drawer: NavigationDrawer(
    selectedIndex: index,
    onDestinationSelected: (i) {
      setState(() => index = i);
      scaffoldKey.currentState!.closeDrawer();
    },
    children: const [
      NavigationDrawerDestination(icon: Icon(Icons.inbox_outlined), label: Text('受信トレイ')),
      NavigationDrawerDestination(icon: Icon(Icons.send_outlined), label: Text('送信済み')),
    ],
  ),
  body: pages[index],
)