Flutter Card Widget
The Flutter Card widget is one of the most versatile and commonly used widgets in Flutter development. If you’re building modern mobile applications, understanding how to implement and customize the Flutter Card widget is essential for creating visually appealing user interfaces. The Card widget in Flutter provides a clean, elevated surface that follows Material Design principles, making it perfect for displaying related information in a structured format.
The Flutter Card widget creates a material design card with subtle shadows and rounded corners, giving your app a professional and polished appearance. Whether you’re displaying user profiles, product information, or any grouped content, the Card widget Flutter offers excellent flexibility and customization options.
Understanding the Flutter Card Widget
The Flutter Card widget is a built-in widget that creates a panel with slightly rounded corners and an elevation shadow. The Card widget in Flutter is essentially a container that wraps other widgets while providing visual separation and depth to your UI components. When you use the Flutter Card widget, you’re implementing Google’s Material Design specification, which ensures consistency across different platforms.
The basic structure of a Flutter Card widget is straightforward - it acts as a container that can hold any child widget or combination of widgets. The Card widget Flutter automatically handles the visual styling, including shadows, borders, and background colors, making it incredibly easy to create professional-looking components.
Key Properties of Flutter Card Widget
elevation Property
The elevation property controls the shadow depth of your Flutter Card widget. Higher elevation values create more pronounced shadows, giving the Card widget in Flutter a more prominent appearance.
Card(
elevation: 8.0,
child: Container(
padding: EdgeInsets.all(16.0),
child: Text('High elevation card'),
),
)
The elevation property accepts a double value, typically ranging from 0 to 24. When you set elevation to 0, the Flutter Card widget appears flat without any shadow effect.
margin Property
The margin property defines the empty space surrounding the Card widget Flutter. This property helps create proper spacing between multiple cards or between the card and its parent container.
Card(
margin: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
child: ListTile(
title: Text('Card with custom margin'),
),
)
You can use EdgeInsets class methods like all(), symmetric(), only(), or fromLTRB() to control different margin values for the Flutter Card widget.
color Property
The color property allows you to customize the background color of your Card widget in Flutter. By default, the card uses the theme’s card color, but you can override it with any color you prefer.
Card(
color: Colors.blue[50],
child: Padding(
padding: EdgeInsets.all(20.0),
child: Text('Colored card background'),
),
)
When customizing colors for your Flutter Card widget, ensure sufficient contrast between the background color and the content for better readability.
shadowColor Property
The shadowColor property controls the color of the shadow cast by the Flutter Card widget. This property works in conjunction with the elevation property to create the desired visual effect.
Card(
elevation: 6.0,
shadowColor: Colors.red.withOpacity(0.3),
child: Container(
padding: EdgeInsets.all(16.0),
child: Text('Card with red shadow'),
),
)
Customizing shadow colors can help your Card widget Flutter match your app’s overall color scheme and design language.
shape Property
The shape property defines the shape and border of your Card widget in Flutter. You can create rounded rectangles, circles, or custom shapes using various ShapeBorder implementations.
Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
side: BorderSide(color: Colors.grey, width: 1.0),
),
child: Container(
padding: EdgeInsets.all(16.0),
child: Text('Rounded card with border'),
),
)
The shape property gives you complete control over how your Flutter Card widget appears, allowing you to create unique designs that match your app’s aesthetic.
clipBehavior Property
The clipBehavior property determines how the content inside the Flutter Card widget is clipped when it extends beyond the card’s boundaries. This is particularly useful when your card contains images or other content that might overflow.
Card(
clipBehavior: Clip.antiAlias,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12.0),
),
child: Image.network(
'https://example.com/image.jpg',
fit: BoxFit.cover,
),
)
The Clip.antiAlias value ensures smooth edges when clipping content in your Card widget in Flutter.
Creating Interactive Flutter Card Widgets
Making your Flutter Card widget interactive enhances user engagement and functionality. You can wrap your Card widget Flutter with gesture detection widgets to handle user interactions.
Adding Tap Functionality
GestureDetector(
onTap: () {
print('Card tapped!');
},
child: Card(
elevation: 4.0,
child: Container(
padding: EdgeInsets.all(16.0),
child: Text('Tap this card'),
),
),
)
The GestureDetector widget enables your Flutter Card widget to respond to various touch gestures including taps, long presses, and swipes.
Using InkWell for Material Ripple Effect
Card(
child: InkWell(
onTap: () {
// Handle tap
},
child: Container(
padding: EdgeInsets.all(16.0),
child: Text('Card with ripple effect'),
),
),
)
The InkWell widget provides the characteristic Material Design ripple effect when users interact with your Card widget in Flutter.
Advanced Flutter Card Widget Layouts
Creating Card Lists
When building lists of content, the Flutter Card widget works excellently with ListView to create scrollable card collections.
ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return Card(
margin: EdgeInsets.all(8.0),
child: ListTile(
leading: CircleAvatar(
child: Text('${index + 1}'),
),
title: Text('Item ${index + 1}'),
subtitle: Text('Description for item ${index + 1}'),
trailing: Icon(Icons.arrow_forward),
),
);
},
)
This approach creates a clean, organized list where each Flutter Card widget contains structured information that’s easy to scan and interact with.
Grid Layout with Cards
Combining Card widget Flutter with GridView creates attractive grid layouts perfect for dashboards or image galleries.
GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 8.0,
mainAxisSpacing: 8.0,
),
itemBuilder: (context, index) {
return Card(
elevation: 4.0,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.star, size: 40),
SizedBox(height: 8),
Text('Card ${index + 1}'),
],
),
);
},
)
This creates a responsive grid where each Card widget in Flutter maintains consistent spacing and styling.
Complete Flutter Card Widget Implementation Example
Here’s a comprehensive example demonstrating various Flutter Card widget implementations in a single application:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Card Widget Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: CardWidgetDemo(),
);
}
}
class CardWidgetDemo extends StatelessWidget {
final List<Map<String, dynamic>> cardData = [
{
'title': 'Basic Card',
'description': 'Simple Flutter Card widget with default styling',
'icon': Icons.card_giftcard,
'color': Colors.blue[50],
},
{
'title': 'Elevated Card',
'description': 'Flutter Card widget with high elevation shadow',
'icon': Icons.layers,
'color': Colors.green[50],
},
{
'title': 'Colored Card',
'description': 'Custom colored Flutter Card widget example',
'icon': Icons.palette,
'color': Colors.orange[50],
},
{
'title': 'Interactive Card',
'description': 'Tappable Flutter Card widget with ripple effect',
'icon': Icons.touch_app,
'color': Colors.purple[50],
},
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Card Widget Examples'),
backgroundColor: Colors.blue[600],
foregroundColor: Colors.white,
),
body: SingleChildScrollView(
padding: EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Basic Card Example
_buildSectionTitle('Basic Flutter Card Widget'),
Card(
elevation: 2.0,
margin: EdgeInsets.only(bottom: 16.0),
child: Padding(
padding: EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Icon(Icons.info, color: Colors.blue),
SizedBox(width: 8),
Text(
'Information Card',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
],
),
SizedBox(height: 8),
Text(
'This is a basic Flutter Card widget implementation with default elevation and styling.',
style: TextStyle(fontSize: 14, color: Colors.grey[600]),
),
],
),
),
),
// High Elevation Card
_buildSectionTitle('High Elevation Card Widget'),
Card(
elevation: 12.0,
margin: EdgeInsets.only(bottom: 16.0),
shadowColor: Colors.blue.withOpacity(0.5),
child: Container(
padding: EdgeInsets.all(20.0),
child: Column(
children: [
Icon(Icons.cloud, size: 48, color: Colors.blue),
SizedBox(height: 12),
Text(
'Elevated Card',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 8),
Text(
'This Flutter Card widget demonstrates high elevation with custom shadow color.',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 14),
),
],
),
),
),
// Custom Shaped Card
_buildSectionTitle('Custom Shaped Card Widget'),
Card(
elevation: 6.0,
margin: EdgeInsets.only(bottom: 16.0),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
side: BorderSide(color: Colors.orange, width: 2.0),
),
color: Colors.orange[50],
child: Padding(
padding: EdgeInsets.all(16.0),
child: Row(
children: [
CircleAvatar(
backgroundColor: Colors.orange,
child: Icon(Icons.star, color: Colors.white),
),
SizedBox(width: 16),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Custom Shaped Card',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 4),
Text(
'Flutter Card widget with custom border radius and border color.',
style: TextStyle(fontSize: 12),
),
],
),
),
],
),
),
),
// Interactive Cards Grid
_buildSectionTitle('Interactive Card Widgets Grid'),
GridView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 12.0,
mainAxisSpacing: 12.0,
childAspectRatio: 1.2,
),
itemCount: cardData.length,
itemBuilder: (context, index) {
final item = cardData[index];
return Card(
elevation: 4.0,
color: item['color'],
child: InkWell(
onTap: () {
_showSnackBar(context, 'Tapped: ${item['title']}');
},
borderRadius: BorderRadius.circular(4.0),
child: Padding(
padding: EdgeInsets.all(12.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
item['icon'],
size: 36,
color: Colors.grey[700],
),
SizedBox(height: 8),
Text(
item['title'],
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center,
),
SizedBox(height: 4),
Text(
item['description'],
style: TextStyle(
fontSize: 10,
color: Colors.grey[600],
),
textAlign: TextAlign.center,
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
],
),
),
),
);
},
),
SizedBox(height: 20),
// List of Cards
_buildSectionTitle('Flutter Card Widget List'),
...List.generate(3, (index) {
return Card(
margin: EdgeInsets.only(bottom: 8.0),
elevation: 2.0,
child: ListTile(
leading: CircleAvatar(
backgroundColor: Colors.blue[100],
child: Text('${index + 1}'),
),
title: Text('List Card Item ${index + 1}'),
subtitle: Text('This is a Flutter Card widget in a list layout'),
trailing: Icon(Icons.arrow_forward_ios, size: 16),
onTap: () {
_showSnackBar(context, 'Selected List Item ${index + 1}');
},
),
);
}),
],
),
),
);
}
Widget _buildSectionTitle(String title) {
return Padding(
padding: EdgeInsets.only(bottom: 12.0, top: 8.0),
child: Text(
title,
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.grey[800],
),
),
);
}
void _showSnackBar(BuildContext context, String message) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(message),
duration: Duration(seconds: 2),
),
);
}
}
This comprehensive example showcases multiple Flutter Card widget implementations, including basic cards, elevated cards with custom shadows, shaped cards with borders, interactive card grids, and card lists. Each Card widget in Flutter demonstrates different properties and use cases, providing you with practical examples you can adapt for your own applications.
The example includes necessary imports, proper widget structure, and demonstrates how the Flutter Card widget integrates with other Flutter widgets like GridView, ListView, InkWell, and various layout widgets. You can run this code directly in your Flutter project to see all the different Card widget Flutter variations in action.