如何在颤动中设置盒子阴影

【问题标题】：how to set box shadow in flutter如何在颤动中设置盒子阴影
【发布时间】：2021-07-29 07:18:33
【问题描述】：

我有一个figma设计，我需要像这样设置盒子阴影。

Drop shadow
x 0, y : 1, B: 5, S: 0, #000000 30%

【问题讨论】：

标签： android ios flutter user-interface figma

【解决方案1】：

使用Container 小部件并从其decoration 属性设置boxShadow 属性。

代码示例

Container(
  height: 75,
  width: 150,
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(12),
    boxShadow: [
      BoxShadow(
        offset: Offset(0, 1),
        blurRadius: 5,
        color: Colors.black.withOpacity(0.3),
      ),
    ],
  ),
);

截图

Try the full code on DartPad

【讨论】：

【解决方案2】：

你可以使用 Container 和 BoxDecoration

Container(
      padding: EdgeInsets.symmetric(vertical: 1, horizontal: 8),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.3),
            offset: Offset(0, 1),
            blurRadius: 5,
            spreadRadius: 0,
          )
        ],
      ),
      child: Container(),
    );
  }

【讨论】：

我会检查并很快回来。谢谢