如何使用 Material Design 卡片制作陰影？

Question

這是我想要的結果：

Answer 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 正是您所需要的。 我希望這將有所幫助。

Answer 2

我知道的兩種制作帶有陰影的卡片的方法。 一個帶有內置卡片小部件，另一個使用容器小部件

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

2. 使用容器小部件

 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 和 offset 以改變容器的陰影

Answer 3

您可以將容器與 boxshadow 一起使用。 您可以使用下面的 class 將卡片效果存檔到容器中。

class CustomCard extends StatelessWidget {
  const CustomCard(
      {Key? key, required this.child, this.height, this.width, this.redius})
      : super(key: key);
  final Widget child;
  final double? height;
  final double? width;
  final double? redius;
  @override
  Widget build(BuildContext context) {
    return Container(
      child: child,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.all(
          Radius.circular(redius ?? 5),
        ),
        boxShadow: <BoxShadow>[
          BoxShadow(
            color: Color.fromRGBO(230, 230, 230, 0.9),
            blurRadius: redius ?? 5,
            offset: Offset(0.0, 4.0),
          ),
        ],
      ),
      margin: EdgeInsets.all(5.0),
      height: height ?? 150.0,
      width: width ?? 100.0,
    );
  }
}