AppDividend
Latest Code Tutorials

Flutter Tabs Tutorial | Working with Tabs Example

3

Flutter Tabs Tutorial | Working with Tabs Example is today’s topic. 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 which contains a tab bar with two screens.

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

Flutter Tabs Tutorial With Example

Content Overview

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, then check out this article.

After that, if you do not know how to write a widget in the flutter, then 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 have two screens. So when the user clicks on one of the icons, it will display the associated the 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.

 

Flutter Tabs Tutorial | Working with Tabs Example

Above app is the basic Flutter Tabs Example, but you understand how we can build a Tab based layout in Flutter Application. Finally, Flutter Tabs Tutorial | Working with Tabs Example is over.

3 Comments
  1. Abhijeet says

    Hi, I am new to flutter. I am trying to use TabBar but I am running into the error of “Bottom Overflowed by Infinity Pixels”. I am trying to create a screen which has some content on the top and then the tabs. Following description of my screen might be helpful.-
    Tata Motors Rs 220
    Tab1 Tab2 Tab3

    But it is only showing the first line and nothing else. On the extreme bottom it shows the yellow and black strips and the message “Bottom Overflowed by Infinity Pixels”. Please help how I can solve this problem.

  2. Guillaume says

    there is an error in your code :

    import ‘./pages/FirstScreen.dart’;
    import ‘./pages/SecondScreen.dart’;

    should be :
    import ‘./screens/FirstScreen.dart’;
    import ‘./screens/SecondScreen.dart’;

    Since your said : “Inside the lib folder, create one folder called screens and inside that create two files.”

    1. asifMojtoba says

      Yesss! I was really struggling with this one when I tried it for the first time!

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.