Brand

Flutter Card

A card is a Paper representing the information related to each other, examples are album, a geographical location, contact details, etc. A card is a box which has a shadow and rounded corners. We use it to show the content and actions pushed in a single object. In this Section, we are going to learn how to use and customize a card widget.

Card is very simple to use. card constructor is used and then passed a widget as a child property to display the content and actions inside the object. This is a code simple for card:

return Card(  
    child: Column(  
      mainAxisSize: MainAxisSize.min,  
      children: [  
        const ListTile(  
          leading: Icon(Icons.album, size: 45),  
          title: Text('Sonu Nigam'),  
          subtitle: Text('Best of Sonu Nigam Song'),  
        ),  
      ],  
    ),  
);

Flutter Card Properties

Card Widget can be customized using the following properties. Some of the properties are:

Attribute Name Descriptions
borderOnForeground Paints the border of the front of a child. By default, it’s true.
color Changes color the card’s background.
elevation Used to increase or decrease the shadow size below the card..
margin Used to add the card’s outer space.
shape Used to customize the shape of the card.
shadowColor Used to change the color of the shadow of a card.
clipBehavior Used to clip the content of the card.

Lets customize the card’s size, we have to wrap the card in a Container or SizedBox widget. Here, we can set the card’s height and width using the container or sizedbox property:

Container(  
    width: 150,  
    height: 150,  
    child: Card(  
       ...  
    ),  
  )
Example:

In this example, we will be using a card widget that will show the album information and two actions buttons Play and Pause.

import 'package:flutter/material.dart';  
  
void main() => runApp(MyApp());  
  
/// This Widget is the main application widget.  
class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      home: Scaffold(  
        appBar: AppBar(title: Text('Flutter Card Example')),  
        backgroundColor: Colors.yellow,  
        body: MyCardWidget(),  
      ),  
    );  
  }  
}  
  
/// This is the stateless widget.  
class MyCardWidget extends StatelessWidget {  
  MyCardWidget({Key key}) : super(key: key);  
  
  @override  
  Widget build(BuildContext context) {  
    return Center(  
      child: Container(  
        width: 300,  
        height: 200,  
        padding: new EdgeInsets.all(10.0),  
        child: Card(  
          shape: RoundedRectangleBorder(  
            borderRadius: BorderRadius.circular(15.0),  
          ),  
          color: Colors.red,  
          elevation: 10,  
          child: Column(  
            mainAxisSize: MainAxisSize.min,  
            children: [  
              const ListTile(  
                leading: Icon(Icons.album, size: 60),  
                title: Text(  
                  'Sonu Nigam',  
                  style: TextStyle(fontSize: 30.0)  
                ),  
                subtitle: Text(  
                  'Best of Sonu Nigam Music.',  
                  style: TextStyle(fontSize: 18.0)  
                ),  
              ),  
              ButtonBar(  
                children: [  
                  RaisedButton(  
                    child: const Text('Play'),  
                    onPressed: () {/* ... */},  
                  ),  
                  RaisedButton(  
                    child: const Text('Pause'),  
                    onPressed: () {/* ... */},  
                  ),  
                ],  
              ),  
            ],  
          ),  
        ),  
      )  
    );  
  }  
}
Output

flutter-card-demo

Previous
Next
Subscribe Now