Search code examples
flutterflutter-layoutrounded-cornerscornerradius

How does BorderRadius.circular(radius) work as a parameter for RoundedRectangleBorder Flutter?


The docs simply states

RoundedRectangleBorder

A rectangular border with rounded corners.
Typically used with ShapeDecoration to draw a box with a rounded rectangle.
This shape can interpolate to and from CircleBorder.

BorderRadius.circular

Creates a border radius where all radii are [Radius.circular(radius)].

What does this mean? If my button is 50 logical pixels (25 radius), and I set the radius to 20 should it then clip the corners outside of the 20 logical pixel radius? If I set it to 30 the whole button would be within the circular radius, so nothing should be clipped. This is not the case.

Everything >=30 seems to clip the corners to a 45 degree arc, resulting in a complete half circle on each short side of the button.

Can anyone explain this value and how to use it?


Solution

  • The radius is telling you how far from the corner that the arc is created. So if you want just slightly rounded corners you'd use a smaller value. A DecoratedBox that's 80pt x 30pt might take a 7pt circular radius. A circle who's radius extends from both the top and adjacent side by 7pts. If you applied a circular radius that was larger than the shortest available side that's where you run into the half circle. For this, a radius of 15pt and larger would create that effect.

    If you're looking for a box that might fractionally decide it's rounded corners for you then you could easily create a class that wrapped a DecoratedBox inside of a LayoutBuilder to figure out the shortest side and determine a fractional radius based off of that length.