Creating Tabs In Flutter

In this tutorial, you will learn how to create “Tabs” or “Tab Bar” in Flutter. For this purpose we will follow the next steps:

  1. Create a new Flutter app,
  2. Create the Tab Controller,
  3. Create the Tabs Content.

1. Create a New Flutter Project

Go ahead and create a new Flutter app. If you don’t know how to create a project you can refer to the “Hello World App in Flutter” tutorial. Once you have the app created delete all the comments and content until you have only the following code left:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: HomeScreen(),
  ));
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() {
    return _HomeScreenState();
  }
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text('Home Screen'),
          backgroundColor: Colors.teal,
        ),
        body: Center(),
      ),
    );
  }
}

The output will look like this:

Next, we will work on the Tab Controller.

2. Create a TabController and Tabs

What is TabController? TabController is a built-in widget in Flutter that coordinates the tab selection between the TabBar(which is the navigation) and the TabBarView(which is where we display the tab content). Creating the TabController couldn’t be easier. In your app on the HomeScreen widget simply wrap the Scaffold widget with DefaultTabController widget like in the example below:

child: DefaultTabController(
  length: 3,
  child: Scaffold(
    appBar: AppBar(
      title: Text('Home Screen'),
      backgroundColor: Colors.teal,
    ),
    body: Center(

    ),
  ),
),

As you can see I just wrapped the Scaffold and specified the length of the TabController. The length is to specify how many tabs you will use in the app. To display the tabs you simply go to the AppBar widget, and add the following:

bottom: TabBar(
  tabs: [
    Icon(Icons.home),
    Icon(Icons.info_outline),
    Icon(Icons.settings),
  ],
  indicatorColor: Colors.white,
),

AppBar has a property bottom which we use to display the TabBar that contains the Tabs we will be using. Here is the output:

As you can see the tabs are under the title of the AppBar and you can press each one of them. For now, it will not display anything. We will add the content in the next step.

3. Create the Tabs content

In order to display the content of the Tabs, we need to use the TabBarView widget. We need to use it in the body of the Scaffold. The TabBarView needs to have the exact number of children widgets as the TabController length, otherwise, it will not compile and will not render a view. Here is our example:

body: TabBarView(
  children: [
    Icon(Icons.home),
    Icon(Icons.info_outline),
    Icon(Icons.settings),
  ],
),

As you can see we used three children for the TabBarView and they will all be the same Icon widgets that we used in the TabBar. Every time we press a tab the view will change. Here is the output of the code:

       

The content can be any widget that your app requires.

I hope this Flutter tutorial was helpful for you. If you are interested in learning Flutter, please check other Flutter tutorials on this site. Some of them have video tutorials included.

Happy learning Flutter!


Leave a Reply

Your email address will not be published. Required fields are marked *

Free Video Lessons

Enter your email and stay on top of things,

Subscribe!