How to set Background Image for Card in Flutter

The Card is one of the useful UI components in the mobile app. It helps to display information in a convenient way. In this blog post, let’s learn how to set a Card background image in Flutter.

The Card widget doesn’t have a property for this. Hence, we should add a widget that supports setting the background image as the child of the Card. We use the Container widget and the BoxDecoration class.

See the following code snippet.

Card(
        margin: const EdgeInsets.all(10),
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
        clipBehavior: Clip.antiAliasWithSaveLayer,
        elevation: 5,
        child: Container(
          decoration: const BoxDecoration(
            image: DecorationImage(
              image: AssetImage("images/sky.jpg"),
              fit: BoxFit.cover,
              alignment: Alignment.topCenter,
            ),
          ),
          child: const ListTile(
            title: Text('Demo Title'),
            subtitle: Text('This is a simple card in Flutter.'),
          ),
        ),
      ),

You will get the following output.

flutter card background image

If you want to add borders then see this tutorial.

Following is the complete code.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        // colorSchemeSeed: const Color(0xff6750a4),
        // useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Card with image background'),
      ),
      body: Card(
        margin: const EdgeInsets.all(10),
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
        clipBehavior: Clip.antiAliasWithSaveLayer,
        elevation: 5,
        child: Container(
          decoration: const BoxDecoration(
            image: DecorationImage(
              image: AssetImage("images/sky.jpg"),
              fit: BoxFit.cover,
              alignment: Alignment.topCenter,
            ),
          ),
          child: const ListTile(
            title: Text('Demo Title'),
            subtitle: Text('This is a simple card in Flutter.'),
          ),
        ),
      ),
    );
  }
}

That’s how you set a background image for the Card in Flutter.

If you want to set a gradient background then see this tutorial.

Leave a Comment