Flutter 画倒三角形

我正在Flitter中构建一个自定义选项卡栏，并尝试使用标签下方的特定路径绘制一个倒三角形（作为指示器）。并使指示器在所选选项卡上移动

这是我到目前为止所拥有的

class TriangleTabIndicator extends Decoration {
  final BoxPainter _painter;

  TriangleTabIndicator({@required Color color, @required double radius})
      : _painter = DrawTriangle(color);

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

class DrawTriangle extends BoxPainter {
  Paint _paint;

  DrawTriangle(Color color) {
    _paint = Paint()
      ..color = color
      ..style = PaintingStyle.fill;
  }

  @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration cfg) {
    final Offset triangleOffset =
        offset + Offset(cfg.size.width / 2, cfg.size.height - 10);
    var path = Path();

    path.moveTo(triangleOffset.dx, triangleOffset.dy);
    path.lineTo(triangleOffset.dx + 10, triangleOffset.dy + 10);
    path.lineTo(triangleOffset.dx - 10, triangleOffset.dy + 10);

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

上面是一个等腰三角形。现在我需要反转这个三角形

这是TabBar小部件

TabBar(
   controller: _tabController,
   indicator: TriangleTabIndicator(color: Colors.white, radius: null),
   isScrollable: true,
   indicatorPadding: EdgeInsets.zero,
   labelPadding: EdgeInsets.fromLTRB(0.0, 0.0, 10.0, 10.0),
   tabs: <Widget>[],
),

TabBar(
控制器：\ tab控制器，
指示器：三角形指示器（颜色：Colors.white，半径：null），
isScrollable：是的，
指示灯添加：EdgeInsets.zero，
标签填充：来自LTRB（0.0,0.0,10.0,10.0）的边缘设置，
选项卡：[]，
),

如果要使三角形点向下

将

绘制方法更改为此代码：

  void paint(Canvas canvas, Offset offset, ImageConfiguration cfg) {
    final Offset triangleOffset = offset + Offset(cfg.size.width / 2, cfg.size.height);
    var path = Path();

    path.moveTo(triangleOffset.dx, triangleOffset.dy);
    path.lineTo(triangleOffset.dx + 10, triangleOffset.dy - 10);
    path.lineTo(triangleOffset.dx - 10, triangleOffset.dy - 10);
    path.close();

    canvas.drawPath(path, _paint);
  }

谢谢我应该考虑一下如何移植这个代码？尝试使用您的solution@pskink它起作用了；但这不是我真正需要的。虽然我已经得到了答案。谢谢你的帮助。