如何修改Flutter Tab Bar Indicator实现向下箭头效果

要将现有向上箭头的TabBar指示器改为向下箭头，只需调整箭头顶点的坐标及路径绘制顺序，以下是修改后的完整代码：

class ArrowTabBarIndicator extends Decoration {
  final BoxPainter _painter;
  ArrowTabBarIndicator(
      {double width = 20, double height = 10, required Color color})
      : _painter = _ArrowPainter(width, height, color);

  @override
  BoxPainter createBoxPainter([VoidCallback? onChanged]) => _painter;
}

class _ArrowPainter extends BoxPainter {
  final Paint _paint;
  final double width;
  final double height;

  _ArrowPainter(this.width, this.height, Color color)
      : _paint = Paint()
          ..color = color
          ..isAntiAlias = true;

  @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration cfg) {
    Path trianglePath = Path();
    if (cfg.size != null) {
      // 调整顶点坐标，让箭头位于Tab顶部并朝向下方
      Offset centerBottom =
          Offset(cfg.size!.width / 2, height) + offset;
      Offset topLeft =
          Offset(cfg.size!.width / 2 - (width / 2), 0) + offset;
      Offset topRight =
          Offset(cfg.size!.width / 2 + (width / 2), 0) + offset;

      // 按顺序连接顶点，绘制向下的三角形
      trianglePath.moveTo(topLeft.dx, topLeft.dy);
      trianglePath.lineTo(topRight.dx, topRight.dy);
      trianglePath.lineTo(centerBottom.dx, centerBottom.dy);
      trianglePath.lineTo(topLeft.dx, topLeft.dy);

      trianglePath.close();
      canvas.drawPath(trianglePath, _paint);
    }
  }
}

关键改动说明： #

1. 补全参数传递：原代码未将ArrowTabBarIndicator的color参数传递给_ArrowPainter，修复后确保颜色配置能正常生效
2. 调整顶点位置：
   • 将箭头的中点从Tab底部移到Tab顶部下方height距离处（对应centerBottom）
   • 将三角形的左右顶点设置在Tab的顶部边缘（y轴坐标为0）
3. 修改路径连接顺序：保持左顶点→右顶点→底部中点的连接顺序，确保三角形朝向下方

内容的提问来源于stack exchange，提问作者clio