Flutter: BottomNavigationBar Example
The bottom navigation bar consists of multiple items in the form of text labels, icons, or both, laid out on top of a piece of material. It provides quick navigation between the top-level views of an app. For larger screens, side navigation may be a better fit.
It is displayed at the bottom of an app for selecting among a small number of views, typically between three and five.
BottomNavigationBar Example In Flutter
import 'package:flutter/material.dart';
class BottomNavitationBarWidget extends StatefulWidget {
@override
_BottomNavigationBarWidgetState createState() => _BottomNavigationBarWidgetState();
}
class _BottomNavigationBarWidgetState extends State<BottomNavigationBarWidget> {
int _selectedIndex = 0;
void _onItemTapped(int index){
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home')
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
title: Text('Business')
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
title: Text('School')
)
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
);
}
}
Now we can use this class or say widget in our app.
return Scaffold(
appBar: AppBar(
title: const Text('BottomNavigationBar Sample'),
),
body: Center(
child: Text('Hello World !'),
),
bottomNavigationBar: BottomNavitationBarWidget(),
);