Flutter Card Widget with Example – In this tutorial we will learn how to use card in flutter with example. Learn how to customize it’s look by styling it with different properties.

Flutter Card Widget

Card widget in flutter is a sheet of Material used to represent all the similar information in a single block. For example, a card can be used to design an album cover as it will represent all the songs that belong to that album. A card will have rounded corners and is elevated by default. We can change the value of elevation as per our requirement. While designing a card we can use elements like text, images, videos, text buttons etc. Cards make the application UI more beautiful and eye-catching to the user.

Creating And Showing Card In Flutter

<img width=

To create and display a card in flutter we have to call the constructor of the card class provided by flutter. There are no required properties for a card widget but to show the card we have to provide the child property with a widget. Without providing the child with a widget we cannot see the card.

Flutter Card Constructor :

Card(
    {Key? key,
    Color? color,
    Color? shadowColor,
    double? elevation,
    ShapeBorder? shape,
    bool borderOnForeground,
    EdgeInsetsGeometry? margin,
    Clip? clipBehavior,
    Widget? child,
    bool semanticContainer}
) 

Below is the example code to add a card to our flutter application.

Card(
        child: ListTile(
          title: Text("Codesinsider.com"),
        ),
     )

Flutter Card Properties

The properties of the card widget are:

  • color
  • elevation
  • shadowColor
  • shape
  • margin

color / backgroundColor

We will use this property to change the background color of the card. It takes Color as value.

Card(
          child: ListTile(
            title: Text("Codesinsider.com", style: TextStyle(color: Colors.white),),
          ),
          color: Colors.green,
        )

elevation

We will use this property to add or change elevation of the card. It takes double as value.

Card(
          child: ListTile(
            title: Text("Codesinsider.com"),
          ),
          elevation: 8,
        )

shadowColor

To change the color of the shadow that appears when the card is elevated we will use shadow color property. It takes color as value.

Card(
          child: ListTile(
            title: Text("Codesinsider.com"),
          ),
          elevation: 8,
          shadowColor: Colors.green,
        )

shape

To change the shape of the card we will use this property. By using shape property we can add border, change border color, make rounded corners, circular card etc. In the below example i’ m using BeveledRectangleBorder shape. If you want to try other shapes.

Card(
          child: ListTile(
            title: Text("Codesinsider.com"),
          ),
          elevation: 8,
          shadowColor: Colors.green,
          shape: BeveledRectangleBorder(
              borderRadius: BorderRadius.circular(15)
          ),
        )

margin

To provide margin to card we will use this property. It takes Edge Insets Geometry as value.

Card(
          child: ListTile(
            //leading: Icon(Icons.music_note),
            title: Text("Codesinsider.com"),
          ),
          elevation: 8,
          shadowColor: Colors.green,
          margin: EdgeInsets.all(20),
        )

Container(
          height: 200,
          width: 200,
          child: Card(
            child: ListTile(
              title: Text("Codesinsider.com"),
            ),
            elevation: 8,
            shadowColor: Colors.green,
            margin: EdgeInsets.all(20),
          ),
        )

rounded corners

There is no property available for making rounded corners so we will use shape property to make rounded corners.

Card(
          child: ListTile(
            title: Text("Codesinsider.com"),
          ),
          elevation: 8,
          shadowColor: Colors.green,
          margin: EdgeInsets.all(20),
          shape:  OutlineInputBorder(
              borderRadius: BorderRadius.circular(10), 
              borderSide: BorderSide(color: Colors.white)
          ),
        )

border and border color

To add border and border color i’ ve used outlineInputBorder since there is no property in card widget to add border and border color. To try other shapes and borders for refere

Card(
          child: ListTile(
            title: Text("Codesinsider.com"),
          ),
          elevation: 8,
          shadowColor: Colors.green,
          margin: EdgeInsets.all(20),
          shape:  OutlineInputBorder(
              borderRadius: BorderRadius.circular(10),
              borderSide: BorderSide(color: Colors.green, width: 1)
          ),
        )

circular card

To make a circular card we will use CircleBorder shape.

Card(
          child: Container(
            height: 160,
            width: 160,
            child: Center(
              child: ListTile(
                title: Text("Codesinsider.com"),
              ),
            ),
          ),
          elevation: 8,
          shadowColor: Colors.green,
          margin: EdgeInsets.all(20),
          shape: CircleBorder(side: BorderSide(width: 1, color: Colors.white),
          ),
        )

Flutter Card Example

Let’s see an example where we design a music album card with white background color, an image to left and some text in the right. Below the text we will add two Text buttons play and add to queue.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_app_learning/NavDrawer.dart';
import 'package:flutter_app_learning/contact.dart';
void main()
{
  runApp(MyApp());
}
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Learning',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: MyHomePage(),
    );
  }
}
 
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState()
  {
    return _MyHomePageState();
  }
}
 
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Card"),
      ),
        body:Card(
          child:Container(
            height: 100,
            color: Colors.white,
            child: Row(
              children: [
                Center(
                  child: Padding(
                    padding: EdgeInsets.all(10),
                    child: Expanded(
                      child:Image.asset("assets/images/shape_of_you.png"),
                      flex:2 ,
                    ),
                  ),
                ),
                Expanded(
                  child:Container(
                    alignment: Alignment.topLeft,
                    child: Column(
                      children: [
                        Expanded(
                          flex: 5,
                          child: ListTile(
                            title: Text("Shape Of You"),
                            subtitle: Text("Ed Sheeran"),
                          ),
                        ),
                        Expanded(
                          flex: 5,
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.end,
                            children: [
                              TextButton(
                                child:Text("PLAY"),
                                onPressed: ()
                                {},
                              ),
                              SizedBox(width: 8,),
                              TextButton(
                                child: Text("ADD TO QUEUE"),
                                onPressed: (){},
                              ),
                              SizedBox(width: 8,)
                            ],
                          ),
                        )
                      ],
                    ),
                  ),
                  flex:8 ,
                ),
              ],
            ),
          ),
          elevation: 8,
          margin: EdgeInsets.all(10),
        ),
    );
  }
}

Output :

That brings an end to the tutorial on how to create and display or show Card in flutter. We have also seen an example where we’ve used Card widget and customized it. Let’s catch up with some other widget in the next post. Have a great day!!

Do like & share my Facebook page. Subscribe to newsletter if you find this post helpful. Thank you!!

Additional Reading

READ MORE

If you found this post useful, don’t forget to share this with your friends, and if you have any query feel free to comment it in the comment section.

Thank you 🙂 Keep Learning !


DeepCrazyWorld

Hey, I'm Deepika a professional blogger, web designer, Android developer and software engineer. I like to gain every type of knowledge that's why i have done many courses in different fields like engineering and technology. I love thrills and travelling to new places and hills.

0 Comments

Leave a Reply

Avatar placeholder

Your email address will not be published.