Customizing Flutter Tab Bar Indicator to show an arrow on the active tab

Viewed 31

I want to build a tab bar with a downward arrow like below:

What I want to achieve

This is what I currently have:

What I have

This is the code I used to achieve the arrow facing upward. I got it from this answer on a question: link to the answer where I got the code.

Here is the code:

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

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

    class _ArrowPainter extends BoxPainter {
      final Paint _paint;
      final double width;
      final double height;
    
      _ArrowPainter(this.width, this.height)
          : _paint = Paint()
              ..color = Colors.white
              ..isAntiAlias = true;
    
      @override
      void paint(Canvas canvas, Offset offset, ImageConfiguration cfg) {
        Path trianglePath = Path();
        if (cfg.size != null) {
          Offset centerTop =
              Offset(cfg.size!.width / 2, cfg.size!.height - height) + offset;
          Offset bottomLeft =
              Offset(cfg.size!.width / 2 - (width / 2), cfg.size!.height) + offset;
          Offset bottomRight =
              Offset(cfg.size!.width / 2 + (width / 2), cfg.size!.height) + offset;
    
          trianglePath.moveTo(bottomLeft.dx, bottomLeft.dy);
          trianglePath.lineTo(bottomRight.dx, bottomRight.dy);
          trianglePath.lineTo(centerTop.dx, centerTop.dy);
          trianglePath.lineTo(bottomLeft.dx, bottomLeft.dy);
    
          trianglePath.close();
          canvas.drawPath(trianglePath, _paint);
        }
      }
    }

How can I use the same code to make the arrow face down please? Appreciate if someone can advise. Thank you in advance!

1 Answers

Wrap the arrow in Container and add the argument transform

child: Container(
  transform: Matrix4.translationValues(0.0, -20.0, 0.0),
  child: ArrowTabBarIndicator(),
),
Related