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.

 Card(
    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 :

  Container(
    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,
   child:
  );

Which will generate output like below :

Elevation in Card

Conclusion:

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.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com 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.