Flutter: BottomNavigationBar verwenden

BottomNavigationBar ist eine Navigationsleiste, die wie Tabs funktioniert, aber am unteren Seitenrand sitzt. Anders als Tabs reagiert sie nicht auf Wischgesten, sondern nur auf Tippen.

Live-Demo

Sie können dieses Widget im interaktiven Beispiel unten ausprobieren:

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

Grundlegende Verwendung

class MyHomePage extends StatefulWidget {
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 0;

  final List<Widget> _pages = [
    HomePage(),
    SearchPage(),
    ProfilePage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages[_selectedIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _selectedIndex,
        onTap: (index) {
          setState(() {
            _selectedIndex = index;
          });
        },
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Search',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
        ],
      ),
    );
  }
}

Wichtige Eigenschaften

Eigenschaft	Beschreibung
currentIndex	Index des ausgewählten Eintrags
onTap	Callback beim Antippen
items	Liste der BottomNavigationBarItem
type	fixed oder shifting
selectedItemColor	Farbe des ausgewählten Eintrags
unselectedItemColor	Farbe nicht ausgewählter Einträge
showUnselectedLabels	Beschriftungen nicht ausgewählter Einträge anzeigen
backgroundColor	Hintergrundfarbe

Optionen für type

// Fixed: All items equal width
BottomNavigationBar(
  type: BottomNavigationBarType.fixed,
  ...
)

// Shifting: Selected item grows, animated
BottomNavigationBar(
  type: BottomNavigationBarType.shifting,
  ...
)

Aktive und inaktive Symbole

BottomNavigationBarItem(
  icon: Icon(Icons.home_outlined),      // Inactive icon
  activeIcon: Icon(Icons.home_filled),  // Active icon
  label: 'Home',
)

Seitenzustand mit IndexedStack erhalten

So bleibt der Zustand beim Seitenwechsel erhalten:

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

Badge hinzufügen

BottomNavigationBarItem(
  icon: Badge(
    label: Text('3'),
    child: Icon(Icons.notifications),
  ),
  label: 'Notifications',
)

NavigationBar (Material 3)

Das neue Navigations-Widget für Material 3:

NavigationBar(
  selectedIndex: _selectedIndex,
  onDestinationSelected: (index) {
    setState(() {
      _selectedIndex = index;
    });
  },
  destinations: [
    NavigationDestination(
      icon: Icon(Icons.home_outlined),
      selectedIcon: Icon(Icons.home),
      label: 'Home',
    ),
    NavigationDestination(
      icon: Icon(Icons.search),
      label: 'Search',
    ),
  ],
)

Zusammenfassung

• BottomNavigationBar: Untere Navigationsleiste
• currentIndex: Index der aktiven Seite
• onTap: Callback beim Seitenwechsel
• type: Erscheinungsbild fixed oder shifting
• IndexedStack: Erhält den Zustand der Seiten

BottomNavigationBar ist der Standard für die Hauptnavigation in mobilen Apps.