Question 256139 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter adding 2 curve on top right and left CustomPainter edges

This below code can create a custome path and i it doesn’t have curves on topLeft and topRight, could you please help me how can i do that?

i need to make the same as this screen shot:

enter image description here

original:

enter image description here

class CurvedPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = DV.$light
      ..style = PaintingStyle.fill;

    final path = Path()
      ..moveTo(0, size.height * 0.7)
      ..quadraticBezierTo(size.width * 0.25, size.height * 0.8, size.width * 0.4, size.height * 0.6)
      ..quadraticBezierTo(size.width * 0.65, size.height * 0.3, size.width, size.height * 0.6)
      ..lineTo(size.width, 0)
      ..lineTo(0, 0);

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}
Tags:

2

Answers


  1. 0

    To create a custom path with straight lines on the topLeft and topRight corners instead of curves, you can modify the path you’ve defined in your CurvedPainter class.

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

    final path = Path()
      ..moveTo(0, size.height * 0.7)
      ..lineTo(size.width * 0.25, size.height * 0.7) // Top-left corner
      ..lineTo(size.width * 0.4, size.height * 0.6)
      ..quadraticBezierTo(size.width * 0.65, size.height * 0.3, size.width, size.height * 0.6)
      ..lineTo(size.width, 0)
      ..lineTo(0, 0);

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}
    Login or Signup to reply.
  2. 0

    To add rounded corners to top right and top left, I recommend you using arcToPoint:

    Here is how you could use it:

    class CurvedPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = DV.$light
      ..style = PaintingStyle.fill;

    final path = Path()
      ..moveTo(40, 0)
      ..arcToPoint(
        const Offset(0, 40),
        radius: const Radius.circular(40),
        clockwise: false,
      )
      ..lineTo(0, size.height * 0.7)
      ..quadraticBezierTo(size.width * 0.25, size.height * 0.8, size.width * 0.4, size.height * 0.6)
      ..quadraticBezierTo(size.width * 0.65, size.height * 0.3, size.width, size.height * 0.6)
      ..lineTo(size.width, 40)
      ..arcToPoint(
        Offset(size.width - 40, 0),
        radius: const Radius.circular(40),
        clockwise: false,
      )
      ..lineTo(40, 0)
      ..close();

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search