Add curve to container

Question

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.

can you provide a working sandbox link? – Varun Sukheja Aug 15 '23 at 10:15 — Varun Sukheja, Aug 15 '23 at 10:15

score 0 · Answer 1 · answered Aug 15 '23 at 10:37

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.

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Aug 17 '23 at 06:12

score 0 · Accepted Answer · answered Aug 15 '23 at 10:43

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

Add curve to container

2 Answers2