Flutter Card Implementation with Examples: Make a Beautiful Card

Flutter Card is very useful for displaying certain kinds of information on it. For example, You want to show the name, address, location of a place, album details e.t.c. on the card. In this entire article, you will know how to implement and design a beautiful flutter card.

How to Create a Flutter Card

There is a Card class in Flutter that allows you to create a Flutter Card. You will use Card() constructor with many attributes like a child, color, elevation, margin, shape, shadowColor e.t.c for designing the card. You will know about each of the attributes.

But before that Let’s create a Card with ListTile widget as its child widget. Run the below lines of code.

import 'package:flutter/material.dart';

class FlutterCardApp extends StatefulWidget {
  const FlutterCardApp({Key? key}) : super(key: key);

  @override
  _FlutterCardAppState createState() => _FlutterCardAppState();
}

class _FlutterCardAppState extends State {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Flutter Card App"),
        ),
        body: Center(
          child: Card(
            child: ListTile(
              title: Text("This is the title"),
              subtitle: Text("This is the subtitle"),
              leading: Text("This is leading wdiget"),
              trailing: Text("This is trailing widget"),
            ),
          ),
        ),
      ),
    );
  }
}

void main() {
  runApp(FlutterCardApp());
}

Output

How to Manipulate Flutter Card

In this section, you will know all the attributes that allow you to manipulate a Card in a flutter that can be used for making card beautiful.

1. color

The color attribute allows you to change the color of the card widget. Let’s change the color of the card to amber.

Card(
            color: Colors.amber, // changing the color of the card
            child: ListTile(
              title: Text("This is the title"),
              subtitle: Text("This is the subtitle"),
              leading: Text("This is leading wdiget"),
              trailing: Text("This is trailing widget"),
            ),
          ),

Output

2. elevation

If you want to add some shadow below the card then use it. It accepts double-type values. Add the below code to add some shadow to the card.

Card(
            color: Colors.amber,
            elevation: 20, // elevation of 5
            child: ListTile(
              title: Text("This is the title"),
              subtitle: Text("This is the subtitle"),
              leading: Text("This is leading wdiget"),
              trailing: Text("This is trailing widget"),
            ),
          ),

Output

3. shadowColor

Using the elevation attribute you can add shadow to the card. But what if you want to change the color of the shadow. The shadowColor attribute allows you to change the color of the shadow. Lets change the color of the shadow to red.

Card(
            color: Colors.amber,
            elevation: 20,
            shadowColor: Colors.green,// changing the color of shadow
            child: ListTile(
              title: Text("This is the title"),
              subtitle: Text("This is the subtitle"),
              leading: Text("This is leading wdiget"),
              trailing: Text("This is trailing widget"),
            ),
          ),

Output

4. margin

The margin attribute allows you add some empty space around the card. For example, I want to add some empty space of 20 logical pixels then I will use it as margin: EdgeInsets.all(20).

Card(
            color: Colors.amber,
            elevation: 20,
            shadowColor: Colors.green,
            margin: EdgeInsets.all(20),
            child: ListTile(
              title: Text("This is the title"),
              subtitle: Text("This is the subtitle"),
              leading: Text("This is leading wdiget"),
              trailing: Text("This is trailing widget"),
            ),
          ),

Output

5. shape

This attribute allows you to add a border to the card. It can be circular, Roundrectangular, e.t.c. Lets say I want to add Rounded rectangular border around the card. For this case, I have to define the shape with RoundedRectangleBorder(). Execute the below lines of code.

Card(
            color: Colors.amber,
            elevation: 20,
            shadowColor: Colors.green,
            shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
            margin: EdgeInsets.all(20),
            child: ListTile(
              title: Text("This is the title"),
              subtitle: Text("This is the subtitle"),
              leading: Text("This is leading wdiget"),
              trailing: Text("This is trailing widget"),
            ),
          ),

Output

These are the attributes provided by the Card() constructor for manipulating and designing a beautiful Card.  After Designing your card now you can use it in ListViwBuilder Widget which is used for scrolling. I hope you have liked this tutorial. If you are getting any doubt on it please contact us for more information.