Widgets 12 | TabBarView&TabBar

In this article, you will learn how to use the TabBarView and TabBar in the flutter.

result

Before Start

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

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.

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.

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.

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.

 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.

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.

  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.

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.

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"),
          ),
        ),
      ];

isScrollable

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

 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 TabBaras below

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

Then, it will show as follows.

indicatorColor

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

  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.

If we use the indicatorPadding, it will show as follows .

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

indicator

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

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

  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.

We can also use the ShapeDecoration.

 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],
          ),
        ),
      );

label

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

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.

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

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,star to support.

Facebook Page	Twitter	GitHub	Medium
Flutter Open	NieBin	NieBin	FlutterOpen