Flutter Tabs Tutorial

In this tutorial, we’re going to implement Flutter Tabs using DefaultTabController widget. If you’re new to flutter please start here: flutter tutorial

I am going to create three tabs such as Chats, Groups, Settings with respective icons. Let’s start by creating new project (or) you can choose your existing project. Since, we’re going to create simple UI, we’re not going to use statefull widget.

flutter create TabExample
cd TabExample
flutter <span class="hljs-keyword">run</span>

Things to Remember:

• Yellow: TabBar widget
• Red: Tab widget
• Green: TabBarView widget

Let’s code (lib/main.dart)

Flutter TabBar Example code

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

<span class="hljs-keyword">void</span> main() => runApp(MyApp());

<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">StatelessWidget</span>{</span>
  <span class="hljs-meta">@override</span>
  Widget build(BuildContext context) {
    <span class="hljs-comment">// <span class="hljs-doctag">TODO:</span> implement build</span>
    <span class="hljs-keyword">return</span> MaterialApp(<span class="hljs-string">home:</span> DefaultTabController(
<span class="hljs-symbol">      length:</span> <span class="hljs-number">3</span>,
<span class="hljs-symbol">      child:</span> Scaffold(
<span class="hljs-symbol">        appBar:</span> AppBar(
<span class="hljs-symbol">          title:</span> Text(<span class="hljs-string">"CODESUNDAR"</span>),
<span class="hljs-symbol">          leading:</span> Icon(Icons.menu),
<span class="hljs-symbol">          backgroundColor:</span> Colors.teal[<span class="hljs-number">700</span>],
<span class="hljs-symbol">          actions:</span> <Widget>[
            IconButton(<span class="hljs-string">icon:</span> Icon(Icons.search), <span class="hljs-string">onPressed:</span> () => { }),
            IconButton(<span class="hljs-string">icon:</span> Icon(Icons.more_vert), <span class="hljs-string">onPressed:</span> () => { })
          ],
<span class="hljs-symbol">          bottom:</span> TabBar(
<span class="hljs-symbol">            indicatorColor:</span> Colors.yellow,
<span class="hljs-symbol">            tabs:</span> <Widget>[
              Tab(<span class="hljs-string">text:</span> <span class="hljs-string">"Chats"</span>, <span class="hljs-string">icon:</span>  Icon(Icons.chat)),
              Tab(<span class="hljs-string">text:</span> <span class="hljs-string">"Groups"</span>, <span class="hljs-string">icon:</span> Icon(Icons.group)),
              Tab(<span class="hljs-string">text:</span> <span class="hljs-string">"Settings"</span>, <span class="hljs-string">icon:</span> Icon(Icons.settings))
            ],
          ),
        ),
<span class="hljs-symbol">        body:</span> TabBarView(
<span class="hljs-symbol">          children:</span> <Widget>[
            Center(<span class="hljs-string">child:</span> Text(<span class="hljs-string">"Chat Tab"</span>)),
            Center(<span class="hljs-string">child:</span> Text(<span class="hljs-string">"Group Tab"</span>)),
            Center(<span class="hljs-string">child:</span> Text(<span class="hljs-string">"Settings Tab"</span>)),
          ],
        ),
      ),
    )
    );
  }
}

Flutter Tabs Example Explanation

• First, we have created a MaterialApp widget with DefaultTabController as home property
• In DefaultTabContoller Widget, we need to pass the number of Tabs, and children. In our case, we passed 3 (Chats, Group, Settings).
• Inside child, we created scaffold with AppBar.(If you’re not aware of AppBar, please read: Flutter AppBar Example ), where AppBar bottom property contains TabBar widget.
• TabBar Widget has tabs children as Tab() which requires icon and text
• After completing AppBar, now we need to pass TabBarView on MaterialApp body property.
• Since we created three Tabs, we need three child

If you’re facing any issue, feel free to comment below.

Download