figma_squircle 0.5.0 copy "figma_squircle: ^0.5.0" to clipboard
figma_squircle: ^0.5.0 copied to clipboard

outdated

A new Flutter package project.

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 #