Figma Squircle

Flutter implementation of Figma's corner smoothing.

Usage

Decoration

The SmoothRectangleBorder can be provided to a regular ShapeDecoration with a custom SmoothBorderRadius.

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

Only

Each corner can have an independent smoothing and radius.

SmoothBorderRadius.only(
    topLeft: SmoothRadius(
        cornerRadius: 10,
        cornerSmoothing: 1,
    ),
    topRight: SmoothRadius(
        cornerRadius: 20,
        cornerSmoothing: 0.4,
    ),
    bottomLeft: SmoothRadius(
        cornerRadius: 5,
        cornerSmoothing: 0.8,
    ),
    bottomRight: SmoothRadius(
        cornerRadius: 30,
        cornerSmoothing: 0.6,
    ),
),

Clip

To clip any widget with a smooth rectangle, use the ClipSmoothRect.

ClipSmoothRect(
    radius: SmoothBorderRadius(
        cornerRadius: 10,
        cornerSmoothing: 1,
    ),
    child: Container(
        color: Colors.red,
        width: 100,
        height: 100,
    ),
)

Thanks

tienphaw/figma-squircle's React Native implementation
Figma team for publishing this article and MartinRGB for figuring out all the math behind it.
George Francis for creating Squircley, which was my introduction to squircles.

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting