CODEWITHSUNDEEP
flutterdartflutter-layout
Brendan
Brendan

Reputation: 1167

Draw inverted triangle

I'm building a custom TabBar in Flutter and i'm trying to draw an inverted triangle (as indicators) using specific Paths below the label. And to make the indicator move on tab selected.

Here's what i have so far

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

The above spits out an isosceles triangle. Now i need to invert this triangle.

Here's the TabBar widget

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

Upvotes: 1

Views: 1623

Answers (1)

encubos
encubos

Reputation: 3283

If you want to make the triangle point down...

change your paint method to this code:

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

Upvotes: 2

Related Questions