How to create BottomNavigationBar in flutter?

<p>In this article, I'm going to share the code to create a ButtonNavigationBar as shown in below image. ![](../../Uploads/50a859ef-cee4-427e-80b4-a2e96b9710c8.gifwidth="50%height="auto](</p> <p Key="" key="" _selectedIndex="index;">Below is the code to create this App. All you need to do is to copy this code into your main.dart file in your flutter project. color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;](color: #569cd6;](import color: #ce9178;]('package:flutter/material.dart'; color: #569cd6;](void main() => runApp(MyApp()); color: #569cd6;](class MyApp color: #569cd6;](extends StatelessWidget { color: #569cd6;](static color: #569cd6;](const String _title = color: #ce9178;]('Flutter Code Sample'; color: #569cd6;](@override Widget build(BuildContext context) { color: #569cd6;](return MaterialApp( title: _title, home: MyStatefulWidget(), ); }} color: #569cd6;](class MyStatefulWidget color: #569cd6;](extends StatefulWidget { MyStatefulWidget() : color: #569cd6;](super(key: key); color: #569cd6;](@override _MyStatefulWidgetState createState() => _MyStatefulWidgetState();} color: #569cd6;](class _MyStatefulWidgetState color: #569cd6;](extends State { color: #569cd6;](int _selectedIndex = color: #b5cea8;](0; color: #569cd6;](static color: #569cd6;](const color: #569cd6;](double IconSize = color: #b5cea8;](200; color: #569cd6;](static List _widgetOptions = [ HomePage(), BusinessPage(), SchoolPage(), ]; color: #569cd6;](void _onItemTapped(color: #569cd6;](int index) { setState(() ); } color: #569cd6;](@override Widget build(BuildContext context) { color: #569cd6;](return Scaffold( appBar: AppBar( title: color: #569cd6;](const Text(color: #ce9178;]('BottomNavigationBar Sample'), ), body: Center( child: _widgetOptions.elementAt(_selectedIndex), ), bottomNavigationBar: BottomNavigationBar( items: color: #569cd6;](const <a href="%27Home%27"> BottomNavigationBarItem( icon: Icon(Icons.home), title: Text(color: #ce9178;</a>, ), BottomNavigationBarItem( icon: Icon(Icons.business), title: Text(color: #ce9178;]('Business'), ), BottomNavigationBarItem( icon: Icon(Icons.school), title: Text(color: #ce9178;]('School'), ), ], currentIndex: _selectedIndex, selectedItemColor: Colors.amber[color: #b5cea8;](800], showUnselectedLabels: color: #569cd6;](false, onTap: _onItemTapped, ), ); }} color: #569cd6;](class HomePage color: #569cd6;](extends StatelessWidget { color: #569cd6;](@override Widget build(BuildContext context) { color: #569cd6;](return Icon( Icons.home, size: color: #b5cea8;](100 ); }} color: #569cd6;](class BusinessPage color: #569cd6;](extends StatelessWidget { color: #569cd6;](@override Widget build(BuildContext context) { color: #569cd6;](return Icon( Icons.business, size: color: #b5cea8;](100 ); }} color: #569cd6;](class SchoolPage color: #569cd6;](extends StatelessWidget { color: #569cd6;](@override Widget build(BuildContext context) { color: #569cd6;](return Icon( Icons.school, size: color: #b5cea8;](100 ); }} Hope this example is useful to you. Thanks,Srikanth</p>