How can I make a shadow with a material design card?

Question

This is the result that I would like to have :

Answer 1

Make a custom card

///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 is what you need. I hope this will help.

Answer 2

Two ways I know to make a card with shadow. one with the built-in Card Widget and other Using the Container Widget

1.Using Card Widget

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. Using Container Widget

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

modify BlurRadius and offset to alter the shadow of the container

Answer 3

You can use container with boxshadow. you can use below class to archive card effect in container.

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