Flutter: Smooth rounded corners

user_6743114 0
Viewed 1909

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.

dart flutter button
3 Answers

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

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

user_103686950

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:

enter image description here

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

user_96094420
Related