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.
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)),
),
)
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
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,
);
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.