Flutter Widgets 12 | TabBarView&TabBar
In this article, you will learn how to use the TabBarView and TabBar in the flutter.
Before Start
As these fore tutorials, we should create a page to show our code, I will do this in this tutorial as well.
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.
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.
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.
The icon,child are all widgets, the text is a string. Let's use them to see the effect.
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.
isScrollable
When you want to put more tab here, the place maybe not enough, so you can set isScrollable =trueto scroll the tab.
And use it in the TabBaras below
indicatorColor
This will control the indicator line as we show above. Let’s look at its effect.
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.
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.
It will show like the normal indicator line.
We can also use the ShapeDecoration.
label
I will use many parameters in the example, let’s look at the code as follows.
It will show you as below.
if you click the tab, it will print the contents as follows.
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.
The whole code in Github: https://github.com/FlutterOpen/ebook
