Flutter Bottom Navigation Tutorial

flutter-bottom-navigation
flutter-bottom-navigation

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

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

Getting started

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

flutter create flutterdemo
<span class="hljs-built_in">cd</span> flutterdemo

Now, we need to work with our main.dart

<span class="hljs-keyword">import</span> <span class="hljs-symbol">'package</span>:flutter/material.dart';

void main() => runApp(<span class="hljs-type">MaterialApp</span>(home: <span class="hljs-type">MyApp</span>()));

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyApp</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">StatefulWidget</span> </span>{
  <span class="hljs-meta">@override</span>
  _MyAppState createState() => _MyAppState();
}

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">_MyAppState</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">State<MyApp></span> </span>{
  int _selectedTabIndex = <span class="hljs-number">0</span>;

  <span class="hljs-type">List</span> _pages = [
    <span class="hljs-type">Text</span>(<span class="hljs-string">"Home"</span>),
    <span class="hljs-type">Text</span>(<span class="hljs-string">"Search"</span>),
    <span class="hljs-type">Text</span>(<span class="hljs-string">"Account"</span>),
  ];

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

  <span class="hljs-meta">@override</span>
  <span class="hljs-type">Widget</span> build(<span class="hljs-type">BuildContext</span> context) {
    <span class="hljs-keyword">return</span> <span class="hljs-type">Scaffold</span>(
      appBar: <span class="hljs-type">AppBar</span>(
          title: <span class="hljs-type">Text</span>(<span class="hljs-string">"codesundar"</span>), backgroundColor: <span class="hljs-type">Colors</span>.lightBlue[<span class="hljs-number">900</span>]),
      body: <span class="hljs-type">Center</span>(child: _pages[_selectedTabIndex]),
      bottomNavigationBar: <span class="hljs-type">BottomNavigationBar</span>(
        currentIndex: _selectedTabIndex,
        onTap: _changeIndex,
        items: [
          <span class="hljs-type">BottomNavigationBarItem</span>(icon: <span class="hljs-type">Icon</span>(<span class="hljs-type">Icons</span>.home), title: <span class="hljs-type">Text</span>(<span class="hljs-string">"Home"</span>)),
          <span class="hljs-type">BottomNavigationBarItem</span>(
              icon: <span class="hljs-type">Icon</span>(<span class="hljs-type">Icons</span>.search), title: <span class="hljs-type">Text</span>(<span class="hljs-string">"Search"</span>)),
          <span class="hljs-type">BottomNavigationBarItem</span>(
              icon: <span class="hljs-type">Icon</span>(<span class="hljs-type">Icons</span>.account_circle), title: <span class="hljs-type">Text</span>(<span class="hljs-string">"My Account"</span>)),
        ],
      ),
    );
  }
}

Explanation:

  • To display bottom navigation, we have to use bottomNavigationBar property with Scaffold
  • BottomNavigationBar() requires items where you can use BottomNavigationBarItem() . When a 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

<span class="hljs-keyword">import</span> <span class="hljs-symbol">'package</span>:flutter/material.dart'; 

void main() => runApp(<span class="hljs-type">MaterialApp</span>(home: <span class="hljs-type">MyApp</span>())); 

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyApp</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">StatefulWidget</span> </span>{
  <span class="hljs-meta">@override</span>
  _MyAppState createState() => _MyAppState(); 
}

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">_MyAppState</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">State<MyApp></span> </span>{
  int _selectedTabIndex = <span class="hljs-number">0</span>; 

  <span class="hljs-type">List</span> _pages = [
    <span class="hljs-type">Text</span>(<span class="hljs-string">"Home"</span>), 
    <span class="hljs-type">Text</span>(<span class="hljs-string">"Search"</span>), 
    <span class="hljs-type">Text</span>(<span class="hljs-string">"Cart"</span>), 
    <span class="hljs-type">Text</span>(<span class="hljs-string">"Account"</span>), 
  ]; 

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

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

Output

flutter-bottom-navigation-example
flutter-bottom-navigation-example