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
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
Do like & share my Facebook page. if you find this post helpful. Thank you!!
Related Articles:
- How to Install Flutter in windows 10 | With videos guide
- How to Setup Space Between Elements In Flutter
- Integrating an API into a Flutter – Working with REST APIs
- Create a simple splash screen in Flutter
- Android Projects with Source Code
- Flutter Interview Questions
- School Database Management System Project
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 !