Flutter How to create Card with background Image?

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:

enter image description here


You can wrap your image in ClipRRect

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

I also wanted to add a background image to my Card and I found a way. It's by wrapping a Card into Container and then using the BoxDecoration to add DecorationImage in the image property and then adding Image. A change is to be made in Card as well otherwise you will just see the inserted image behind the card, you have to make it transparent. There are different ways to achieve it.

Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(15),
                image: DecorationImage(
                  image: NetworkImage("https://images.unsplash.com/photo-1579202673506-ca3ce28943ef"),
                  fit:BoxFit.cover
                ),
              ),child: Card(
                  color: Colors.transparent,
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
                  shadowColor: Colors.grey,
                  child: Text('Heyyyy')))

You can anytime wrap Card in Opacity widget and change its Transparency as per your need and also providing colors that way with a similar image might turn out to look aesthetic. Here is how it looks!

Tags:

Dart

Flutter