How to implement custom shape tab bar indicator in flutter

Question

I want to build custom shape indicator I know it can be achieved using canvas widget to draw custom shape but i am unable to do if you can give some hint or share some code to achieved this UI. it would be very helpful. Thanks.!.

Answer 1

I found a trick i ask designer to provide svg file of the indicator. Then i go to fluttershapemaker and upload svg file and it give me custom paint and code and boy oh boy it works perfectly.

Here is custom paint code generated by fluttershapemaker

class TabPainter extends CustomPainter {
  final Color? color;

  TabPainter({this.color});

  @override
  void paint(Canvas canvas, Size size) {
    Paint paint0Fill = Paint()..style = PaintingStyle.fill;
    paint0Fill.color = const Color(0xff9AE9E1).withOpacity(1.0);

    Path path_0 = Path();
    path_0.moveTo(size.width * 0.08426966, size.height * 0.2744795);
    path_0.cubicTo(
        size.width * 0.08426966,
        size.height * 0.03409159,
        size.width * 0.02544281,
        size.height * 0.001752948,
        0,
        size.height * 0.001753373);
    path_0.lineTo(size.width * 0.9438202, size.height * 0.001753373);
    path_0.cubicTo(
        size.width * 0.9748483,
        size.height * 0.001753373,
        size.width,
        size.height * 0.1035068,
        size.width,
        size.height * 0.2290250);
    path_0.lineTo(size.width, size.height * 0.9790273);
    path_0.cubicTo(
        size.width,
        size.height * 0.8863636,
        size.width * 0.9765899,
        size.height * 0.8653909,
        size.width * 0.9662921,
        size.height * 0.8653909);
    path_0.lineTo(size.width * 0.1460674, size.height * 0.8653909);
    path_0.cubicTo(
        size.width * 0.1095506,
        size.height * 0.8653909,
        size.width * 0.08426966,
        size.height * 0.7727273,
        size.width * 0.08426966,
        size.height * 0.5926636);
    path_0.lineTo(size.width * 0.08426966, size.height * 0.2744795);
    path_0.close();

    paint0Fill.color = const Color(0xff9AE9E1).withOpacity(1.0);
    canvas.drawPath(path_0, paint0Fill);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}