Нарисуйте перевернутый треугольник

Question

Я создаю пользовательский TabBar во Flutter и пытаюсь нарисовать перевернутый треугольник (в виде индикаторов), используя указанные c пути под меткой. И чтобы индикатор двигался на выбранной вкладке.

Вот что у меня есть до сих пор

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>[],
),

Answer 1

Если вы хотите, чтобы треугольник был направлен вниз ...

измените ваш метод paint на этот код:

  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);
  }