Flutter rounded TabBar border indicator - flutter

Question

I spent way too many hours searching for a similar solution but it seems that nobody on earth is implementing such design. I want to indicate selected TabBar Tab with such indicator:
Currently it looks like this:
Code of current TabBar:
const TabBar(
indicator: BoxDecoration(
border: Border(
top: BorderSide(color: Colors.blue, width: 5),
),
),
labelPadding: EdgeInsets.zero,
tabs: [
_Tab(icon: Icons.home, text: 'Home'),
_Tab(icon: Icons.settings, text: 'Settings'),
_Tab(icon: Icons.cleaning_services, text: 'Clean'),
_Tab(icon: Icons.construction, text: 'Service'),
_Tab(icon: Icons.library_books, text: 'Resources'),
],
),
)
Has anybody got an idea of how this should look like?

Answer 1

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

Answer 2

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