TabBar is introduced

A Widget that displays horizontal row tabs. The appbar.bottom section is typically created as AppBar and used in conjunction with TabBarView

When is TabBar used

TabBar is often used when you have multiple content categories in your app, such as netease News, JINGdong, B station, etc. Therefore, TabBar is a frequently used component.

The sample code

Many of the effects in this article are not screenshots. Download the source code to run the project source code address, or view the video tutorial address through the video tutorial

How to use

Step 1: Create a TabController

In order for the selected TAB to change in sync with its corresponding content, you need to control it with a TabController. We can either create a TabController manually or use the DefaultTabController widget directly. The easiest option is to use the DefaultTabController widget, because it creates a TabController that can be used by all child widgets.

DefaultTabController(
  // The number of tabs
  length: 3,
  child: // Complete this code in the next step
);
Copy the code

Step 2: Create tabs

When we create DefaultTabController, we can then use the TabBar Widget to create tabs. The following one creates a TabBar (one) that contains three sets of Tab widgets and places it in 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),),
        ],
      ),
    ),
  ),
);
Copy the code

By default, TabBar will look up the nearest DefaultTabController node in the Widget tree as its TabController. If you want to create a TabController manually, you must pass it as a parameter to the TabBar.

Step 3: Create content for each Tab

Now that we have successfully created some tabs, what we need to implement is to display the TAB when it 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), ], ), ), ); }}Copy the code

From this small example we have a brief experience of how TabBar is used in conjunction with TabBarView.

Effect of the DEMO

TabBar properties and description

There are 20 attributes in total

field attribute describe
tabs List Two more than one Tab list
controller TabController The controller that controls TAB
isScrollable bool Whether the TAB bar can be scrolled horizontally
indicatorColor Color Sets the color of the selected Tab indicator
automaticIndicatorColorAdjustment bool Whether to automatically adjust indicatorColor
indicatorWeight double Sets the width of the selected Tab indicator line
indicatorPadding EdgeInsetsGeometry Set selected Tab indicator spacing. Default is edgeinsets.zero
indicator Decoration Sets the appearance of the selected Tab indicator
indicatorSize TabBarIndicatorSize Sets the size of the selected Tab indicator
labelColor Color Sets the color of the Tab text selected
labelStyle TextStyle Sets the style of the selected Tab text
labelPadding EdgeInsetsGeometry Sets the spacing of selected Tab text
unselectedLabelColor Color Sets the color of the unchecked Tab text
unselectedLabelStyle TextStyle Sets the style of the unchecked Tab text
dragStartBehavior DragStartBehavior Handles the way a drag starts
overlayColor MaterialStateProperty Define response focus, hover, and splash colors
mouseCursor MouseCursor Mouse pointer The cursor that enters or hovers over the mouse pointer
enableFeedback bool Whether detected gestures should provide audible and/or tactile feedback
onTap ValueChanged The callback when Tab is clicked
physics ScrollPhysics How does TabBar’s scroll view respond to user input

The TabBar property is used in detail

1, the tabs

A list of two or more tabs

Method of use

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

2, the controller

The controller that controls the TAB

Method of use

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

Copy the code

3, isScrollable

Whether the TAB bar can be scrolled horizontally

Method of use

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

4, indicatorColor

Sets the color of the selected Tab indicator

Method of use

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

5, automaticIndicatorColorAdjustment

If the automaticIndicatorColorAdjustment automatically adjust indicatorColor, if is true, then indicatorColor is automatically adjusted to Colors. The white

Method of use

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

6, indicatorWeight

Sets the width of the selected Tab indicator line

Method of use

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),),
  ],
)
Copy the code

7, indicatorPadding

Set selected Tab indicator spacing. Default is edgeinsets.zero

Method of use

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),),
  ],
)
Copy the code

8 indicator.

Sets the appearance of the selected Tab indicator

Method of use

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),),
  ],
)
Copy the code

9 indicatorSize.

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

Method of use

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),),
  ],
)
Copy the code

10, labelColor

Sets the color of the Tab text selected

Method of use

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),),
  ],
)
Copy the code

11, labelStyle

Sets the style of the selected Tab text

Method of use

TabBar(
  labelStyle: TextStyle(
    backgroundColor: Colors.green,
    fontSize: 20
  ),
  tabs: [
    Tab(icon: Icon(Icons.directions_bike), text: "Bike",),
    Tab(icon: Icon(Icons.directions_boat), text: "Ship",),
    Tab(icon: Icon(Icons.directions_car), text: "Car",),,)Copy the code

12, labelPadding

Set the spacing of selected Tab contents

Method of use

TabBar(
  labelStyle: TextStyle(
    backgroundColor: Colors.green,
    fontSize: 20
  ),
  labelPadding: EdgeInsets.all(0),
  tabs: [
    Tab(icon: Icon(Icons.directions_bike), text: "Bike",),
    Tab(icon: Icon(Icons.directions_boat), text: "Ship",),
    Tab(icon: Icon(Icons.directions_car), text: "Car",),,)Copy the code

13, unselectedLabelColor

Sets the color of the unchecked Tab text

Method of use

TabBar(
	unselectedLabelColor: Colors.orange,
  tabs: [
    Tab(icon: Icon(Icons.directions_bike), text: "Bike",),
    Tab(icon: Icon(Icons.directions_boat), text: "Ship",),
    Tab(icon: Icon(Icons.directions_car), text: "Car",),,)Copy the code

14, unselectedLabelStyle

Sets the style of the unchecked Tab text

Method of use

TabBar(
	unselectedLabelColor: Colors.orange,
  unselectedLabelStyle: TextStyle(
    backgroundColor: Colors.pink
  ),
  tabs: [
    Tab(icon: Icon(Icons.directions_bike), text: "Bike",),
    Tab(icon: Icon(Icons.directions_boat), text: "Ship",),
    Tab(icon: Icon(Icons.directions_car), text: "Car",),,)Copy the code

15, dragStartBehavior

Handles the way a drag starts

Method of use

TabBar(
	unselectedLabelColor: Colors.orange,
  unselectedLabelStyle: TextStyle(
    backgroundColor: Colors.pink
  ),
  dragStartBehavior: DragStartBehavior.start,
  tabs: [
    Tab(icon: Icon(Icons.directions_bike), text: "Bike",),
    Tab(icon: Icon(Icons.directions_boat), text: "Ship",),
    Tab(icon: Icon(Icons.directions_car), text: "Car",),,)Copy the code

16, overlayColor

Define response focus, hover, and splash colors.

If it is not empty, it is resolved using one of materialstate.focused, materialState.hovered, and materialState.pressed.

17, mouseCursor

The cursor that enters or hovers over the mouse pointer for the Flutter Web application.

Method of use

TabBar(
	unselectedLabelColor: Colors.orange,
  unselectedLabelStyle: TextStyle(
    backgroundColor: Colors.pink
  ),
  mouseCursor: SystemMouseCursors.allScroll,
  tabs: [
    Tab(icon: Icon(Icons.directions_bike), text: "Bike",),
    Tab(icon: Icon(Icons.directions_boat), text: "Ship",),
    Tab(icon: Icon(Icons.directions_car), text: "Car",),,)Copy the code

In the 18th and enableFeedback

Whether detected gestures should provide audible and/or haptic feedback defaults to true

Method of use

TabBar(
  enableFeedback: true,
  tabs: [
    Tab(icon: Icon(Icons.directions_bike), text: "Bike",),
    Tab(icon: Icon(Icons.directions_boat), text: "Ship",),
    Tab(icon: Icon(Icons.directions_car), text: "Car",),,)Copy the code

19, onTap

The callback when Tab is clicked

Method of use

TabBar(
  enableFeedback: true,
  onTap: (index) {
    print(index);
  },
  tabs: [
    Tab(icon: Icon(Icons.directions_bike), text: "Bike",),
    Tab(icon: Icon(Icons.directions_boat), text: "Ship",),
    Tab(icon: Icon(Icons.directions_car), text: "Car",),,)Copy the code

20, physics

How TabBar’s scroll view responds to user input,

For example, determine how the scroll view continues to animate after the user stops dragging it.

Method of use

TabBar(
  physics: NeverScrollableScrollPhysics(),
  tabs: [
    Tab(icon: Icon(Icons.directions_bike), text: "Bike",),
    Tab(icon: Icon(Icons.directions_boat), text: "Ship",),
    Tab(icon: Icon(Icons.directions_car), text: "Car",),,)Copy the code

conclusion

The above is TabBar properties detailed analysis and write a simple demo, in the usual development process TabBar

Component is used relatively frequently and is a component that developers must master.