Flutter: Smooth rounded corners

Question

I would like to know how to make a smooth rounded corner in Flutter. I found a similar link to iOS approach - smooth rounded corners in swift but it did not help me find a solution to Flutter approach. I thought ContinuousRectangleBorder is the way, but it is not the shape I am looking for. I think some kind of clipper should work.

No, smooth rounded corner radius, there is link to similar issue. Here is the explanation https://medium.com/@arthurofbabylon/a-smooth-corner-radius-in-ios-54b80aa2d372 — Stepan, Jan 03 '21 at 20:05

score 10 · Accepted Answer · answered Sep 06 '21 at 12:37

I published a dedicated package that might help you : figma_squircle.

Container(
    height: 100,
    width: 100,
    decoration: ShapeDecoration(
        color: Colors.red.withOpacity(0.75),
        shape: SmoothRectangleBorder(
            borderRadius: SmoothBorderRadius(
              cornerRadius: 10,
              cornerSmoothing: 0.5,
            ),
        ),
    ),
)

Abdullah Khan · Answer 2 · 2021-01-03T20:20:14.003

-2

You can try the following code

ClipRRect(
borderRadius:
      BorderRadius.circular(15.0),
child: // Your widget that needs to be rounded.
)

For more information, you can check this reference video

edited Jan 03 '21 at 20:20

answered Jan 03 '21 at 20:08

Abdullah Khan

1,046
8
14

Clip.hardEdge does not sound like "smooth" approach – Stepan Jan 03 '21 at 20:16
Clip.hardEdge is Optional. You can leave this line... – Abdullah Khan Jan 03 '21 at 20:18
Try To use without clip.hardEdge – Abdullah Khan Jan 03 '21 at 20:20
1

The problem is to make smooth transition between the "edges", otherwise I know to make rounder corners. – Stepan Jan 03 '21 at 20:28

score -2 · Answer 3 · answered Jan 03 '21 at 23:14

There is no natural way to do this with Flutter. If you really want to accomplish this, use the technique used in your article where you overlay the square with a circle with a Stack widget. This looks like the following:

Stack(children: [
          Container(
              height: 100,
              width: 100,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.amber,
              )),
          Container(
            height: 100,
            width: 100,
            decoration: BoxDecoration(
              color: Colors.amber,
              borderRadius: BorderRadius.all(Radius.circular(16)),
            ),
          ),
        ]),

This will create a square that looks like:

You might need to mess around with the height and width of the square and the circle but you get the idea.

Flutter: Smooth rounded corners

3 Answers3