Search This Blog

Wednesday, July 25, 2018

Flutter - Bottom navigation bar.

To navigate from one screen to another screen on a single page, there are many options for making navigation easy in your application for the user. Bottom Navigation Bar is one of them. 


Flutter bottom navigation bar.
Bottom Navigation Bar always stays at the bottom of your mobile application and provides navigation between the views of the mobile application. Each Bottom Navigation bar item denotes a different sub screen or feature of an application.

You should use Bottom Navigation if you have three to five top-level navigation items of the mobile application. Otherwise, we should use Navigation Drawer and scrollable Tabbar. You can see a simple example of Drawer and Tabbar here.

To create a bottom bar based app, Flutter SDK provides us an inbuilt widget BottomNavigationBarYou have to use BottomNavigationBarItem to define item properties. 

In this post, we going to explain a basic of bottom bar implementation in Flutter. We'll use three item, Home, Location, and Friends. After clicking or swipe on the screen, you'll able to change application feature. 

This blog assumes that you have already set up the flutter in your PC and you have a basic idea of Flutter Application. If you have not install flutter yet, get started from here.

So, let's start it,





Creating a New Project  
1. Create a new project from File ⇒ New Flutter Project with your development IDE . 
2. Open main.dart file and edit it. As we have set our theme and change debug banner property of Application.
main.dart
void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Flutter Bottom Navigation', debugShowCheckedModeBanner: false, theme: new ThemeData( primaryColor: const Color(0xFF02BB9F), primaryColorDark: const Color(0xFF167F67), accentColor: const Color(0xFFFFAD32), ), home: new DashboardScreen(title: 'Bottom Navigation'), ); } }
3. After that, create DashboardScreen class inside of main.dart as you can see below. We have made it stateful widget because it will update on tab change.
main.dart
class DashboardScreen extends StatefulWidget { DashboardScreen({Key key, this.title}) : super(key: key); final String title; @override _DashboardScreenState createState() => new _DashboardScreenState(); }

4. After that, create _DashboardScreenState class inside of main.dart. Here, we'll write the main logic of bottom bar navigation. So, first of all, initialize the widget with the following properties.
main.dart
//inside _DashboardScreenState class
PageController _pageController; int _page = 0; @override void initState() { super.initState(); _pageController = new PageController(); } @override void dispose() { super.dispose(); _pageController.dispose(); }
As you can see, we have created an instance of pageController to control navigation and we managing a tag(_page) for a page.

5. Now, create a method navigationTapped. Here, we'll change an item of the Bottom bar when the user tab on an item. 
main.dart
//inside _DashboardScreenState class
void navigationTapped(int page) { // Animating to the page. // You can use whatever duration and curve you like _pageController.animateToPage(page, duration: const Duration(milliseconds: 300), curve: Curves.ease); }



6. It's time to create the bottom bar item and set its properties. Now, edit build method. As you can see below.
main.dart
//inside _DashboardScreenState class
@override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text( widget.title, style: new TextStyle(color: const Color(0xFFFFFFFF)), ), ), body: new PageView( children: [ new Home("Home screen"), new Location("Location screen"), new Friends("Friends screen"), ], onPageChanged: onPageChanged, controller: _pageController, ), bottomNavigationBar: new Theme( data: Theme.of(context).copyWith( // sets the background color of the `BottomNavigationBar` canvasColor: const Color(0xFF167F67), ), // sets the inactive color of the `BottomNavigationBar` child: new BottomNavigationBar( items: [ new BottomNavigationBarItem( icon: new Icon( Icons.home, color: const Color(0xFFFFFFFF), ), title: new Text( "Home", style: new TextStyle( color: const Color(0xFFFFFFFF), ), )), new BottomNavigationBarItem( icon: new Icon( Icons.location_on, color: const Color(0xFFFFFFFF), ), title: new Text( "Location", style: new TextStyle( color: const Color(0xFFFFFFFF), ), )), new BottomNavigationBarItem( icon: new Icon( Icons.people, color: const Color(0xFFFFFFFF), ), title: new Text( "Friends", style: new TextStyle( color: const Color(0xFFFFFFFF), ), )) ], onTap: navigationTapped, currentIndex: _page, ), ), ); }
in the above snippet, we have added app bar with a title Text. After that, we have provided an instance of PageView. It contains all the pages that will switch on bottom bar tap. At the end, we have used the bottomNavigationBar property for define bottom bar item.

Now merge all above code snippet, the final main.dart file look like below.

main.dart
import 'package:flutter/material.dart'; import 'package:flutter_bottom_bar_navigation/friends.dart'; import 'package:flutter_bottom_bar_navigation/home.dart'; import 'package:flutter_bottom_bar_navigation/location.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Flutter Bottom Navigation', debugShowCheckedModeBanner: false, theme: new ThemeData( primaryColor: const Color(0xFF02BB9F), primaryColorDark: const Color(0xFF167F67), accentColor: const Color(0xFFFFAD32), ), home: new DashboardScreen(title: 'Bottom Navigation'), ); } } class DashboardScreen extends StatefulWidget { DashboardScreen({Key key, this.title}) : super(key: key); final String title; @override _DashboardScreenState createState() => new _DashboardScreenState(); } class _DashboardScreenState extends State<DashboardScreen> { PageController _pageController; int _page = 0; @override void initState() { super.initState(); _pageController = new PageController(); } @override void dispose() { super.dispose(); _pageController.dispose(); } void navigationTapped(int page) { // Animating to the page. // You can use whatever duration and curve you like _pageController.animateToPage(page, duration: const Duration(milliseconds: 300), curve: Curves.ease); } void onPageChanged(int page) { setState(() { this._page = page; }); } @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text( widget.title, style: new TextStyle(color: const Color(0xFFFFFFFF)), ), ), body: new PageView( children: [ new Home("Home screen"), new Location("Location screen"), new Friends("Friends screen"), ], onPageChanged: onPageChanged, controller: _pageController, ), bottomNavigationBar: new Theme( data: Theme.of(context).copyWith( // sets the background color of the `BottomNavigationBar` canvasColor: const Color(0xFF167F67), ), // sets the inactive color of the `BottomNavigationBar` child: new BottomNavigationBar( items: [ new BottomNavigationBarItem( icon: new Icon( Icons.home, color: const Color(0xFFFFFFFF), ), title: new Text( "Home", style: new TextStyle( color: const Color(0xFFFFFFFF), ), )), new BottomNavigationBarItem( icon: new Icon( Icons.location_on, color: const Color(0xFFFFFFFF), ), title: new Text( "Location", style: new TextStyle( color: const Color(0xFFFFFFFF), ), )), new BottomNavigationBarItem( icon: new Icon( Icons.people, color: const Color(0xFFFFFFFF), ), title: new Text( "Friends", style: new TextStyle( color: const Color(0xFFFFFFFF), ), )) ], onTap: navigationTapped, currentIndex: _page, ), ), ); } }

7. At the end, we have created Home, Location and Friends widget screen that we have mapped with PageView in the main.dart. As you can see, the files are the same with a different class name. In this files, we showing a title of the selected tab.  
home.dart
import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; class Home extends StatelessWidget { Home(this.listType); final String listType; @override Widget build(BuildContext context) { return new Scaffold( body: new Center( child: new Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ new Text( listType, style: Theme.of(context).textTheme.display1, ), ], ), ), ); } }
location.dart
import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; class Location extends StatelessWidget { Home(this.listType); final String listType; @override Widget build(BuildContext context) { return new Scaffold( body: new Center( child: new Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ new Text( listType, style: Theme.of(context).textTheme.display1, ), ], ), ), ); } }
friends.dart
import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; class Home extends StatelessWidget { Home(this.listType); final String listType; @override Widget build(BuildContext context) { return new Scaffold( body: new Center( child: new Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ new Text( listType, style: Theme.of(context).textTheme.display1, ), ], ), ), ); } }
You can create some complex User Interface there and you can fetch some data from the network to display here.


As you can see it is working absolutely fine.





So that’s all for Bottom Navigation bar in Flutter. I hope the post helped you to learn about Bottom Navigation bar. 


Source Code               


If you facing any issue, you can get a full working project from Github or please feel free to ask from comment section below.

Share:

6 comments:

  1. Very useful, thanks...

    ReplyDelete
  2. Hi, Congratulations for the tutorial. How can I make possible to change the color of the actual page seleted (refering to the in the bottom navigation) to be more clear which page the user is ?

    ReplyDelete
    Replies
    1. Hi, You can change background color of each page inside Scaffold widget.

      Delete
  3. Hi,

    Friends, Location don't compile as there are obviously errors from copy/paste.
    Could you provide a github link please?

    Thanks

    ReplyDelete
    Replies
    1. You can get it from here: https://github.com/DeveloperLibs/flutter_bottom_bar_navigation

      Delete
  4. Hi there, this is really great how can i click button from onboarding page to navigate to Friends screen for example ?

    ReplyDelete

WE'RE SOCIAL

Promotional

  • Cover art Blend

    Blend app is very advanced app there are lots of features like shayari, status, chat, feed....

Categories