CODESUNDAR

Flutter Bottom Navigation Tutorial with Example

SUNDARAVEL    SUBSCRIBE

I teach how to build apps using ionic and flutter

In our flutter tutorial series, I'm going to write about flutter bottom navigation tutorial with 4 items/tabs

Docs: https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html

flutter-bottom-navigation-tutorial

Getting started

Let’s explore, how to work with a bottom navigation bar with flutter.

flutter create flutterdemo
cd flutterdemo

Now, we need work with our  main.dart 

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: MyApp()));

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _selectedTabIndex = 0;

  List _pages = [
    Text("Home"),
    Text("Search"),
    Text("Account"),
  ];

  _changeIndex(int index) {
    setState(() {
      _selectedTabIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Text("codesundar"), backgroundColor: Colors.lightBlue[900]),
      body: Center(child: _pages[_selectedTabIndex]),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _selectedTabIndex,
        onTap: _changeIndex,
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("Home")),
          BottomNavigationBarItem(
              icon: Icon(Icons.search), title: Text("Search")),
          BottomNavigationBarItem(
              icon: Icon(Icons.account_circle), title: Text("My Account")),
        ],
      ),
    );
  }
}

Explanation:

  • To display bottom navigation, we have to use bottomNavigationBar  property with Scaffold
  • BottomNavigationBar()  requires items where you can use BottomNavigationBarItem() . When user clicks any Tab, we’re calling  _changeIndex  to update  _selectedTabIndex .
  • Based on  _selectedTabIndex  we’re displaying required widgets using  _pages[_selectedTabIndex]  in body

Note: you can create separate page & pass that widget into  _pages

Flutter Bottom Navigation Tutorial with 4 tabs

In case, if you want to add 4 items on your tab, we need to add type: BottomNavigationBarType.fixed on BottomNavigationBar so our final code looks like

import 'package:flutter/material.dart'; 

void main() => runApp(MaterialApp(home: MyApp())); 

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState(); 
}

class _MyAppState extends State<MyApp> {
  int _selectedTabIndex = 0; 

  List _pages = [
    Text("Home"), 
    Text("Search"), 
    Text("Cart"), 
    Text("Account"), 
  ]; 

  _changeIndex(int index) {
    setState(() {
      _selectedTabIndex = index; 
    }); 
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Text("codesundar"), backgroundColor: Colors.lightBlue[900]), 
      body: Center(child: _pages[_selectedTabIndex]), 
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _selectedTabIndex, 
        onTap: _changeIndex, 
        type: BottomNavigationBarType.fixed, 
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("Home")), 
          BottomNavigationBarItem(
              icon: Icon(Icons.search), title: Text("Search")), 
          BottomNavigationBarItem(
              icon: Icon(Icons.shopping_cart), title: Text("Cart")), 
          BottomNavigationBarItem(
              icon: Icon(Icons.account_circle), title: Text("My Account")), 
        ], 
      ), 
    ); 
  }
}

Output

flutter-bottom-navigation-example

Categories: FlutterFlutter Tutorial
Tags:FlutterFlutter Tutorial