Flutter component--TabBar usage details (segmented controller)

Introduction to TabBar

One that displays a horizontal row of tabs Widget. Usually created as  part AppBar of  AppBar.bottom and  TabBarView used in conjunction with

When to use TabBar

When your app has many content categories, we often use it TabBar, such as NetEase News, JD.com, Station B, etc., so TabBar is a very frequently used component.

how to create

Step 1: Create TabController

In order to make the selected  tab and its corresponding content change synchronously, it needs to   be controlled by TabController . We can either create one manually  TabController , or use  the DefaultTabController  widget directly. The easiest option is to use  DefaultTabController a widget, since it creates a single TabController

DefaultTabController(
  // 选项卡的数量
  length: 3,
  child: // 在下一步完成此代码
);

Step 2: Create tabs

When we create DefaultTabController, then we can use  TabBar  widget to create tabs. The following one creates (one) a set of three  Tab  widgets  TabBarand places it inside  the AppBar  widget.

DefaultTabController(
  length: 3,
  child: Scaffold(
    appBar: AppBar(
      title: Text("TabBar"),
      bottom: TabBar(
        tabs: [
          Tab(icon: Icon(Icons.directions_bike),),
          Tab(icon: Icon(Icons.directions_boat),),
          Tab(icon: Icon(Icons.directions_car),),
        ],
      ),
    ),
  ),
);

Step 3: Create content for each Tab

Now that we have successfully created some tabs, the next thing to realize is to display the corresponding content when the tab is selected. To achieve this effect, we will use  the TabBarView  widget.

import 'package:flutter/material.dart';

class TabBarExample extends StatefulWidget {
  @override
  _TabBarExampleState createState() => _TabBarExampleState();
}

class _TabBarExampleState extends State<TabBarExample> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: Text("TabBar"),
          bottom: TabBar(
            tabs: [
              Tab(icon: Icon(Icons.directions_bike),),
              Tab(icon: Icon(Icons.directions_boat),),
              Tab(icon: Icon(Icons.directions_car),),
            ],
          ),
        ),
        body: TabBarView(
          children: [
            Icon(Icons.directions_bike),
            Icon(Icons.directions_boat),
            Icon(Icons.directions_car),
          ],
        ),
      ),
    );
  }
}

TabBar renderings

​​​​​​​

 

TabBar properties and description

serial number	field	Attributes	describe
1	tabs	List	Two or more tab lists
2	controller	TabController	The controller that controls the tab
3	isScrollable	bool	Whether the tab bar can be scrolled horizontally
4	indicatorColor	Color	Set the color of the selected tab indicator
5	automaticIndicatorColorAdjustment	bool	Whether to automatically adjust the indicatorColor
6	indicatorWeight	double	Set the thickness of the selected Tab indicator line
7	indicatorPadding	EdgeInsetsGeometry	Set the selected Tab indicator spacing, the default value is EdgeInsets.zero
8	indicator	Decoration	Set the appearance of the selected Tab indicator
9	indicatorSize	TabBarIndicatorSize	Set the size of the selected Tab indicator
10	labelColor	Color	Set the color of the selected Tab text
11	labelStyle	TextStyle	Set the style of the selected Tab text
12	labelPadding	EdgeInsetsGeometry	Set the spacing of the selected Tab text
13	unselectedLabelColor	Color	Set the color of the unselected Tab text
14	unselectedLabelStyle	TextStyle	Set the style of the unselected Tab text
15	dragStartBehavior	DragStartBehavior	How to handle the drag start behavior
16	overlayColor	MaterialStateProperty	Define responsive focus, hover and splash colors
17	mouseCursor	MouseCursor	The cursor when the mouse pointer enters or hovers over the mouse pointer
18	enableFeedback	bool	Whether detected gestures should provide sound and/or haptic feedback
19	onTap	ValueChanged	Callback when Tab is clicked
20	physics	ScrollPhysics	How the TabBar's scroll view responds to user input

TabBar property used in detail

1.tabs

Tab list consisting of two multiples

TabBar(
  tabs: [
    Tab(icon: Icon(Icons.directions_bike),),
    Tab(icon: Icon(Icons.directions_boat),),
    Tab(icon: Icon(Icons.directions_car),),
  ],
)

2.controller

A controller that can control tabs

TabController _tabController;

@override
void initState() {
  // TODO: implement initState
  super.initState();
  _tabController = TabController(length: 3, vsync: this);
}

TabBar(
  controller: _tabController,
  tabs: [
    Tab(icon: Icon(Icons.directions_bike),),
    Tab(icon: Icon(Icons.directions_boat),),
    Tab(icon: Icon(Icons.directions_car),),
  ],
)

3.isScrollable

Whether the tab bar can be scrolled horizontally

TabBar(
  isScrollable: false,
  tabs: [
    Tab(icon: Icon(Icons.directions_bike),),
    Tab(icon: Icon(Icons.directions_boat),),
    Tab(icon: Icon(Icons.directions_car),),
  ],
)

4.indicatorColor

Set the color of the selected tab indicator

TabBar(
  indicatorColor: Colors.red,
  tabs: [
    Tab(icon: Icon(Icons.directions_bike),),
    Tab(icon: Icon(Icons.directions_boat),),
    Tab(icon: Icon(Icons.directions_car),),
  ],
)

5.automaticIndicatorColorAdjustment

Whether to automatically adjust  indicatorColor, if  automaticIndicatorColorAdjustment it is true , then indicatorColor it will be automatically adjusted to Colors.white

TabBar(
  automaticIndicatorColorAdjustment: false,
  tabs: [
    Tab(icon: Icon(Icons.directions_bike),),
    Tab(icon: Icon(Icons.directions_boat),),
    Tab(icon: Icon(Icons.directions_car),),
  ],
)

6.indicatorWeight

Set the thickness of the selected Tab indicator line

TabBar(
  indicatorColor: Colors.red,
  indicatorWeight: 5,
  tabs: [
    Tab(icon: Icon(Icons.directions_bike),),
    Tab(icon: Icon(Icons.directions_boat),),
    Tab(icon: Icon(Icons.directions_car),),
  ],
)

7.indicatorPadding

Set the selected Tab indicator spacing, the default value is EdgeInsets.zero

TabBar(
  indicatorColor: Colors.red,
  indicatorWeight: 5,
  indicatorPadding: EdgeInsets.only(bottom: 2),
  tabs: [
    Tab(icon: Icon(Icons.directions_bike),),
    Tab(icon: Icon(Icons.directions_boat),),
    Tab(icon: Icon(Icons.directions_car),),
  ],
)

8.indicator

Set the appearance of the selected Tab indicator

TabBar(
  indicatorColor: Colors.red,
  indicatorWeight: 5,
  indicatorPadding: EdgeInsets.only(bottom: 2),
  indicator: BoxDecoration(
    gradient: LinearGradient(colors: [
      Colors.orange,
      Colors.green
    ]),
  ),
  tabs: [
    Tab(icon: Icon(Icons.directions_bike),),
    Tab(icon: Icon(Icons.directions_boat),),
    Tab(icon: Icon(Icons.directions_car),),
  ],
)

9.indicatorSize

Set the size of the selected Tab indicator, the value is an enumeration type, TabBarIndicatorSize.tab the following  Tab width, and the width of the TabBarIndicatorSize.label following  Tab content text.

TabBar(
  indicatorColor: Colors.red,
  indicatorSize: TabBarIndicatorSize.tab,
  tabs: [
    Tab(icon: Icon(Icons.directions_bike),),
    Tab(icon: Icon(Icons.directions_boat),),
    Tab(icon: Icon(Icons.directions_car),),
  ],
)

10.labelColor

Set the color of the selected Tab text

TabBar(
  indicatorColor: Colors.red,
  labelColor: Colors.pink,
  tabs: [
    Tab(icon: Icon(Icons.directions_bike),),
    Tab(icon: Icon(Icons.directions_boat),),
    Tab(icon: Icon(Icons.directions_car),),
  ],
)

11.labelStyle

Set the style of the selected Tab text

TabBar(
  labelStyle: TextStyle(
    backgroundColor: Colors.green,
    fontSize: 20
  ),
  tabs: [
    Tab(icon: Icon(Icons.directions_bike), text: "单车",),
    Tab(icon: Icon(Icons.directions_boat), text: "轮船",),
    Tab(icon: Icon(Icons.directions_car), text: "汽车",),
  ],
)

12.labelPadding

Set the spacing of the selected Tab content

TabBar(
  labelStyle: TextStyle(
    backgroundColor: Colors.green,
    fontSize: 20
  ),
  labelPadding: EdgeInsets.all(0),
  tabs: [
    Tab(icon: Icon(Icons.directions_bike), text: "单车",),
    Tab(icon: Icon(Icons.directions_boat), text: "轮船",),
    Tab(icon: Icon(Icons.directions_car), text: "汽车",),
  ],
)

13.unselectedLabelColor

Set the color of the unselected Tab text

TabBar(
	unselectedLabelColor: Colors.orange,
  tabs: [
    Tab(icon: Icon(Icons.directions_bike), text: "单车",),
    Tab(icon: Icon(Icons.directions_boat), text: "轮船",),
    Tab(icon: Icon(Icons.directions_car), text: "汽车",),
  ],
)

14.unselectedLabelStyle

Set the style of the unselected Tab text

TabBar(
	unselectedLabelColor: Colors.orange,
  unselectedLabelStyle: TextStyle(
    backgroundColor: Colors.pink
  ),
  tabs: [
    Tab(icon: Icon(Icons.directions_bike), text: "单车",),
    Tab(icon: Icon(Icons.directions_boat), text: "轮船",),
    Tab(icon: Icon(Icons.directions_car), text: "汽车",),
  ],
)

15.dragStartBehavior

How to handle the drag start behavior

TabBar(
	unselectedLabelColor: Colors.orange,
  unselectedLabelStyle: TextStyle(
    backgroundColor: Colors.pink
  ),
  dragStartBehavior: DragStartBehavior.start,
  tabs: [
    Tab(icon: Icon(Icons.directions_bike), text: "单车",),
    Tab(icon: Icon(Icons.directions_boat), text: "轮船",),
    Tab(icon: Icon(Icons.directions_car), text: "汽车",),
  ],
)

16.overlayColor

Define responsive focus, hover and splash colors.

17.mouseCursor

The cursor when the mouse pointer enters or hovers over the mouse pointer, for  Flutter web applications

TabBar(
	unselectedLabelColor: Colors.orange,
  unselectedLabelStyle: TextStyle(
    backgroundColor: Colors.pink
  ),
  mouseCursor: SystemMouseCursors.allScroll,
  tabs: [
    Tab(icon: Icon(Icons.directions_bike), text: "单车",),
    Tab(icon: Icon(Icons.directions_boat), text: "轮船",),
    Tab(icon: Icon(Icons.directions_car), text: "汽车",),
  ],
)

18.enableFeedback

Whether detected gestures should provide sound and/or haptic feedback, default is true

TabBar(
  enableFeedback: true,
  tabs: [
    Tab(icon: Icon(Icons.directions_bike), text: "单车",),
    Tab(icon: Icon(Icons.directions_boat), text: "轮船",),
    Tab(icon: Icon(Icons.directions_car), text: "汽车",),
  ],
)

19.onTap

Callback when Tab is clicked

TabBar(
  enableFeedback: true,
  onTap: (index) {
    print(index);
  },
  tabs: [
    Tab(icon: Icon(Icons.directions_bike), text: "单车",),
    Tab(icon: Icon(Icons.directions_boat), text: "轮船",),
    Tab(icon: Icon(Icons.directions_car), text: "汽车",),
  ],
)

20.physics

How the TabBar's scroll view responds to user input,

For example, determines how the scroll view continues to animate after the user stops dragging the scroll view

TabBar(
  physics: NeverScrollableScrollPhysics(),
  tabs: [
    Tab(icon: Icon(Icons.directions_bike), text: "单车",),
    Tab(icon: Icon(Icons.directions_boat), text: "轮船",),
    Tab(icon: Icon(Icons.directions_car), text: "汽车",),
  ],
)