How to use Flutter Card Widget

Let’s find the answer to the question of what is Flutter card widget and how to use it to make your Flutter app more professional and visually appealing for its users.

We’ll understand the parameters of the card widget Flutter with proper code examples and easy explanations so it’s easy for you to implement in your own Flutter code.

What is the Flutter Card Widget?

This is actually a box that looks like it’s raised from the other items. It can hold Flutter widgets like text, buttons, etc.

We can change the appearance of card Flutter widget by giving it a custom shadow, giving it a color, or playing with its other parameters which we will discuss practically.

The use of Flutter card widget is when you want to show something on a small portion of the screen to make it look beautiful like image with details(name, age, etc), a product with details, and many more.

Let’s now understand this Flutter widget with easy Flutter code examples.

Syntax

Card()

This is the simple syntax of the card widget in Flutter app. Let’s now understand its parameters to design this card.

Parameter of Card Flutter Widget

• child
• color
• elevation
• margin
• shape
• borderOnForeground

Examples to understand Flutter Card Widget Practically

Example 1: ‘child’ parameter

Card(
      child: Text('I am inside Flutter Card'),
          )

This is the most important parameter of the card widget. It takes a Flutter widget like text, textformfield widget, Flutter SingleChildScrollView, etc. So for demonstration, I passed it a text widget. You can see in the above image that by default the card looks like this.

Example 2: ‘color’ parameter

color: Colors.blue

By using the color parameter, we can change the Flutter card color. In example 1, we can see the default Flutter card background color. In this example, we passed a blue color to it and in the above image the background color of card is now blue.

You can pass color code to it as well ‘Color(0xff758574)’ or give shade to it like ‘Colors.blue.shade100’. You can use any method you like to customize its color.

Example 3: ‘elevation’ Parameter to Give shadow to Card

elevation: 10

We can use the elevation parameter to change the height of Flutter card shadow or you can say control the effect of shadow. The elevation takes a double value but we can pass integer too. By default, the card has some shadow(maybe 1) but we passed it a value of 10 and now you can see that the card looks more elevated. If you pass it value 0, then the shadow will disappear.

Example 4: ‘margin’ parameter of Card Widget Flutter

margin: EdgeInsets.all(21)

This parameter is used to give a space between the card and its parent widget. To demonstrate it, I’ve wrapped this Flutter card widget with a container. Then I used the ‘all()’ method of ‘EdgeInSets’ and gave it a value of 21. The ‘all()’ method means to give a margin from all sides. As a result, we can see that the card now has some space from its parent container widget.

You can use other methods of ‘EdgeInSets’ as well like only(), symmetric, etc. to give your desired margin to the card.

Example 5: ‘shape’ parameter

 shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(21))

The parameter shape is used to change the shape of card edges. In the above code, I passed it a round rectangle border class with a circular border radius. This will change all its 4 edges to the same circular value. I also wrapped text with a padding widget and gave it some padding so it’ll look good inside card.

You can use other methods of border radius as well like this.

Example 5.1: only() method

BorderRadius.only(
         topLeft: Radius.circular(21),
         bottomRight: Radius.circular(29))

By using this method, we can give same or different circular values to each edge of Flutter card widget.

Example 5.2: horizontal() method

BorderRadius.horizontal(left: Radius.circular(51))

This will give the card widget a circular radius using its horizontal edges like left(top left, bottom left) and right(top right, bottom right). I want you to play with its other methods as well.

You can pass other classes to the shape parameter as well. See below.

Example 5.3: Beleved shape to Card widget borders

 shape: BeveledRectangleBorder(borderRadius: BorderRadius.circular(15))

Example 5.4: Continuous shape of card borders

shape: ContinuousRectangleBorder(borderRadius: BorderRadius.circular(41))

You can see how we can give beautiful shapes to the Flutter card border. In the second example, you can see that both sides have a little peak as well. Try with different values to get the desired shape. Also, play with these class’s other properties of border-radius as well as we have done in the above examples.

Example 6: borderOnForeground Parameter

This parameter in the Card widget specifies whether the card’s border is drawn in front of or behind the card’s child content. It takes a boolean value and it is true by default.

Example 6.1: borderOnForeground is true

Card(
      borderOnForeground: true, // Border shown in front of content
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(12),
        side: BorderSide(color: Colors.red, width: 4),
      ),
      child: Container(
        height: 150,
        width: 150,
        color: Colors.green,
        child: Center(child: Text('Border Front')),
      ),
    )

The card’s red border is drawn and displayed on top of the content inside the card. This means that the border will overlap the green container and the text, which will make the border visually prominent and potentially obscure a small part of the content.

Example 6.2: borderOnForeground is false

borderOnForeground: false

Here, I passed ‘false’ to this border on the foreground parameter. It will draw the border behind the card’s child content, so it won’t overlap or obscure the content.

Conclusion

I hope the customization of different parameters of Flutter card widget was easy for you. I’ve tried very easy examples with explanations to make things super easy to learn.

If you still find any issues, then comment down or email me. I’d be happy to help you.

Thank you and must visit my other articles on other important Flutter widgets as well.