Flutter - Bottom Navigation Bar

Flutter - Bottom Navigation Bar

Hello developers….!!

Bottom Navigation Bar

 

A bottom navigation bar is a material widget that is present at the bottom of an app for selecting or navigating to different pages of the app. It is usually used in conjunction with a Scaffold, where it is provided as the Scaffold.bottomNavigationBar argument.

Though flutter provides you with the BottomNavigationBar class, in this article you will learn how to create your own bottom navigation bar. This would be an in-depth tutorial.

As you can see from the implementation of the bottom navigation property the bottomNavigationBar does not specifically mention a widget. This gives us the flexibility to assign our widget of choice to the bottomNavigationBar attribute of the Scaffold.

 

Let’s Create.

Once you get your basic flutter app up and running, your material app assigns the MyHomePage() class to the home attribute.

 

import 'package:flutter/material.dart';

void main() {

 runApp(MyApp());

}

class MyApp extends StatelessWidget {

 const MyApp({Key? key}) : super(key: key);

 @override

 Widget build(BuildContext context) {

   return const MaterialApp(

     home: MyHomePage(),

   );

 }

}

 

Now create a stateful widget and name it as MyHomePage. Return a Scaffold from the MyHomePage class. Now this Scaffold is the main element that contains our bottom navigation bar.

 

class MyHomePage extends StatefulWidget {

  const MyHomePage({Key? key}) : super(key: key);

    @override

  _MyHomePageState createState() => _MyHomePageState();

}
  class _MyHomePageState extends State {

   @override

  Widget build(BuildContext context) {

    return Scaffold();

  }

}

Note*

Before starting to create our bottom navigation bar, create 2-5 pages. Always try to keep your bottom navigation bar minimal with at most 5 items (Pages).Pages are the different screens of your app. 

 For this tutorial, we make 4 basic tabs with some text.In the MyHomePage class declares an int variable as _currentindex initialize it to 0. Every time, we open the app we start at the first page. You can name the variable as you wish. The_currentindex is to hold the index of your current page. Now define a final list as tabs this list will hold all the tabs of our app.

int _currentindex = 0;

final tabs = [

 Center(child: Text('Home'),),

 Center(child: Text('Search'),),

 Center(child: Text('Add'),),

 Center(child: Text('Account'),),

];

Now let’s create our bottom navigation bar.In the MyHomePage class let’s define the bottomNavigationBar .


bottomNavigationBar: BottomNavigationBar(
....
)

 

Full Example code…

import 'package:flutter/material.dart';

void main() {

 runApp(MyApp());

}

class MyApp extends StatelessWidget {

 const MyApp({Key? key}) : super(key: key);

 @override

 Widget build(BuildContext context) {

   return const MaterialApp(

     home: MyHomePage(),

   );

 }

}

class MyHomePage extends StatefulWidget {

 const MyHomePage({Key? key}) : super(key: key);

 @override
 State createState() => _MyHomePageState();

}

class _MyHomePageState extends State {
 int _currentindex = 0;
 final tabs = [
 Center(child: Text('Home'),),
 Center(child: Text('Search'),),
 Center(child: Text('Add'),),
 Center(child: Text('Account'),),
];


 @override

 Widget build(BuildContext context) {

   return Scaffold(

     appBar: AppBar(

       centerTitle: true,

       leading: IconButton(

         onPressed: () {},

         icon: const Icon(Icons.menu),

       ),

       title: const Text('Bottom Navigation Bar'),

       backgroundColor: Colors.purple,

     ),


     body: tabs[_currentindex] ,//Container

     bottomNavigationBar: BottomNavigationBar(

       currentIndex: _currentindex,

       type: BottomNavigationBarType.fixed,

       backgroundColor: Colors.purple,

       fixedColor: Colors.white,

       unselectedItemColor: Colors.white,

       showUnselectedLabels: false,

       elevation: 0,

       items: const [

         BottomNavigationBarItem(

           icon: Icon(Icons.home),

           label: 'Home',

           backgroundColor: Colors.lightGreen,

         ),

         BottomNavigationBarItem(

           icon: Icon(Icons.search),

           label: 'Search',

         ),

         BottomNavigationBarItem(

           icon: Icon(Icons.add_box_outlined),

           label: 'Add',

         ),

         BottomNavigationBarItem(

           icon: Icon(Icons.account_circle_rounded),

           label: 'Account',

         ),

       ],

       onTap: (index) {

         setState(() {

           _currentindex = index;

         });

       },

     ),

   );

 }

}


 

 

 

 


 We are developing Mobile application and Web application for more details visit our web site www.appslanka.lk

 

0 Comments

Leave a comment

Your email address will not be published. Required fields are marked *