Properties and custom implementation of flutter tabBar

---

foreword

In Flutter, the indicatorPadding property of the TabBar is used to set the padding of the indicator, not to adjust the spacing between the indicator and the text. To adjust the spacing between the indicator and the text in the TabBar, this article mainly explains how to customize the margin of indicatorPadding.

---

1. What is TabBar?

TabBar is a commonly used widget used to create tab page tabs. The following are descriptions of some commonly used TabBar properties:

1. controller: TabControllerType, used to manage the state of the TabBar, including the currently selected tab page and animation.
2. tabs: List<Widget>Type, used to define tab page options of TabBar. Each tab is a Tabwidget.
3. isScrollable: booltype, default is false. When set trueto , the TabBar can scroll in the horizontal direction, which is suitable for situations where there are many tab pages.
4. indicator: Decorationtype, used to indicate the currently selected tab. You can customize the appearance of the indicator, such as color, shape, border, etc.
5. indicatorColor: Colortype, the color of the indicator.
6. indicatorWeight: doubletype, the thickness of the indicator.
7. indicatorPadding: EdgeInsetsGeometryType, the inner margin of the indicator, used to adjust the space between the indicator and the content of the tab page.
8. indicatorSize: TabBarIndicatorSizeEnumerated type, the size of the indicator. Can be TabBarIndicatorSize.tab(same as tab width) or TabBarIndicatorSize.label(same as tab text width).
9. labelColor: Colortype, the text color of the selected tab page.
10. unselectedLabelColor: Colortype, the text color of the unselected tab page.
11. labelStyle: TextStyleType, the text style of the selected tab page.
12. unselectedLabelStyle: TextStyletype, the text style of the unselected tab page.
13. labelPadding: EdgeInsetsGeometryType, the inner margin of the tab page, used to adjust the position of the content of the tab page.
14. dragStartBehavior: DragStartBehaviorAn enumeration type, which determines how the TabBar responds to drag gestures. Defaults to DragStartBehavior.start, meaning only respond when dragging starts.

These properties are only part of TabBar, there are other properties that can be used and adjusted as needed. By using these properties, you can customize the TabBar's appearance, indicator style, text style, etc. to meet your design needs.

Two, TabBar customization

Method 1: Use the indicator property of the TabBar to customize the indicator style. You can adjust the spacing between the indicator and the text by customizing the indicator Widget. Here is a sample code:

dartCopy code
Widget _buildCustomTabBar() {
    
    
  return TabBar(
    controller: _tabController, // 关联TabController
    tabs: [
      Tab(text: 'Tab 1'),
      Tab(text: 'Tab 2'),
      Tab(text: 'Tab 3'),
    ],
    // 修改TabBar的外观样式
    labelColor: Colors.black, // 选中标签页的文本颜色
    unselectedLabelColor: Colors.grey, // 未选中标签页的文本颜色
    indicator: UnderlineTabIndicator(
      borderSide: BorderSide(
        color: Colors.red, // 指示器颜色
        width: 2.0, // 指示器厚度
      ),
      insets: EdgeInsets.symmetric(horizontal: 10.0), // 设置指示器的水平间距
    ),
  );
}

In this example, we use TabBar to create a custom-styled TabBar, and customize the indicator style by modifying the indicator property. We use UnderlineTabIndicator as the indicator, and set the horizontal spacing of the indicator through the insets property.

Method 2: Use the labelPadding property of the TabBar to adjust the inner margin of the text Another method is to adjust the inner margin of the text by adjusting the labelPadding property of the TabBar, thereby indirectly affecting the space between the indicator and the text. Here is a sample code:

Widget _buildCustomTabBar() {
    
    
  return TabBar(
    controller: _tabController, // 关联TabController
    tabs: [
      Tab(text: 'Tab 1'),
      Tab(text: 'Tab 2'),
      Tab(text: 'Tab 3'),
    ],
    // 修改TabBar的外观样式
    labelColor: Colors.black, // 选中标签页的文本颜色
    unselectedLabelColor: Colors.grey, // 未选中标签页的文本颜色
    labelPadding: EdgeInsets.symmetric(horizontal: 10.0), // 调整文字的水平内边距
  );
}

In this example, we use TabBar to create a custom-styled TabBar, and adjust the horizontal inner margin of the text by modifying the labelPadding property.

3. Tab customization

There is nothing to say about the customization of the Tab, just write your own style in it, such as pictures, styles, text, etc., can be customized

---

Summarize

提示：这里对文章进行总结：

For example: the above is what we will talk about today. This article only briefly introduces the use of pandas, and pandas provides a large number of functions and methods that allow us to process data quickly and easily.