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:

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!

For those of you who want to show the Card corner to draw above the image now use

borderOnForeground: true

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Ejemplo"),
        ),
        body: Center(child: SwipeList()));
  }
}

class SwipeList extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return ListItemWidget();
  }
}

class ListItemWidget extends State<SwipeList> {
  List items = getDummyList();

  @override
  Widget build(BuildContext context) {
    return Container(
        child: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            return Dismissible(
              key: Key(items[index]),
              background: Container(
                alignment: AlignmentDirectional.centerEnd,
                color: Colors.red,
                child: Icon(
                  Icons.delete,
                  color: Colors.white,
                ),
              ),
              onDismissed: (direction) {
                setState(() {
                  items.removeAt(index);
                });
              },
              direction: DismissDirection.endToStart,
              child: Card(
                  margin: EdgeInsets.only(left: 10, right: 10, top: 12),
                  elevation: 8,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(12.0),
                  ),
                  semanticContainer: true,
                  clipBehavior: Clip.antiAliasWithSaveLayer,
                  child: Container(
                    height: 135,
                    child: Stack(children: <Widget>[
                      Positioned(
                          top: 0,
                          left: 0,
                          right: 0,
                          child: Container(
                              color: Colors.white,
                              child: Column(
                                children: <Widget>[
                                  Image.network(
                                    'https://placeimg.com/640/480/any',
                                    fit: BoxFit.fitHeight,
                                  ),
                                ],
                              ))),
                      Positioned(
                          top: 20,
                          left: 0,
                          right: 0,
                          child: Container(
                            child: Column(
                              children: <Widget>[
                                Text(items[index],
                                    style: TextStyle(
                                        fontWeight: FontWeight.bold,
                                        fontSize: 25,
                                        color: Colors.white),
                                    textAlign: TextAlign.center),
                              ],
                            ),
                          )),
                    ]),
                  )),
            );
          },
        ));
  }

  static List getDummyList() {
    List list = List.generate(5, (i) {
      return "Item ${i + 1}";
    });
    print(list);
    return list;
  }
}