bottomnavigationbar flutter
In Flutter, the BottomNavigationBar widget provides a navigation bar that appears at the bottom of the screen, typically used to switch between different pages or views in an app. Here's an example of how to use BottomNavigationBar:
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _selectedIndex = 0;
static const List<Widget> _widgetOptions = <Widget>[ Text('Home'), Text('Search'), Text('Profile'), ];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: _widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
label: 'Search',
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Profile',
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.blue,
onTap: _onItemTapped,
),
);
}
}
flutter bottom navigation bar
In this example, we create a stateful widget MyHomePage with a BottomNavigationBar. We define a list of widgets _widgetOptions that represent the different pages or views that the navigation bar switches between. We also define a callback function _onItemTapped that updates the _selectedIndex variable when a navigation item is tapped.
In the build method, we use the Scaffold widget to create a basic layout with an AppBar and a Center widget that displays the currently selected page. We also add the BottomNavigationBar widget with its items property set to a list of BottomNavigationBarItem widgets, each with an icon and a label. We set the currentIndex property to the _selectedIndex variable and the selectedItemColor property to blue. Finally, we pass our _onItemTapped function to the onTap property to handle navigation item taps.
Comments
Post a Comment