US Office

1176 Shadeville Rd, Crawfordville Florida 32327, USA

 +1 (850) 780-1313

India Office

Office No. 501, Shree Ugati Corporate Park, Gandhinagar - 382421, Gujarat, India

[email protected]

Card Widget – Flutter Widget Guide By Flutter Agency

Card Widget - Flutter Widget Guide By Flutter Agency

Card Widget – Flutter Widget Guide By Flutter Agency

Card Widget is used to show data in data representation in Card format. Dart provides ready to user material class.

What is Card Widget?

Card Widget contains content and about a single subject. Card layouts can change to support the types of content they contain. Let discuss some commonly found that variety.

How to use Card Widget in Flutter?

The following code snippet tells us how to implement Card Widget in Flutter.

    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        const ListTile(
          leading: Icon(Icons.account_circle, size: 50),
          title: Text('Title Text'),
          subtitle: Text('Secondary Text'),

Which will generate output like as below :


Cards in flutter

Height: As Cards doesn’t provide options to adjust the height, width the easiest way to set size is by wrapping it in a Container Widget by specifying the desired height and width to Container Widget.

The code snippet is as below :

    height: 100,
    child: Card(
   // To do

Color: Color option is used to set the color to Card. Users can set Predefined color or set RGB Value.

  return Card(
    color: Colors.orangeAccent,

Which will generate output like below :


Color to Card

Shape: By Default Card takes RoundedRectangleBorder with a radius of 4.0. Users can set the ShapeBorder object. Code Snippet for it is as below :

return Card(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(12.0),

Which will have an output like below :


Shape to Card

Shadow: Users can make use of elevation to show Shadow to Card. The bigger the value, the bigger the shadow distance. Code Snippet for it as below :

return Card(
    elevation: 10,

Which will generate output like below :


Elevation in Card


In this article, we have been through What is Card Widget in Flutter along with how to implement it in a Flutter.

Thanks for reading.
Do let us know if you need any assistance. is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc. is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Post a Comment