Flutter rounded TabBar border indicator
You must create your own Decoration. Have a look to this guide : https://medium.com/swlh/flutter-custom-tab-indicator-for-tabbar-d72bbc6c9d0c
It creates a custom point under the tab, so you can copy that to create your kind of indicator
Thanks, BabC.
Here's the final result:
class _TabIndicator extends BoxDecoration {
final BoxPainter _painter;
_TabIndicator() : _painter = _TabIndicatorPainter();
@override
BoxPainter createBoxPainter([onChanged]) => _painter;
}
class _TabIndicatorPainter extends BoxPainter {
final Paint _paint;
_TabIndicatorPainter()
: _paint = Paint()
..color = Colors.blue
..isAntiAlias = true;
@override
void paint(Canvas canvas, Offset offset, ImageConfiguration cfg) {
final double _xPos = offset.dx + cfg.size.width / 2;
canvas.drawRRect(
RRect.fromRectAndCorners(
Rect.fromLTRB(_xPos - 20, 0, _xPos + 20, 5),
bottomLeft: const Radius.circular(5.0),
bottomRight: const Radius.circular(5.0),
),
_paint,
);
}
}