I want to build a tab bar with a downward arrow like below:
This is what I currently 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!

