Flutter: BottomNavigationBar im Vergleich zu NavigationBar

Flutter bietet zwei starke Optionen für die untere Navigation: die klassische BottomNavigationBar und die NavigationBar aus Material 3. Beide lösen dasselbe Problem, unterscheiden sich aber in Design und Verhalten.

Live-Demo

Sie können das Beispiel zur unteren Navigation in der interaktiven Demo unten ausprobieren:

💡 Falls das Beispiel oben nicht lädt, klicken Sie auf DartPad, um es in einem neuen Tab auszuführen.

Welches sollten Sie verwenden?

BottomNavigationBar: Eine solide Wahl für klassische mobile Apps.
NavigationBar: Der modernere Weg im Sinne von Material 3.

Dieser Artikel zielt auf Suchanfragen wie „flutter bottomnavigationbar vs navigationbar“ und „material 3 navigation flutter“.

Warum BottomNavigationBar weiterhin genutzt wird

Viele bestehende Apps sind rund um das klassische Muster gebaut. Es unterstützt außerdem die Stile fixed und shifting, was es flexibel macht.

BottomNavigationBar(
  currentIndex: index,
  onTap: (value) => setState(() => index = value),
  items: const [
    BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
    BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'),
  ],
)

Was NavigationBar verändert

Mit Material 3 wirkt die untere Navigation weicher, breiter und optisch moderner. Der ausgewählte Zustand und die Symbolgestaltung wirken zeitgemäßer.

NavigationBar(
  selectedIndex: index,
  onDestinationSelected: (value) => setState(() => index = value),
  destinations: const [
    NavigationDestination(icon: Icon(Icons.home_outlined), selectedIcon: Icon(Icons.home), label: 'Home'),
    NavigationDestination(icon: Icon(Icons.search), label: 'Search'),
  ],
)

Unterschied im Design

BottomNavigationBar kann dichter und kompakter wirken. NavigationBar wirkt luftiger und passt besser zu Material 3.

Zustand erhalten

Unabhängig davon, welches Widget Sie wählen: IndexedStack ist oft der beste Weg, den Zustand einer Seite beim Tab-Wechsel zu erhalten.

body: IndexedStack(
  index: index,
  children: const [HomePage(), SearchPage()],
)

Navigationsarchitektur

Die eigentliche Entscheidung betrifft nicht nur das Widget. Sie müssen auch sicherstellen, dass ein Tab-Wechsel den Zustand der einzelnen Seiten nicht zurücksetzt.

Häufig gestellte Fragen

Muss ich NavigationBar verwenden, wenn ich Material 3 nutze?

Nein, aber es passt besser zur Designsprache.

Ist BottomNavigationBar veraltet?

Nein. Es ist weiterhin gültig, wirkt nur klassischer.

Warum ist IndexedStack wichtig?

Es verhindert, dass der Seitenzustand beim Tab-Wechsel zurückgesetzt wird.

Zusammenfassung

BottomNavigationBar und NavigationBar lösen dasselbe Problem mit unterschiedlicher Designsprache. Der visuelle Stil Ihrer App und die verwendete Material-Version sollten die Wahl bestimmen.