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

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