Home > Enterprise >  Flutter how to make custom tab indicator like this?
Flutter how to make custom tab indicator like this?

Time:09-29

enter image description here

CodePudding user response:

for tab

Tab(
    child: CustomPaint(
        size: Size(50, 5),
        painter: CurvePainter(),
      ),
   ),

For line with sharp ends.

class CurvePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint();
    paint.color = Colors.black;
    paint.style = PaintingStyle.fill; 

    var path = Path();

    path.moveTo(0, 0);
    path.quadraticBezierTo(size.width / 2, size.height / 2, size.width, 0);
    path.quadraticBezierTo(size.width / 2, -size.height / 2, 0, 0);

    canvas.drawPath(path, paint);
  }

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