如何使用材料设计卡制作阴影？

Posted 2023-03-28

【中文标题】如何使用材料设计卡制作阴影？

【英文标题】：How can I make a shadow with a material design card?

【发布时间】：2019-04-20 05:32:26

【问题描述】：

这是我想要的结果：

【问题讨论】：

你试过Card或Material吗？

【参考方案1】：

制作自定义卡片

///custom cards

  Widget card(String image) 
    return  Container(
        child:  Image.asset(
              image,
              fit: BoxFit.cover,
            ),

        decoration: BoxDecoration(
          border: Border.all(color: Colors.blue, width: 2.0),
          color: Colors.white,
          borderRadius: BorderRadius.all(
            Radius.circular(5.0),
          ),
          boxShadow: <BoxShadow>[
            new BoxShadow(
              color: Colors.blue,
              blurRadius: 3.0,
              offset: new Offset(0.0, 3.0),
            ),
          ],
        ),
        margin: EdgeInsets.all(5.0),
        height: 150.0,
        width: 100.0,

    );
  

Box Shadow 是您所需要的。我希望这会有所帮助。

【参考方案2】：

我知道用阴影制作卡片的两种方法。一种是内置Card Widget，另一种是使用Container Widget

1.使用卡片小部件

SizedBox.expand(
          child: Card(
            margin: EdgeInsets.all(10),
            elevation: 3.0,// this field changes the shadow of the card 1.0 is default
            shape: RoundedRectangleBorder(
                side: BorderSide(width: 0.2),
                borderRadius: BorderRadius.circular(20)),
          ),
        )

使用容器小部件

 Container(
           margin: EdgeInsets.all(10),
           decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20),
              border: Border.all(width: 0.2),
              boxShadow: [
                BoxShadow(
                    blurRadius: 2.0,
                    spreadRadius: 0.4,
                    offset: Offset(0.1, 0.5)),
              ],
              color: Colors.white),
              )

修改 BlurRadius 和偏移量以改变容器的阴影