Bottom Navigation

 Do you know how can we created a bottom navigation in flutter?

In this blog we are created a bottom navigation in our app. To implement a bottom navigation in flutter is simple.  You can add easily bottom navigation in your app.

In the scaffold widget, you can find bottomnavigationbar and you can pass BottomNavigationBar widget 

and it takes List of BottomNavigationItem. 

Full code:

import 'package:flutter/material.dart';

void main() {

  runApp(MyApp());

}

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      debugShowCheckedModeBanner: false,

      home: Home(),

      

    );

  }

}

class Home extends StatefulWidget {

  @override

  _HomeState createState() => _HomeState();

}

class _HomeState extends State<Home> {

  int currentIndex=0;

  static const  style=TextStyle(fontSize: 18,fontWeight: FontWeight.bold);

  void _selectedIndex(int val){

  

      setState(() {

        currentIndex=val;

      });

   

  }

static const List<Widget> optionswidgets=[

  Text("Home",style: style,),

  Text("Library",style: style,),

  Text("Downloads",style: style,),

];

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: Text("Bottom Navigation"),

      ),

      bottomNavigationBar: BottomNavigationBar(

        items:const <BottomNavigationBarItem> [

          BottomNavigationBarItem(icon: Icon(Icons.home),

          title: Text("Home")

          ),

      BottomNavigationBarItem(icon: Icon(Icons.library_music),

          title: Text("Library")

          ),

          BottomNavigationBarItem(icon: Icon(Icons.file_download),

          title: Text("Downloads")

          ),

        ],

      selectedItemColor: Colors.red,

       backgroundColor: Colors.white,

        currentIndex: currentIndex,

        onTap: (value) {_selectedIndex(value);},

      )

      ,body: Container(

      height: MediaQuery.of(context).size.height,

      width: MediaQuery.of(context).size.width,

        child: Card(

          margin: EdgeInsets.all(1),

          elevation: 5,

          child: Center(child: optionswidgets.elementAt(currentIndex)

          ,)

          ,),

      ),

    );

  }

}

Output: