Flutter | Custom Tab Indicator

Create a class that extends Decoration

class CustomTabIndicator extends Decoration {
final double indicatorHeight;
final Color indicatorColor;

const CustomTabIndicator({@required this.indicatorHeight, @required this.indicatorColor});

@override
TabIndicatorPainter createBoxPainter([VoidCallback onChanged]) {
return new TabIndicatorPainter(this, onChanged);
}
}

Create Custom Painter

class TabIndicatorPainter extends BoxPainter {
final CustomTabIndicator decoration;

TabIndicatorPainter(this.decoration, VoidCallback onChanged)
: assert(decoration != null),
super(onChanged);

@override
void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
assert(configuration != null);
assert(configuration.size != null);

Rect rect = Offset(offset.dx + 6, (configuration.size.height - decoration.indicatorHeight ?? 3)) &
Size(configuration.size.width - 12, decoration.indicatorHeight ?? 3);

final Paint paint = Paint();
paint.color = decoration.indicatorColor ?? Color(0xff292929);
paint.style = PaintingStyle.fill;
canvas.drawRRect(RRect.fromRectAndCorners(rect, topRight: Radius.circular(8), topLeft: Radius.circular(8)), paint);
}
}

Use it like this

indicator: CustomTabIndicator(indicatorColor: AppColor.appGreenTextColor, indicatorHeight: 2)

I write articles for my own reference only. I use medium.com as my digital notebook