Setting Flutter Bottom Navigation

May 4, 2020September 17, 2020 Dhrumil Shah 0 Comments Beginners, Dart, Flutter, Navigation

In this article, You can learn how to set bottom navigation component in your flutter app. Flutter provides BottomNavigationBar widget for this. You can also check out sample at HERE.

We have to add BottomNavigationBar widget in Scaffold Widget as attribute bottomNavigationBar.

Create Widgets To Display Above BottomNavigationBar

First we need to create widgets which are displayed on the click of bottom navigation tab. There are four tabs in bottom navigation: News, Profile, Messages, More. So we create layout using widget for every tab.

News Screen

import ‘package:flutter/material.dart’;

class News extends StatelessWidget{

@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(
child: Text(“News”,style: TextStyle(fontWeight: FontWeight.bold, fontSize: 22))
);
}

}

Profile Screen

import ‘package:flutter/material.dart’;

class Profile extends StatelessWidget{

@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(
child: Text(“Profile”,style: TextStyle(fontWeight: FontWeight.bold, fontSize: 22))
);
}

}

Messages Screen

import ‘package:flutter/cupertino.dart’;

class Messages extends StatelessWidget{

@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(
child: Text(“Messages”,style: TextStyle(fontWeight: FontWeight.bold, fontSize: 22),),
);
}

}

More Screen

import ‘package:flutter/material.dart’;

class More extends StatelessWidget{

@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(
child: Text(“More”,style: TextStyle(fontWeight: FontWeight.bold, fontSize: 22),),
);
}

}

Set BottomNavigationBar Widget

BottomNavigationBar widget has two attributes: type and items. There are two types: fixed and shifting. The differnce between these two types is shifting type shows effect when bottom navigation item clicks and fixed type does not show any effect for that.

In the body parameter, we must pass single widget to display at initial time from already created widgets for News Screen, Profile Screen, Messages Screen and More Screen .

We need to pass array for items attribute. In this array, We have to add BottomNavigationBarItem objects. BottomNavigationBarItem has two required attributes: Icon and Text.

Bottom navigation bar also provides onTap callback to detect click on particular tab. In the onTap method, we get selected tab position among all tabs of bottom navigation. So we change selected widget from ListView Widget.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'messages.dart';
import 'more.dart';
import 'news.dart';
import 'profile.dart';

class Home extends StatefulWidget{

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return HomeState();
  }

}

class HomeState extends State<Home>{

  int selectedIndex = 0;
  List<Widget> listWidgets = [News(),Profile(),Messages(),More()];

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);
    return Scaffold(
        body: listWidgets[selectedIndex],
        bottomNavigationBar: BottomNavigationBar(
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.rss_feed),
              title: Text("News")
            ),
            BottomNavigationBarItem(
                icon: Icon(Icons.supervised_user_circle),
                title: Text("Profile")
            ),
            BottomNavigationBarItem(
                icon: Icon(Icons.message),
                title: Text("Messages")
            ),
            BottomNavigationBarItem(
                icon: Icon(Icons.more),
                title: Text("More")
            ),
          ],
          unselectedItemColor: Colors.black38,
          selectedItemColor: Colors.black,
          unselectedLabelStyle: TextStyle(color: Colors.black),
          selectedLabelStyle: TextStyle(color: Colors.black38),
          currentIndex: selectedIndex,
          onTap: onItemTapped,
        ),
    );
  }

  void onItemTapped(int index){
    setState(() {
      selectedIndex = index;
    });
  }

}

Integrate in main.dart file

import 'package:flutter/material.dart';

import 'home.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Home(),
    );
  }
}