Flutter How to create Card with background Image?

Question

I'm trying to create a Card with an Image as a background. The problem is, the Image overflows the Card, so the Corners of the don't show up.

I need to either set the Image as a background of the card or set the cards overflow behavior to no overflow. But I couldn't find any properties for that.

Here is my Card:

Widget _buildProgrammCard() {   return Container(     height: 250,     child: Card(       child: Image.asset(         'assets/push.jpg',         fit: BoxFit.cover,       ),       shape: RoundedRectangleBorder(         borderRadius: BorderRadius.circular(10.0),       ),       elevation: 5,       margin: EdgeInsets.all(10),     ),   ); 

And it looks like this:

Answer 1

Other Way Without using - ClipRRect Widget - is To set semanticContainer: true, of Card Widget.

Example Code as Below:

Card(           semanticContainer: true,           clipBehavior: Clip.antiAliasWithSaveLayer,           child: Image.network(             'https://placeimg.com/640/480/any',             fit: BoxFit.fill,           ),           shape: RoundedRectangleBorder(             borderRadius: BorderRadius.circular(10.0),           ),           elevation: 5,           margin: EdgeInsets.all(10),         ), 

Output:

Answer 2

You can wrap your image in ClipRRect

ClipRRect(   borderRadius: BorderRadius.vertical(top: Radius.circular(10.0)),   child: Image.network(...), )