Custom Tabbars are designed to change the style of the slider, font and color to suit your needs

Original Tabbar style

The style of a

This does not require modifying the original Tabbar code, just the indicator style

TabBar(
  tabs: tabList,
  indicatorColor: Colors.white,
  indicatorWeight: 0,
  indicator: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(45.sp),
      border: Border.all(width: 10.sp,color: GsColors.gray10)
  ),
  labelColor: GsColors.blue,
  unselectedLabelColor: GsColors.black,
  labelStyle: TextStyle(
    color: Colors.blue,
    fontWeight: FontWeight.bold,
    fontSize: GsFontSize.sp_36,
  ),
  unselectedLabelStyle: TextStyle(
    fontSize: GsFontSize.sp_36,
    // fontWeight: FontWeight.bold,
  ),
)
Copy the code

Style 2

Since the indicator is fixed in length and width, it cannot be modified through the above method, so you need to customize the effect by delving into the Tabbar source code. Here is the tabbar with the custom class name, change the Tabar class name to CustomTabBarWidget, and change the relevant class name in the file

Container(
  width: ScreenUtil().screenWidth,
  color: bgColor ?? Colors.white,
  alignment: Alignment.centerLeft,
  child: SingleChildScrollView(
    scrollDirection: Axis.horizontal,
    child: CustomTabBarWidget(
      height: height ?? 130.sp,
      isScrollable: true,
      labelColor: selectLabelColor ?? GsColors.black,
      unselectedLabelColor: unselectLabelColor ?? Color(0xff666666),
      labelStyle: TextStyle(fontSize: 46.sp, fontWeight: GsFontWeight.medium),
      unselectedLabelStyle: TextStyle(fontSize: 44.sp, fontWeight: GsFontWeight.regular),
      indicatorWeight: 12.sp,
      indicatorColor: indicatorColor ?? GsColors.blueMain,
      indicatorSize: TabBarIndicatorSize.label,
      tabs: tabList,
    ),
  ),
)
Copy the code

Make a copy of the Tabbar of flutter and change the Tabbar class name. Find the Indicator paint method and change the size of the indicator inside. The size of indicator in the original code is changed according to the size of tabbar item

The original code:

if (indicatorSize == TabBarIndicatorSize.label) { final double tabWidth = tabKeys[tabIndex].currentContext! .size! .width; Final double delta = ((tabright-tableft) -tabWidth) / 2.0; tabLeft += delta; tabRight -= delta; } final EdgeInsets insets = indicatorPadding.resolve(_currentTextDirection); Final Rect Rect = rect. fromLTWH(tabLeft, 0.0, tabright-tableft, tabbarsie.height);Copy the code

Modified code:

// Double indicatorWidth = 58.sp; double indicatorHeight = 12.sp; if (indicatorSize == TabBarIndicatorSize.label) { final double tabWidth = tabKeys[tabIndex].currentContext.size.width; Final double delta = ((tabright-tableft-indicatorWidth)) / 2.0; tabLeft += delta; tabRight -= delta; } final EdgeInsets insets = indicatorPadding.resolve(_currentTextDirection); final Rect rect = Rect.fromLTWH(tabLeft, tabBarSize.height - indicatorHeight, indicatorWidth, indicatorHeight);Copy the code

Code address: github.com/justyouzxy/…