如何把 CSS BoxShadow 转换为 Flutter BoxShadow

分享一个能快速把 CSS BoxShadow 转换为 Flutter BoxShadow 的方法

发布于  星期一，六月 10 2024

现状

设计师设计阴影效果后，开发人员查看样式代码然后进行还原。但是基本上现在市面上所有的设计软件，样式代码都是只支持 CSS、iOS、Android 这 3 种类型的代码。

如图：

css-box-shadow.png

当我们在 Flutter 中需要实现阴影效果时，并不能直接复制设计软件上的样式代码进行复用。

解决方法

我们可以使用 CSS to Flutter Box Shadow Converter - Instantly Convert Figma & CSS Shadows 这个网站帮我们自动把 CSS BoxShadow 的代码转换为 Flutter BoxShadow 的代码

把 CSS BoxShadow 的代码复制到中间的输入框内，点击【Convert】按钮进行转换，点击【Copy】按钮复制 Flutter 代码

image.png

Container(
      decoration: const BoxDecoration(
        boxShadow: [
          BoxShadow(
            offset: Offset(0, 4),
            blurRadius: 16,
            color: Color.fromRGBO(111, 159, 10, 0.2),
          ),
        ],
      ),
      child: YourWidget(),
)

注意：这个网站对 BoxShadow 的颜色的识别有些问题，有些时候还是得我们自己书写 BoxShadow 的颜色值

image.png

Container(
      decoration: const BoxDecoration(
        boxShadow: [
          BoxShadow(
            offset: Offset(0, 2),
            blurRadius: 4,
            // 此时需要自己手动加上颜色值
            color: Color.fromRGBO(0, 0, 0, 0.25),
          ),
        ],
      ),
      child: YourWidget(),
)
  • Flutter