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.

Answer 1

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,
            ),
        ),
    ),
)

Answer 2

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.

Answer 3

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