# Widgets 12 | TabBarView\&TabBar

![result](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LX7c9pv4z2GirBwl_fd%2F-LX7cCw_FifqXRhtp5jJ%2Ftab-bar-view-10.png?alt=media\&token=632ee197-3293-436f-9998-aeec7c490e03)

## Before Start

As these fore tutorials, we should create a page to show our code, I will do this in this tutorial as well. 

```dart
import "package:flutter/material.dart";
import 'package:flutter_widgets/const/_const.dart';

class TabBarViewPage extends StatefulWidget {
  @override
  _TabBarViewState createState() => _TabBarViewState();
}

class _TabBarViewState extends State<TabBarViewPage>
    with SingleTickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(PageName.TAB_VIEW),
      ),
      body: Text("Body"),
    );
  }
}
```

It will show a simple page with a title.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LX3dUJDIAojPI-fBFXT%2F-LX3gE9RhWJ81U37sj--%2Ftab-bar-view-01.png?alt=media\&token=abd1eebd-a302-46b1-bd2f-a8028388e66d)

## Simple Use

So, in this step, I will replace the `body` to implement our effect with the `DefaultTabController`. It will contain the `TabBarView` and the `TabBar`.&#x20;

```dart
body: DefaultTabController(
        length: 3,
        child: Column(
          children: <Widget>[
            Container(
              constraints: BoxConstraints.expand(height: 50),
              child: TabBar(tabs: [
                Tab(text: "Home"),
                Tab(text: "Articles"),
                Tab(text: "User"),
              ]),
            ),
            Expanded(
              child: Container(
                child: TabBarView(children: [
                  Container(
                    child: Text("Home Body"),
                  ),
                  Container(
                    child: Text("Articles Body"),
                  ),
                  Container(
                    child: Text("User Body"),
                  ),
                ]),
              ),
            )
          ],
        ),
      ),
```

It will show you as below, you can click the tab on the top or scroll to change the content. The top part is the `TabBar`,  the bottom part is the `TabBarView`. You should know, the order and the location aren't mattered between `TabBar` and `TabBarView`, but they should be in the vertical direction.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LX3dUJDIAojPI-fBFXT%2F-LX3nEj88y0jlu0kLiGm%2Ftab-bar-view-02.png?alt=media\&token=2c25d129-dd0d-4f7c-8b0a-9c9e4906973a)

## Constructor

You can see the code in this example, the three important class are `DefaultTabController`, `TabBar`,`TabBarView`. The `TabBar` is a bit difficult for us. So let's look at it.&#x20;

```dart
 TabBar({
    Key key,
    @required this.tabs,
    this.controller,
    this.isScrollable = false,
    this.indicatorColor,
    this.indicatorWeight = 2.0,
    this.indicatorPadding = EdgeInsets.zero,
    this.indicator,
    this.indicatorSize,
    this.labelColor,
    this.labelStyle,
    this.labelPadding,
    this.unselectedLabelColor,
    this.unselectedLabelStyle,
    this.onTap,
  })
```

So I will talk about these parameters to you.

## tabs

This is widget list,but usually, we put `Tab` list here, Let's look at the constructor of the `Tab`.

```dart
Tab({
    Key key,
    this.text,
    this.icon,
    this.child,
  })
```

The `icon`,`child` are all widgets, the text is a string. Let's use them to see the effect.

```dart
  List<Widget> _tabTwoParameters() => [
        Tab(
          text: "Home",
          icon: Icon(Icons.home),
        ),
        Tab(text: "Articles", icon: Icon(Icons.book)),
        Tab(
          text: "User",
          icon: Icon(Icons.account_box),
        ),
      ];
```

We just use the text and the icon, it will show you like below.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LX74Aqdubr23dBJjMTw%2F-LX7BuAww4xX8UHAt6Sb%2Ftab-bar-view-03.png?alt=media\&token=538282da-eb70-4efe-99a0-d9fadc1473e1)

But you should care about that  you either use `child` or `text,icon`, you can't use both of them. Let's use the `child`.

```dart
List<Widget> _tabChildParameters() => [
        Tab(
          child: Container(
            alignment: Alignment.center,
            constraints: BoxConstraints.expand(),
            color: YELLOW,
            child: Text("Home"),
          ),
        ),
        Tab(
          child: Container(
            alignment: Alignment.center,
            constraints: BoxConstraints.expand(),
            color: BLUE_DEEP,
            child: Text("Articles"),
          ),
        ),
        Tab(
          child: Container(
            alignment: Alignment.center,
            constraints: BoxConstraints.expand(),
            color: BLUE,
            child: Text("User"),
          ),
        ),
      ];
```

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LX74Aqdubr23dBJjMTw%2F-LX7DIj8Cigu2Om7hrpE%2Ftab-bar-view-04.png?alt=media\&token=09e53b08-e6f2-4e73-b82f-25dfd23b7697)

## isScrollable

When you want to put more tab here, the place maybe not enough, so you can set `isScrollable =true`to scroll the tab.

```dart
 List<Widget> _tabScroll() => [
        Tab(
          child: Container(
            alignment: Alignment.center,
            constraints: BoxConstraints.expand(width: 100),
            color: YELLOW,
            child: Text("Home"),
          ),
        ),
        Tab(
          child: Container(
            alignment: Alignment.center,
            constraints: BoxConstraints.expand(width: 100),
            color: BLUE_DEEP,
            child: Text("Articles"),
          ),
        ),
        Tab(
          child: Container(
            alignment: Alignment.center,
            constraints: BoxConstraints.expand(width: 100),
            color: BLUE,
            child: Text("User"),
          ),
        ),
        Tab(
          child: Container(
            alignment: Alignment.center,
            constraints: BoxConstraints.expand(width: 100),
            color: GREEN,
            child: Text("Add"),
          ),
        ),
        Tab(
          child: Container(
            alignment: Alignment.center,
            constraints: BoxConstraints.expand(width: 100),
            color: BLUE_LIGHT,
            child: Text("Post"),
          ),
        ),
        Tab(
          child: Container(
            alignment: Alignment.center,
            constraints: BoxConstraints.expand(width: 100),
            color: PURPLE,
            child: Text("Comments"),
          ),
        ),
      ];
```

And use it in the `TabBar`as below

```dart
 child: TabBar(isScrollable: true, tabs: _tabScroll()),
```

Then, it will show as follows.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LX74Aqdubr23dBJjMTw%2F-LX7FWgEckC0ueq2yeuG%2Fscrollable.gif?alt=media\&token=1fca75a7-ea55-4ccd-8652-fe3b8eba0468)

## indicatorColor

This will control the indicator line as we show above. Let's look at its effect.

```dart
  TabBar _tabBarIndicatorColor() => TabBar(
        tabs: _tabTwoParameters(),
        indicatorColor: BLUE,
        indicatorWeight: 10,
        indicatorSize: TabBarIndicatorSize.label,
      );
```

It will show the picture as below, you should know the `indicatorColor` set the color of the bottom line, the `indicatorWeight` set the height of the line, the `indicatorSize` set the type of the line.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LX74Aqdubr23dBJjMTw%2F-LX7Iikkup7xaCddLTJ6%2Ftab-bar-view-05.png?alt=media\&token=196ce503-9923-44dd-88e0-179065670014)

If we use the `indicatorPadding`, it will show as follows .&#x20;

```dart
TabBar _tabBarIndicatorColor() => TabBar(
        tabs: _tabTwoParameters(),
        indicatorColor: BLUE,
        indicatorWeight: 10,
        indicatorSize: TabBarIndicatorSize.label,
        indicatorPadding: EdgeInsets.symmetric(horizontal: 10),
      );
```

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LX74Aqdubr23dBJjMTw%2F-LX7Pyks3FFMD5b_5lgf%2Ftab-bar-view-05-02.png?alt=media\&token=9dcf9a3f-4e41-436f-b8c3-0791a1b1da0e)

## indicator&#x20;

When we see the definition of the indicator, we can see that it is a `Decoration`. It has three main subclasses we can use.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LX74Aqdubr23dBJjMTw%2F-LX7KLbumOCQYIMSHFPY%2Ftab-bar-view-06.png?alt=media\&token=6edc7229-76e7-4ffd-884f-5afc1fd12484)

So let's add an example with the last one.

```dart
  TabBar _tabBarIndicatorUnder() => TabBar(
        tabs: _tabTwoParameters(),
        indicator: UnderlineTabIndicator(
          borderSide: BorderSide(color: PURPLE, width: 4),
          insets: EdgeInsets.symmetric(horizontal: 20),
        ),
      );
```

It will show like the normal indicator line.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LX74Aqdubr23dBJjMTw%2F-LX7LJBpcjz9T5PXf8Li%2Ftab-bar-view-07.png?alt=media\&token=2f5f68e4-900e-4399-b1ea-eb0ea92515ec)

We can also use the `ShapeDecoration`.

```dart
 TabBar _tabBarIndicatorShape() => TabBar(
        tabs: _tabTwoParameters(),
        indicator: ShapeDecoration(
          shape: BeveledRectangleBorder(
              side: BorderSide(color: TEXT_BLACK),
              borderRadius: BorderRadius.circular(30)),
          gradient: SweepGradient(
            colors: [YELLOW, PURPLE, RED, GREEN, BLUE],
          ),
        ),
      );
```

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LX74Aqdubr23dBJjMTw%2F-LX7NnYfOQSC9sBhkrk3%2Ftab-bar-view-08.png?alt=media\&token=5694025a-404a-443e-81e0-f97b7bc4add4)

## label

I will use many parameters in the example, let's look at the code as follows.

```dart
TabBar _tabBarLabel() => TabBar(
        tabs: _tabTwoParameters(),
        labelColor: RED,
        labelPadding: EdgeInsets.symmetric(vertical: 10),
        labelStyle: TextStyle(fontSize: 20),
        unselectedLabelColor: BLUE_LIGHT,
        unselectedLabelStyle: TextStyle(fontSize: 14),
        onTap: (index) {
          var content = "";
          switch (index) {
            case 0:
              content = "Home";
              break;
            case 1:
              content = "Articles";
              break;
            case 2:
              content = "User";
              break;
            default:
              content = "Other";
              break;
          }
          print("You are clicking the $content");
        },
      );
```

It will show you as below.

![](https://3262132263-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW5X4rCYpodwj4P1c8s%2F-LX74Aqdubr23dBJjMTw%2F-LX7S5VIwOwpsUjxmoWU%2Ftab-bar-view-09.png?alt=media\&token=9c0f0557-2c95-4c09-897b-105fafce25e1)

if you click the tab, it will print the contents as follows.

```dart
I/flutter ( 4741): You are clicking the User
I/flutter ( 4741): You are clicking the Articles
I/flutter ( 4741): You are clicking the Home
```

## Conclusion

So far, we have learned our `TabBarView` and `TabBar`. There are so many custom indicators here that you can choose. The most important thing you should care is that some parameters aren't used at the same time.

Thanks for your reading!

The end.

#### Whole code in [GitHub](https://github.com/FlutterOpen/flutter-widgets-examples),star to support. <a href="#whole-code-in-github-star-to-support" id="whole-code-in-github-star-to-support"></a>

| Facebook Page                                         | Twitter                                 | GitHub                             | Medium                                        |
| ----------------------------------------------------- | --------------------------------------- | ---------------------------------- | --------------------------------------------- |
| [Flutter Open ](https://www.facebook.com/flutteropen) | [NieBin](https://twitter.com/niebin_gg) | [NieBin](https://github.com/nb312) | [FlutterOpen](https://medium.com/flutteropen) |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://flutteropen.gitbook.io/flutter-widgets/flutter-widgets-12-flutter-tabbarview-and-flutter-tabbar.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.