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
