const TabBar({
  Key? key,
  required this.tabs,// tab組件列表
  this.controller,// tabBar控制器
  this.isScrollable = false,// 是否支持滾動
  this.padding,// 內部tab內邊距
  this.indicatorColor,// 指示器顏色
  this.automaticIndicatorColorAdjustment = true,// 指示器顏色是否自動跟隨主題顏色
  this.indicatorWeight = 2.0,// 指示器高度
  this.indicatorPadding = EdgeInsets.zero,// 指示器padding
  this.indicator,//選擇指示器樣式
  this.indicatorSize,//選擇指示器大小
  this.labelColor,// 選擇標簽文本顏色
  this.labelStyle,// 選擇標簽文本樣式
  this.labelPadding,// 整體標簽邊距
  this.unselectedLabelColor,//未選中標簽顏色
  this.unselectedLabelStyle,// 未選中標簽樣式
  this.dragStartBehavior = DragStartBehavior.start,//設置點擊水波紋效果 跟隨全局點擊效果
  this.overlayColor,// 設置水波紋顏色
  this.mouseCursor, // 鼠標指針懸停的效果 App用不到
  this.enableFeedback,// 點擊是否反饋聲音觸覺。
  this.onTap,// 點擊Tab的回調
  this.physics,// 滾動邊界交互
}) 

List<String> tabs = ["Tab1", "Tab2"];
late TabController _tabController =
    TabController(length: tabs.length, vsync: this); //tab 控制器
@override
Widget build(BuildContext context) {
  return Column(
    children: [
      TabBar(
        controller: _tabController,
        tabs: tabs
            .map((value) => Tab(
                  height: 44,
                  text: value,
                ))
            .toList(),
        indicatorColor: Colors.redAccent,
        indicatorWeight: 2,
        labelColor: Colors.redAccent,
        unselectedLabelColor: Colors.black87,
      ),
      Expanded(
          child: TabBarView(
        controller: _tabController,
        children: tabs
            .map((value) => Center(
                  child: Text(
                    value,
                  ),
                ))
            .toList(),
      ))
    ],
  );
}

const Tab({
  Key? key,
  this.text,//文本
  this.icon,//圖標
  this.iconMargin = const EdgeInsets.only(bottom: 10.0),
  this.height,//tab高度
  this.child,// 自定義組件
}) 
Widget build(BuildContext context) {
  assert(debugCheckHasMaterial(context));

  final double calculatedHeight;
  final Widget label;
  if (icon == null) {
    calculatedHeight = _kTabHeight;
    label = _buildLabelText();
  } else if (text == null && child == null) {
    calculatedHeight = _kTabHeight;
    label = icon!;
  } else {
  // 這里布局默認icon和文本是上下排列的
    calculatedHeight = _kTextAndIconTabHeight;
    label = Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Container(
          margin: iconMargin,
          child: icon,
        ),
        _buildLabelText(),
      ],
    );
  }

  return SizedBox(
    height: height ?? calculatedHeight,
    child: Center(
      widthFactor: 1.0,
      child: label,
    ),
  );
}

enum TabBarIndicatorSize {
// 寬度和tab控件一樣寬
  tab,
// 寬度和文本一樣寬
  label,
}

// 創(chuàng)建裝飾盒子
BoxPainter createBoxPainter([ VoidCallback onChanged ]);

// 繪制
void paint(Canvas canvas, Offset offset, ImageConfiguration configuration);

Rect _indicatorRectFor(Rect indicator, TextDirection textDirection) {
  /// 自定義固定寬度
  double w = indicatorWidth;
  //中間坐標
  double centerWidth = (indicator.left + indicator.right) / 2;
  return Rect.fromLTWH(
    centerWidth, //距離左邊距
    // 距離上邊距
    indicator.bottom - borderSide.width - indicatorBottom,
    w,
    borderSide.width,
  );
}

@override
BoxPainter createBoxPainter([VoidCallback? onChanged]) {
  return _UnderlinePainter(
    this,
    onChanged,
    tabController?.animation,
    indicatorWidth,
  );
}

void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
// 自定義繪制
}

// 回調函數 動畫插值 tab位置的偏移量
Animation<double>? get animation => _animationController?.view;

import 'package:flutter/material.dart';

/// 修改下劃線自定義
class MyTabIndicator extends Decoration {
  final TabController? tabController;
  final double indicatorBottom; // 調整指示器下邊距
  final double indicatorWidth; // 指示器寬度

  const MyTabIndicator({
    // 設置下標高度、顏色
    this.borderSide = const BorderSide(width: 2.0, color: Colors.white),
    this.tabController,
    this.indicatorBottom = 0.0,
    this.indicatorWidth = 4,
  });

  /// The color and weight of the horizontal line drawn below the selected tab.
  final BorderSide borderSide;

  @override
  BoxPainter createBoxPainter([VoidCallback? onChanged]) {
    return _UnderlinePainter(
      this,
      onChanged,
      tabController?.animation,
      indicatorWidth,
    );
  }

  Rect _indicatorRectFor(Rect indicator, TextDirection textDirection) {
    /// 自定義固定寬度
    double w = indicatorWidth;
    //中間坐標
    double centerWidth = (indicator.left + indicator.right) / 2;
    return Rect.fromLTWH(
      //距離左邊距
      tabController?.animation == null ? centerWidth - w / 2 : centerWidth - 1,
      // 距離上邊距
      indicator.bottom - borderSide.width - indicatorBottom,
      w,
      borderSide.width,
    );
  }

  @override
  Path getClipPath(Rect rect, TextDirection textDirection) {
    return Path()..addRect(_indicatorRectFor(rect, textDirection));
  }
}

class _UnderlinePainter extends BoxPainter {
  Animation<double>? animation;
  double indicatorWidth;

  _UnderlinePainter(this.decoration, VoidCallback? onChanged, this.animation,
      this.indicatorWidth)
      : super(onChanged);

  final MyTabIndicator decoration;

  @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
    assert(configuration.size != null);
    // 以offset坐標為左上角 size為寬高的矩形
    final Rect rect = offset & configuration.size!;
    final TextDirection textDirection = configuration.textDirection!;
    // 返回tab矩形
    final Rect indicator = decoration._indicatorRectFor(rect, textDirection)
      ..deflate(decoration.borderSide.width / 2.0);
    // 圓角畫筆
    final Paint paint = decoration.borderSide.toPaint()
      ..style = PaintingStyle.fill
      ..strokeCap = StrokeCap.round;
    if (animation != null) {
      num x = animation!.value; // 變化速度 0-0.5-1-1.5-2...
      num d = x - x.truncate(); // 獲取這個數字的小數部分
      num? y;
      if (d < 0.5) {
        y = 2 * d;
      } else if (d > 0.5) {
        y = 1 - 2 * (d - 0.5);
      } else {
        y = 1;
      }
      canvas.drawRRect(
          RRect.fromRectXY(
              Rect.fromCenter(
                  center: indicator.centerLeft,
                  // 這里控制最長為多長
                  width: indicatorWidth * 6 * y + indicatorWidth,
                  height: indicatorWidth),
              // 圓角
              2,
              2),
          paint);
    } else {
      canvas.drawLine(indicator.bottomLeft, indicator.bottomRight, paint);
    }
  }
}