Flutter业务开发常用小技巧（样式布局篇）

阴影样式中flutter和css对应关系

UI给出的css样式

width: 75px;
height: 75px;
background-color: rgba(255, 255, 255, 1);
border-radius: 4px;
box-shadow: 0px 0.5px 5px 0px rgba(0, 0, 0, 0.08);

flutter样式布局

Container(
      constraints: BoxConstraints.tightFor(width: 75, height: 75),
      margin: EdgeInsets.only(left: 0.5, right: 0.5, top: 0.5, bottom: 3),
          //阴影布局
      decoration: BoxDecoration(
        color: WBColors.white,
        borderRadius: BorderRadius.circular(8),
        boxShadow: [
          BoxShadow(
            color: Color.fromRGBO(0, 0, 0, 0.08),
            offset: Offset(0, 0.5),
            blurRadius: 5,
            spreadRadius: 0
          )
        ]
      ),
      alignment: Alignment.center,
      child: ...,
    )

对应关系

属性	css（box-shadow）	flutter（boxShadow）
offset	前两个值