Figma 圆角平滑

image

Flutter 对 Figma 的圆角平滑实现。

用法

装饰

可以将 SmoothRectangleBorder 提供给带有自定义 SmoothBorderRadius 的普通 ShapeDecoration。

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

单独

每个角都可以具有独立的平滑度和半径。

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

裁剪

要用平滑的矩形裁剪任何小部件，请使用 ClipSmoothRect。

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

感谢

GitHub

https://github.com/aloisdeniel/figma_squircle