Flutter - Add curve to container

Pari07
August 15, 2023
237 views
0 votes
2 Answers

I want to design this type of widget in flutter, I tried it with Clipper class but not getting proper output.

I tried with this code,

class ArcClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();

    path.lineTo(0, size.height);
    path.lineTo(size.width, size.height);
    path.lineTo(size.width - 30, 0);

    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper old) => false;
}

but its showing arc at right side, which is not perfect.

Answers

class ArcClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();

    path.lineTo(0, size.height);
    
    // Calculate control points for the curve
    final controlPoint1 = Offset(size.width * 0.25, size.height * 0.8);
    final controlPoint2 = Offset(size.width * 0.75, size.height * 0.8);
    final endPoint = Offset(size.width, size.height * 0.6);
    
    // Draw a cubic Bezier curve
    path.cubicTo(
      controlPoint1.dx, controlPoint1.dy,
      controlPoint2.dx, controlPoint2.dy,
      endPoint.dx, endPoint.dy,
    );

    path.lineTo(size.width, 0);

    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper old) => false;
}

Check this code to add a curve. I tried adding shape using somehow your code.

class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
  body: ClipPath(
      clipper: ArcClipper(),
      child: Container(
        height: 30,
        width: 250,
        color: Colors.yellow,
        child: const Center(child: Text("          Members save $50 extra")),
      )),
 );
}
} 

class ArcClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
final path = Path();
path.moveTo(50, 0);
path.quadraticBezierTo(50, 17, 0, size.height);
path.lineTo(size.width, size.height);
path.lineTo(size.width, 0);
path.close();
return path;
}
 @override
 bool shouldReclip(CustomClipper old) => false;
}

It looks like this

Please signup or login to give your own answer.

Click here to cancel reply.

Flutter – Add curve to container

Answers