個人開発者が勉強がてらまとめているだけのサイトです

ボトムナビゲーション Navigation Bar

画面の一番下にアイコンと文字が横に並び、押すとアプリの主な画面が切り替わる。

別名
ボトムナビタブバー（iOS）下タブボトムタブBottomNavigationBarTab Bar
動き
下に並ぶタップで切り替え選択中が強調される
作り方
標準ウィジェット Flutter に入っているものだけで作れます

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

別タブで大きく開く ↗

どんなもの？

ほとんどのスマホアプリが採用している、いちばん基本のナビゲーションです。iOS では「タブバー」と呼ばれます。

Material 3 では NavigationBar を使います（古い BottomNavigationBar も残っていますが、新しく作るなら NavigationBar）。

selectedIcon を指定すると、選ばれているタブだけ塗りつぶしのアイコンにできます。

未読数などは、アイコンを Badge で包むと右上に数字が付きます。

こんなときに

  • 主な行き先が3〜5個あり、どれも同じくらい行き来する
  • 片手で親指が届く場所に、常に行き先を見せておきたい

避けたい場面

  • 行き先が6個以上（ナビゲーションドロワーにする）
  • タブレットや PC の横長画面（ナビゲーションレールのほうが画面を広く使える）

最小コード

Scaffold(
  body: pages[index],
  bottomNavigationBar: NavigationBar(
    selectedIndex: index,
    onDestinationSelected: (i) => setState(() => index = i),
    destinations: const [
      NavigationDestination(
        icon: Icon(Icons.home_outlined),
        selectedIcon: Icon(Icons.home),
        label: 'ホーム',
      ),
      NavigationDestination(
        icon: Badge(label: Text('3'), child: Icon(Icons.notifications_outlined)),
        label: '通知',
      ),
    ],
  ),
)

使うウィジェット

NavigationBarNavigationDestinationBadge

似ているもの・一緒に見たいもの