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

Flutter – I want to make a container that has curve and borderRadius on its top

    path.lineTo(0, 0);
    path.quadraticBezierTo(size.width / 2, 40, size.width, 0);
    path.lineTo(size.width, size.height);
    path.lineTo(0, size.height);
    path.close();
    return path;
}

enter image description here

but when I add borderRadius it gets messed.

could you help me please?

I used clippath but I couldnt make it properly.when I make it i cant add borderRadius to be like the image.if you could write me the clip that makes that shape It will be amazing. but notice that the part border ends and curve begins is very importatnt.thank you

Tags:

2

Answers


  1. 0

    You can wrap your Container with ClipPath and use your path there. Also, You can use OutlinedBorder

    You can use this path.

    class CustomShape extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    final curve = 20.0;
    path.moveTo(0, curve);
    path.quadraticBezierTo(0, 0, curve, 0);
    path.quadraticBezierTo(size.width / 2, curve * 2, size.width - curve, 0);
    path.quadraticBezierTo(size.width, 0, size.width, curve);
    path.lineTo(size.width, size.height);
    path.lineTo(0, size.height);

    path.close();
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) => false;
}
    Login or Signup to reply.
  2. 0

    Here is the solution without using borderRadius.

    child: CustomPaint(
  size: Size(WIDTH,(WIDTH*0.8).toDouble()), //You can Replace [WIDTH] with your desired width for Custom Paint and height will be calculated automatically
  painter: RPSCustomPainter(),
),


class RPSCustomPainter extends CustomPainter{
  
  @override
  void paint(Canvas canvas, Size size) {
  // Layer 1
  
  Paint paint_fill_0 = Paint()
      ..color = const Color.fromARGB(255, 255, 255, 255)
      ..style = PaintingStyle.fill
      ..strokeWidth = size.width*0.00
      ..strokeCap = StrokeCap.butt
      ..strokeJoin = StrokeJoin.miter;
     
         
    Path path_0 = Path();
    path_0.moveTo(size.width*0.2035000,size.height*0.8764000);
    path_0.lineTo(size.width*0.8011000,size.height*0.8754000);
    path_0.quadraticBezierTo(size.width*0.8577000,size.height*0.8608250,size.width*0.8755000,size.height*0.8197000);
    path_0.quadraticBezierTo(size.width*0.9006000,size.height*0.7267000,size.width*0.8984600,size.height*0.2429000);
    path_0.quadraticBezierTo(size.width*0.9002000,size.height*0.2875750,size.width*0.8977400,size.height*0.2446000);
    path_0.quadraticBezierTo(size.width*0.9045800,size.height*0.0844500,size.width*0.6855800,size.height*0.1480000);
    path_0.quadraticBezierTo(size.width*0.5994000,size.height*0.1706500,size.width*0.5039000,size.height*0.1734000);
    path_0.quadraticBezierTo(size.width*0.4071000,size.height*0.1720250,size.width*0.2619800,size.height*0.1359000);
    path_0.quadraticBezierTo(size.width*0.0952800,size.height*0.1110250,size.width*0.1025400,size.height*0.2254000);
    path_0.quadraticBezierTo(size.width*0.1019200,size.height*0.2595250,size.width*0.1003800,size.height*0.3059000);
    path_0.quadraticBezierTo(size.width*0.1093400,size.height*0.6714250,size.width*0.1183000,size.height*0.8098000);
    path_0.quadraticBezierTo(size.width*0.1252000,size.height*0.8580500,size.width*0.2035000,size.height*0.8764000);
    path_0.close();

    canvas.drawPath(path_0, paint_fill_0);
  

  // Layer 1
  
  Paint paint_stroke_0 = Paint()
      ..color = const Color.fromARGB(255, 33, 150, 243)
      ..style = PaintingStyle.stroke
      ..strokeWidth = size.width*0.00
      ..strokeCap = StrokeCap.butt
      ..strokeJoin = StrokeJoin.miter;
     
    
    canvas.drawPath(path_0, paint_stroke_0);
    
  }
  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search