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.

Your go-to hub for all things Flutter. Widgets, projects, code libraries, and more!

FlutterAgency – your one-stop platform for Flutter developers. Discover comprehensive widget guides, explore real-world projects, and access valuable code libraries, all in one place.

Nirali Patel

Written by Nirali Patel

Nirali Patel is a dedicated Flutter developer with over two years of experience, specializing in creating seamless mobile applications using Dart. With a passion for crafting user-centric solutions, Nirali combines technical proficiency with innovative thinking to push the boundaries of mobile app development.

ready to get started?

Fill out the form below and we will be in touch soon!

"*" indicates required fields

✓ Valid number ✕ Invalid number
our share of the limelight

as seen on