How to create a custom container with rounded edges in flutter?

Question

I am trying to create a custom container with round edges but not able to make the corners round. I just want to make the corners of green container round.

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..color = Colors.green.withOpacity(0.8)
      ..strokeWidth = 5
      ..strokeCap = StrokeCap.round;

    final shapeBounds = Rect.fromLTRB(0, 0, size.width, size.height);

    final path = Path()
      ..moveTo(shapeBounds.left + 10, shapeBounds.top) //3
      ..lineTo(shapeBounds.bottomLeft.dx + 10,shapeBounds.bottomLeft.dy) 
      ..lineTo(shapeBounds.bottomRight.dx,shapeBounds.bottomRight.dy - size.height * 0.12)
      ..lineTo(shapeBounds.topRight.dx - 20,
          shapeBounds.topRight.dy + size.height * 0.12) //7
      ..close();

    canvas.drawPath(path, paint);

  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    // TODO: implement shouldRepaint
    return false;
  }
}

You can take a look here and fiddle with it: https://stackoverflow.com/questions/50211863/how-to-create-a-custom-blured-shape-with-rounded-corners-in-flutter — Unbreachable, Jul 29 '20 at 17:18

back_to_square · Accepted Answer · 2020-07-29T17:48:31.573

2

You can use ClipPath. Use a Custom Clipper in it. In the Custom Clipper, while drawing the path use quadraticBezierTo.

class MyContainer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ClipPath(
      clipper: MyClipper(),
      child: Container(
        child: Text("Dummy Text"),
        alignment: Alignment.center,
        color: Colors.green,
        width: 200,
        height: 200,
      ),
    );
  }
}

class MyClipper extends CustomClipper<Path> {
  Path getClip(Size size) {
    final path = Path();
    path
      ..lineTo(0.0, size.height * 0.1)
      ..quadraticBezierTo(0, 0, size.width * 0.1, 0)
      ..lineTo(size.width * 0.8, size.height * 0.12)
      ..quadraticBezierTo(size.width * 0.9, size.height * 0.15,
          size.width * 0.9, size.height * 0.2)
      ..lineTo(size.width, size.height * 0.9)
      ..quadraticBezierTo(
          size.width, size.height, size.width * 0.9, size.height)
      ..lineTo(size.width * 0.2, size.height * 0.9)
      ..quadraticBezierTo(size.width * 0.1, size.height * 0.9, size.width * 0.1,
          size.height * 0.8)
      ..close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper oldClipper) {
    return false;
  }
}

edited Jul 29 '20 at 17:48

answered Jul 28 '20 at 00:41

back_to_square

106
4

@ARAB KUMAR : Not Sure why you are extending CustomPainter Class. Why would you not extend a StatelessWidget and return a container. In case, you have a specific query please do let know. – back_to_square Jul 28 '20 at 00:49
1

He can definitely use that. But my thought is that he wants to know how to do it the *way* he asked. He probably wants to know how to achieve rounded corners in a *custom* way while still keeping the particular shape he already has. – Unbreachable Jul 28 '20 at 03:29
Yes he's quoted 'I am trying to create a custom container' – Yadu Jul 28 '20 at 03:50
@back_to_square thanks for the answer but just look at the shape of container once. its not a simple container with parallel edges and borderRadius won't work here. I have tried that. It will be very helpful if you revise your answer. – ARAB KUMAR Jul 29 '20 at 08:22
@Unbreachable yes, you are absolutely right. I am finding a way to create a custom rounded border coz predefined methods are failing here. – ARAB KUMAR Jul 29 '20 at 08:26
@ARABKUMAR I have edited my Answer. Pl check the updated code. Of course you have to play around with the values. Hope this helps. Pl, let me know. Thanks :) – back_to_square Jul 29 '20 at 17:51
1

@back_to_square thank you very much. your answer will solve my problem for now but I was just wondering that isn't it possible to do this using CustomPainter. If yes then please let me know. – ARAB KUMAR Jul 30 '20 at 11:32

score 1 · Answer 2 · answered Jul 28 '20 at 03:49

1

Rather than using Rect which gives you a normal rectangle use RRect which will give the desired rounded rectangle, comment if you need a demo code.

answered Jul 28 '20 at 03:49

Yadu

2,979
2
12
27

2

Yes please. It will be very helpful. Thank you – ARAB KUMAR Jul 30 '20 at 11:34

score -2 · Answer 3 · answered Jul 28 '20 at 04:40

if you want a rounded edge in all corners.

Container(
  decoration:BoxDecoration(
     borderRadius:BorderRadius.circular(double radius)
   )
)

if you want a rounded edge in a particular corner.

 Container(
  decoration:BoxDecoration(
     borderRadius:BorderRadius.only(
       topLeft:Radius.circular()
       topRight :Radius.circular()
       bottomLeft :Radius.circular()
       bottomRight :Radius.circular()

      )
   )
)

For more details check out this link:https://api.flutter.dev/flutter/painting/BorderRadius-class.html

How to create a custom container with rounded edges in flutter?

3 Answers3