Flutter bottom navigation bar

Hey , welcome to flutter one minute tutorial series .

Today we will talk about bottom navigation bar in flutter and how we can implement it in our app.

we will create a class to display some text when our bottom navigation bar is clicked.

class page extends StatelessWidget {
String title;
page(this.title);
@override
Widget build(BuildContext context) {
return new Container(
child: new Center(
child:  new Text(title),
),
);
}
}

Then , we will create a stateful class where we define our tabBarview and assign a tabController to it.

//state class of stateful class zone.
class _zoneState extends State<zone> with SingleTickerProviderStateMixin{
TabController tabController;
//here in the initstate we assign the tabcontroller and give it a length and vsyc for animation.
@override
void initState(){
super.initState();
tabController = new TabController(length: 3,vsync: this);
}
//dispose method for good practice.
@override
void dispose(){
super.dispose();
tabController.dispose();
}
//our build widget of state class.
@override
Widget build(BuildContext context) {
return new Scaffold(appBar:  new AppBar(title: new Text('bottomNavigation'),),
//here we define our TabBarView.
body: new TabBarView(
children: <Widget>[
new page("hey bottomNavigation"),new page('the other one!'),new page('headset is on?')
],
controller: tabController,
),
//now we can just create a bottomnavigationBar under our scaffold
bottomNavigationBar:new Material(
color: Colors.orange,
child: new TabBar(
controller: tabController,
tabs: <Widget>[
new Tab(
child: new Icon(Icons.star),
),
new Tab(
child: new Icon(Icons.favorite),
),
new Tab(
child: new Icon(Icons.headset),
),
],
),
)
);//scaffold
}
}