
In diesem Artikel werden wir lernen, wie die Bottom Navigation Bar in Flutter verwendet wird. Eine Bottom Navigation Bar ist ein materielles Widget, das sich am unteren Rand einer App befindet und zur Navigation zu verschiedenen Seiten der App dient.
Hier ist eine Beispiel App mit BottomNavigationBar zu sehen, die während diesen Artikels entwickelt wird:

1. Einbinden der BottomNavigationBar
Eine Bottom Navigation Bar kann leicht ins Projekt eingebaut werden, indem das entsprechende Attribut, also bottomNavigationBar, beim Scaffold hinzugefügt wird.
Als erstes wird das material.dart Package importiert.
import 'package:flutter/material.dart';
Danach wird die Scaffold mit bottomNavigationBar ergänzt.
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.settings),
label: 'Settings',
),
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.message),
label: 'Messages',
),
],
currentIndex: _selectedIndex,
onTap: _onItemTapped,
),
Hinweis: Es müssen mindestens zwei BottomNavigationBarItems in items aufgelistet werden. Für iOS Geräte muss ein Label angegeben werden.\
Hier beschreibt ein BottomNavigationBarItem eine klickbare Option der unteren Navigationsleiste.
Mit dem Attribut currentIndex wird die aktive Option der Navigationsleiste angegeben. Dieser ist an dieser Stelle mit der Variable _selectedIndex belegt, sodass die aktive Option der Navigationsleiste angepasst werden kann. Wie das funktioniert wird in diesem Artikel weiter unten beschrieben. Das Attribut onTap ist die Methode, die durch einen Tap auf die Navigationsleiste ausgeführt wird. Diesem kann eine Methode übergeben werden, sodass ein Tap die _selectedIndex einen neuen Wert übergibt.
2. Die onTap Methode
Hier wird die _onItemTapped Methode definiert. Der Parameter index wird von dem BottomNavigationBar Widget bereit gestellt. Der index nimmt den korrespondierenden Wert zum geklickten Tab an. Durch setState wird das neue Bauen der Seite inszeniert und zuvor die _selectedIndex Variable mit index überschrieben. Damit wird auf der neu gebauten Seite die ausgewählte Option der Navigationsleiste und die dazugehörige Page angezeigt.
void _onItemTapped(int index) {
setState(
() {
_selectedIndex = index;
},
);
}
Hinweis: An dieser Stelle ist anzumerken, dass die setState-Methode nur in einem StatefulWidget funktioniert, da sich hier, im Gegensatz zum StatelessWidget der Status der Seite verändern kann.
3. Definition der einzelnen Seiten der Navigationsoptionen
Nachdem die Verbindung zwischen der BottomNavigationBar und der onTap Methode hergestellt ist, fehlt jetzt noch die entsprechende Seite anzuzeigen. Nachfolgend wird eine Liste definiert mit Beispiel-Widgets für die jeweilige Seite.
final List<Widget> _pages = <Widget>[
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Text("Settings"),
Icon(Icons.settings),
],
),
),
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Text("Home"),
Icon(Icons.home),
],
),
),
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Text("Messages"),
Icon(Icons.message),
],
),
),
];
Hinweis: An dieser Stelle können auch Scaffolds um die Center bei den _pages angegeben werden. Diese Scaffolds können dann auch mit individuellen appBars definiert werden. Dann ist es sinnvoll bei dem Scaffold, bei dem die bottomNavigationBar definiert wird, die appBar zu entfernen.
4. Verbindung der Seiten mit der BottomNavigationBar
Nun fehlt nur noch der Zugriff, der dem Attribut body beim Scaffold hinzugefügt wird, und wir sind fertig. An dieser Stelle wird das Scaffold immer mit dem Widget aus der Liste _pages an der _selectedIndex Stelle gebaut.
body: Center(
child: _pages.elementAt(_selectedIndex),
)
5. Zusammenfassung
Es wurde eine BottomNavigationBar zum Scaffold hinzugefügt, der Auslösemechanismus implementiert und die anzuzeigenden Widgets auf der Seite definiert.
Insgesamt sieht der Code wie folgt aus:
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
static const String _title = 'Flutter BottomNavigationBar Demo';
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: _title,
home: MyStatefulWidget(),
);
}
}
class MyStatefulWidget extends StatefulWidget {
const MyStatefulWidget({Key? key}) : super(key: key);
@override
State<MyStatefulWidget> createState() =>
_MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
int _selectedIndex = 1;
final List<Widget> _pages = <Widget>[
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Text("Settings"),
Icon(Icons.settings),
],
),
),
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Text("Home"),
Icon(Icons.home),
],
),
),
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Text("Messages"),
Icon(Icons.message),
],
),
),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('BottomNavigationBar Sample'),
),
body: Center(
child: _pages.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.settings),
label: 'Settings',
),
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.message),
label: 'Messages',
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
);
}
}
6. Wie geht es weiter?
Wie eine BottomNavigationBar aus Design-Sicht realisiert werden sollte und welche “Do” and “Don’t” es zu beachten gilt lässt sich hier finden: [Material IO - BottomNavigationBar] (https://www.material.io/components/bottom-navigation)
Wie bereits weiter oben im Artikel drauf hingewiesen kann es auch sinnvoll sein weitere Scaffolds je Seite zu nutzen. Ein interessanter Artikel zu Scaffolds und was zu beachten gilt findet sich hier:
[Was du über das Flutter Scaffold Widget wissen solltest] (https://flutter.de/artikel/flutter-statusbar-farbe-%C3%A4ndern.html)
Comments