TabBarView & TabBar Widgets

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. 
http://www.w3.org/2000/svg
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. 
http://www.w3.org/2000/svg
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. 
http://www.w3.org/2000/svg
 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.
http://www.w3.org/2000/svg
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.
http://www.w3.org/2000/svg
  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.
http://www.w3.org/2000/svg
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.
http://www.w3.org/2000/svg
 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
http://www.w3.org/2000/svg
 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.
http://www.w3.org/2000/svg
  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 . 
http://www.w3.org/2000/svg
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.
http://www.w3.org/2000/svg
  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.
http://www.w3.org/2000/svg
 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.
http://www.w3.org/2000/svg
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.
http://www.w3.org/2000/svg
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.
Before Start

Simple Use

Constructor

tabs

isScrollable

indicatorColor

indicator

label

Conclusion

Whole code in GitHub,star to support.

0 Comments

Recent Comments
