×
×

Spread the love

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

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,
        )

Output :

flutter card background color

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,
        )

Output :

card elevation in flutter

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,
        )

Output :

flutter card shadow color

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 refer flutter RaisedButton example.

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

Output :

flutter card shape

margin

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

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

Output :

flutter card margin

height and width

Since card widget has no height and width properties we will use container and add card as child to it. The card will take the height and width of the container.

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

Output :

flutter card height and width

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)
          ),
        )

Output :

flutter card rounded corners

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)
          ),
        )

Output :

flutter card border and border color

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),
          ),
        )

Output :

flutter card circular shape

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 :

flutter card example 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!!

Reference : Flutter Official Documentation


Spread the love

AUTHOR

Naresh Pradeep

Hey there! I am the founder of CodesInsider and android developer.I love to code and build apps.


Related Posts

Leave a Reply

Your email address will not be published.