Flutter Tabs: How to Use Tabs in Flutter Tutorial with Example

Working with tabs is a typical pattern in Android and iOS apps following the Material Design guidelines. 

Flutter includes a very convenient way to create tab layouts. For tabs to work, we will need to keep the selected tab and content sections in sync. It is the job of the TabController.  Our example app has a screen that contains a tab bar with two screens.

To add Tabs to the app, I needed to create TabBar and TabBarView and attach TabController to them. Then, TabController will sync TabBar with TabBarView so we can have the behavior we wanted.

Flutter Tabs

Using the DefaultTabController is the simplest option since it will create the TabController for us and make it available to all descendant Widgets. The syntax of DefaultTabController is following.

DefaultTabController(
  // The number of tabs / content sections we need to display
  length: 3,
  child: // See the next step!
);

Step 1: Install the Flutter App.

If you are new to flutter and do not know how to install flutter on the mac, check out this article.

After that, if you do not know how to write a widget in the flutter, please go to this link.

Step 2: Create two screens.

Inside the lib folder, create one folder called screens, and inside that, create two files.

1. FirstScreen.dart
2. SecondScreen.dart

Write the following code inside the FirstScreen.dart.

// FirstScreen.dart

import 'package:flutter/material.dart';

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Text('Tab 1 Layout'),
      ),
    );
  }
}

In the above code, we have just added one centered text.

When the user clicks on the first tab button, we will see this screen.

Write the following code inside the SecondScreen.dart.

// SecondScreen.dart

import 'package:flutter/material.dart';

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Text('Tab 2 Layout'),
      ),
    );
  }
}

This is the second tab layout. So we have created the two tab layouts for our application.

Now, the remaining thing is to create a DefaultTabController. 

Step 3: Create a DefaultTabController

Write the following code inside the main.dart file.

// main.dart

import 'package:flutter/material.dart';

import './pages/FirstScreen.dart';
import './pages/SecondScreen.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 2,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.directions_car)),
                Tab(icon: Icon(Icons.directions_transit))
              ],
            ),
            title: Text('Flutter Tabs Example'),
          ),
          body: TabBarView(
            children: [
              FirstScreen(),
              SecondScreen(),
            ],
          ),
        ),
      ),
    );
  }
}

In the above code, we have imported two screens which are created earlier in this article.

Our application has only two tabs. So, we have assigned a length to two.

Then, we have taken the TabBar and assigned two tab icons.

Now, let’s define the TabBarView, which has two screens. So when the user clicks on one of the icons, it will display the associated Screens.

Save the file and go to the terminal and type the following command. Please make sure that both iOS and Android Simulators are open. We will check the output on both the Virtual Devices.

flutter run -d all

See the output below.

The above app is the basic Flutter Tabs Example, but you understand how we can build a Tab-based layout in Flutter Application. 

That’s it for this tutorial.