CODEWITHSUNDEEP
androidflutterdarttabstabbar
Ashutosh singh
Ashutosh singh

Reputation: 944

How to implement custom shape tab bar indicator in flutter

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 !!.

Shape of indicator

Upvotes: 1

Views: 885

Answers (1)

Ashutosh singh
Ashutosh singh

Reputation: 944

I found a trick i ask designer to provide svg file of the indicator . Then i go to fluttershapemakerand 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;
  }
}

Upvotes: 3

Related Questions