How can I make a shadow with a material design card?
7,304
Solution 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.
Solution 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
Author by
Wisit Phusi
Updated on December 07, 2022Comments
-
Wisit Phusi over 1 year
-
Andrey Turkovsky over 5 yearsDid you try
Card
orMaterial
?
-