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

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

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)



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
pipaliya ashish

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