ナビゲーションレール Navigation Rail

画面の左端に細い縦のバーがあり、アイコンを押すと画面が切り替わる。広げると文字も出る。

別名: サイドナビ縦のタブ左側のナビゲーションサイドバーSide Navigation
動き: 左に縦に並ぶ幅が広がるタップで切り替え
作り方: 標準ウィジェット Flutter に入っているものだけで作れます

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

別タブで大きく開く ↗

どんなもの？

ボトムナビゲーションを縦にして左に置いたものです。タブレットや PC、スマホの横向きで使います。

横長の画面では、下より左に置いたほうが内容の表示スペースを広く取れます。

extended: true で幅が広がり、アイコンの横にラベルが出ます（minExtendedWidth で広げたときの幅を指定）。

画面幅で NavigationBar と切り替えるのが定番で、LayoutBuilder で幅を見て出し分けます。

こんなときに

タブレット・PC・横向きの画面で、主な行き先が3〜7個ある

避けたい場面

縦向きのスマホ（内容の幅が狭くなる。ボトムナビゲーションにする）

最小コード

Row(
  children: [
    NavigationRail(
      selectedIndex: index,
      onDestinationSelected: (i) => setState(() => index = i),
      labelType: NavigationRailLabelType.all,
      destinations: const [
        NavigationRailDestination(icon: Icon(Icons.home_outlined), label: Text('ホーム')),
        NavigationRailDestination(icon: Icon(Icons.search), label: Text('検索')),
      ],
    ),
    const VerticalDivider(width: 1),
    Expanded(child: pages[index]),
  ],
)