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.

Things to Remember:

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

Let’s code (lib/main.dart)

Flutter TabBar Example code

import 'package:flutter/material.dart';

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

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

Flutter Tabs Example Explanation

• First we have created a MaterialApp widget with DefaultTabController as home property
• In DefaultTabContoller Widget, we need to pass number of Tabs, and child. 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 propery 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.

About the author: Hey! It's me sundar. (Yea, I'm the founder of codesundar.com). I'm a passionate computer programmer who loves modern web and mobile development. feel free to reach me : Facebook - Twitter - Google+