Quick Tip – How to add an Image inside Card in Flutter

How to use Image inside Card in Flutter

To use an image inside a Card widget in Flutter, you can include the image as the child of the Card widget. Here’s an example of how you can do this:

Card(
  child: Image.network('https://picsum.photos/200/300'),
),

This will create a card with the image as its content. You can customize the appearance of the card using the various properties available in the Card widget, such as elevation, shape, and color.

Here’s an example of a more customized card with an image:

Card(
  elevation: 5.0,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10.0),
  ),
  child: Image.network('https://picsum.photos/200/300'),
),

This card has an elevation of 5 pixels, a rounded border with a radius of 10 pixels, and an image as its content.

You can also use the ClipRRect widget to add a radius border to the image, as well as the Container widget to add padding or a background colour to the card.

Card(
  elevation: 5.0,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10.0),
  ),
  child: Container(
    padding: EdgeInsets.all(10.0),
    child: ClipRRect(
      borderRadius: BorderRadius.circular(10.0),
      child: Image.network('https://picsum.photos/200/300'),
    ),
  ),
),

This card has the same rounded border and elevation as before, but it also has a padded container with a radius border around the image.

First I placed Card inside SizedBox to use a fixed size and then I used Container with DecorationImage.

              SizedBox(
                width: MediaQuery.of(context).size.width,
                height: 100,
                child: Card(
                  semanticContainer: true,
                  clipBehavior: Clip.antiAliasWithSaveLayer,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10.0),
                  ),
                  elevation: 10,
                  margin: EdgeInsets.symmetric(vertical: 5, horizontal: 20),
                  child: Container(
                    padding: const EdgeInsets.all(10.0),
                    decoration: BoxDecoration(
                      border: Border.all(color: Colors.black, width: 1.0,),
                      borderRadius: BorderRadius.circular(10),
                      image: DecorationImage(
                        image: AssetImage('assets/FlutterAssets_logo_BG.jpg'),
                        fit: BoxFit.fitWidth,
                      ),
                    ),
                    child: Text("YOUR TEXT", style: TextStyle(fontWeight: FontWeight.w900),),
                  ),
                ),
              ),

Here is an example of a Card widget with more customized properties:

Card(
  elevation: 5.0,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10.0),
  ),
  child: Container(
    padding: EdgeInsets.all(10.0),
    child: ClipRRect(
      borderRadius: BorderRadius.circular(10.0),
      child: Image.network('https://picsum.photos/200/300'),
    ),
  ),
  semanticContainer: true,
  clipBehavior: Clip.antiAliasWithSaveLayer,
  margin: EdgeInsets.all(10.0),
  color: Colors.grey[200],
  shadowColor: Colors.grey[800],
  borderOnForeground: true,
),

In this example, we have added the following properties to the Card widget:

• semanticContainer: This property specifies whether the card is a semantic container. If set to true, the card will be included in the semantics tree, and users will be able to interact with it using accessibility tools.
• clipBehavior: This property specifies the clip behavior of the card. The default value is Clip.none, which means that the card is not clipped. In this example, we have set it to Clip.antiAliasWithSaveLayer, which clips the card using anti-aliasing and saves the resulting output to a layer. This can improve the performance of the card by avoiding unnecessary repaints.
• margin: This property specifies the margin around the card. In this example, we have set it to 10 pixels on all sides.
• color: This property specifies the background colour of the card. In this example, we have set it to a light grey color.
• shadowColor: This property specifies the colour of the shadow cast by the card. In this example, we have set it to a dark grey colour.
• borderOnForeground: This property specifies whether the card’s border should be painted on top of its child (the image in this case). If set to true, the border will be painted on top of the child. If set to false, the border will be painted behind the child.

These are just a few of the many properties available for customizing the appearance of a Card widget in Flutter. You can find a complete list of properties and their descriptions in the Flutter documentation.

You can read more about Images in Flutter in this post:

Flutter Basics – How to use an image in Flutter