top of page

Card Widget in Flutter

A Card in Flutter is a material design concept that acts as a container for holding items such as text, images, and actions. It is a flexible and customizable widget that can be used to create a variety of designs and styles.



The Flutter framework provides a Card widget that makes it easy to create beautiful and functional cards. Some of the key features of the Card widget include:

  • Customizable background color and shadow

  • Supports adding an image, title, and description text

  • Supports customizing the padding and margin of the card

  • Can contain other widgets, such as buttons and text fields, for user interaction

  • Here is an example of how to create a simple Card widget in Flutter:

Properties

The properties of the Card widget are as follows:

  • elevation: The amount of elevation for the card, which controls the size of the shadow.

  • shape: The shape of the card. This property takes a ShapeBorder object, such as RoundedRectangleBorder or CircleBorder, that defines the shape of the card.

  • color: The background color of the card. If this property is not set, the card will use the default background color defined by the current Theme.

  • borderOnForeground: A boolean value that determines whether the card's border is painted on top of its child widget or underneath it.

  • borderRadius: The radius of the corners of the card. This property takes a BorderRadius object that defines the radii of the card's corners.

  • border: The border of the card. This property takes a Border object that defines the border of the card.

  • semanticContainer: A boolean value that determines whether the card should act as a semantic container for its child widget. If this property is true, the card's child widget will be labelled as a single semantic entity.

  • clipBehavior: The behaviour of the card when its child widget exceeds its bounds. This property takes a Clip object, such as Clip.none or Clip.antiAlias.

  • margin: The margin of the card, determines the amount of space around the card.

  • child: The child widget of the card, which is displayed inside the card's boundaries.



Example

We will create a card widget in Flutter. It will contain an Image and a Text widget.


First, create a Card Widget. We have wrapped it inside the Center widget.

Center(
  child: Card(),
),

Next, we add an elevation to the Card widget. We also add a Colour to the Card.

Card(
  elevation:20,
  color: Colors.blueAccent,
),

Now we add a widget to the child. It will contain a Column widget that will have an Image and Text. The Column widget will be wrapped inside the Padding widget so that we can add some padding to it.

Card(
  elevation:20,
  color: Colors.blueAccent,
  child: Padding(
    padding: EdgeInsets.all(15),
    child: Column(
      children: [
        
      ]
    )
  ),
),

Inside the Column widget, we place an Image widget and a Text widget. 



Card(
  elevation: 20,
  color: Colors.blueAccent,
  child: Padding(
    padding: const EdgeInsets.all(20),
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      mainAxisSize: MainAxisSize.min,
      children: [
        Image.network(
          'https://picsum.photos/400/300',
          width: 200,
          height: 150,
        ),
        const Text(
          "Welcome to AllAboutFlutter",
          textAlign: TextAlign.center,
          style: TextStyle(
            color: Colors.white,
            fontSize: 18,
          ),
        ),
      ],
    ),
  ),
),

Output



Here is the full code.

https://dartpad.dev/?id=c3dda8b664d27077db17766313e9e8b8




bottom of page