Flutter – TabView Widget

There are lots of apps where you often have come across tabs. Tabs are a common pattern in the apps. They are situated at top of the app below the App bar. So today we are going to create our own app with tabs.

Table of Contents:

• Project Setup
• Code
• Conclusion

Project Setup:

You can either create a new project or a new file in your existing project. 

We don’t need any other dependencies.

Code:

We need a TabController to control the tabs of our app. Here in this tutorial, we are going to use DefaultTabController because it is the simplest and accessible to all the descendants. 

DefaultTabController is used as the home of MaterialApp. 

So in the main.dart file:

Dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TabView Tutorial GFG',
      theme: ThemeData(

        primarySwatch: Colors.green,
      ),
      home: HomePage(),
    );
  }
}
class HomePage extends StatelessWidget {
  const HomePage({ Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: length,
      child: child,
    );
  }
}

So as you can see we need to provide two fields, one is the length and the other is a child. These are required fields.

1. length: Number of tabs
2. child: The widget you want to display

Now I want 3 tabs so I am providing length with 3. Also, the child will be obviously Scaffold because it is necessary.

Dart

DefaultTabController(
  length: 3,
  child: Scaffold(
    appBar: AppBar(
      title: Text("GeeksForGeeks"),
      bottom: TabBar(
        tabs: [],
      ),
    ),
    body: TabBarView(
      children: [],
    ),
  ),
);

Here you can see two new widgets, TabBar and TabBarView.

• TabBar: It is used to display the top view of tabs or more specifically it displays the content of the tab.
• TabBarView: It is used to display the contents when a tab is pressed.

So we will display Icons in the TabBar. 

Note: Here you should display 3 tabs or else you will get an error.

Dart

TabBar(
  tabs: [
    Tab(
      icon: Icon(Icons.home_filled),
      text: "Home",
    ),
    Tab(
      icon: Icon(Icons.account_box_outlined),
      text: "Account",
    ),
    Tab(
      icon: Icon(Icons.alarm),
      text: "Alarm",
    ),
  ],
),

Inside the TabBarView widget, we need three children widgets, and they can be anything.

So I will display just Icons for the simplicity of the tutorial.

Dart

TabBarView(
  children: [
    Center(
      child: Icon(Icons.home),
    ),
    Center(
      child: Icon(Icons.account_circle),
    ),
    Center(
      child: Icon(Icons.alarm),
    )
  ],
),

Now run the App.

TabBarView app

Now if you have lots of tabs, like 5 or 6 we can use the isScrollable field in the TabView. If it is false, it shrinks all the tabs within the screen and if it is true it makes scrollable Tabs.

You can change the length to 6 and duplicate all the tabs under TabBar and TabBarView.

Dart

DefaultTabController(
  length: 6,
  child: Scaffold(
    appBar: AppBar(
      title: Text("GeeksForGeeks"),
      bottom: TabBar(
        isScrollable: true,
        tabs: [
          Tab(
            icon: Icon(Icons.home_filled),
            text: "Home",
          ),
          Tab(
            icon: Icon(Icons.account_box_outlined),
            text: "Account",
          ),
          Tab(
            icon: Icon(Icons.alarm),
            text: "Alarm",
          ),
          Tab(
            icon: Icon(Icons.home_filled),
            text: "Home",
          ),
          Tab(
            icon: Icon(Icons.account_box_outlined),
            text: "Account",
          ),
          Tab(
            icon: Icon(Icons.alarm),
            text: "Alarm",
          ),
        ],
      ),
    ),
    body: TabBarView(
      children: [
        Center(
          child: Icon(Icons.home),
        ),
        Center(
          child: Icon(Icons.account_circle),
        ),
        Center(
          child: Icon(Icons.alarm),
        ),
        Center(
          child: Icon(Icons.home),
        ),
        Center(
          child: Icon(Icons.account_circle),
        ),
        Center(
          child: Icon(Icons.alarm),
        )
      ],
    ),
  ),
);

Now run the app again.

More tabs TabView App

Now clear the duplicate code. Here is the full code.

Dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TabView Tutorial GFG',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: Text("GeeksForGeeks"),
          bottom: TabBar(
            tabs: [
              Tab(
                icon: Icon(Icons.home_filled),
                text: "Home",
              ),
              Tab(
                icon: Icon(Icons.account_box_outlined),
                text: "Account",
              ),
              Tab(
                icon: Icon(Icons.alarm),
                text: "Alarm",
              ),
            ],
          ),
        ),
        body: TabBarView(
          children: [
            Center(
              child: Icon(Icons.home),
            ),
            Center(
              child: Icon(Icons.account_circle),
            ),
            Center(
              child: Icon(Icons.alarm),
            )
          ],
        ),
      ),
    );
  }
}

Conclusion

So we learned a new widget TabView and we created a very basic app. But we can make beautiful apps with this very simple and easy widget. It comes with all the necessary animations and snapping which makes settings up very easily an app with tabs. If you have any doubts comment below.