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)