In Flutter, a Card widget is a material design card that represents a piece of information, typically within a contained area with a shadow. It is commonly used to display related information, such as a contact's details, a product, or any other content that benefits from a visually distinct and bordered presentation.
Here is a simple example of a Card widget in Flutter:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Card Widget Example'),
),
body: Center(
child: Card(
color: Color.fromARGB(255, 230, 128, 255), // Background color of the card
elevation: 5.0, // Shadow depth
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0), // Custom shape
),
margin: const EdgeInsets.all(20.0),
clipBehavior: Clip.hardEdge, // Clipping behavior
semanticContainer: false, // Whether the card is a semantic container
borderOnForeground: true, // Margin around the card
child: Container(
padding: const EdgeInsets.all(20.0),
child: const Column(
mainAxisSize: MainAxisSize.min,
children: [
ListTile(
leading: Icon(Icons.account_circle),
title: Text(
'Vinit Mepani',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
subtitle: Text('vinitmepani2712@gmail.com.com',
style: TextStyle(color: Colors.white)),
),
SizedBox(height: 10.0),
Text(
'This is an example of a Card widget in Flutter. We can customize its appearance using various attributes.',
style: TextStyle(color: Colors.white),
),
],
),
), // Draw shape border above children
),
),
),
);
}
}
Attributes or properties commonly associated with the Card widget include:
child: The main content of the card, typically another widget like Text, Column, Row, etc.
color: The background color of the card.
elevation: The shadow depth of the card, giving it a sense of elevation. Higher values result in a more pronounced shadow.
shape: Defines the shape of the card, which can be customized using RoundedRectangleBorder, CircleBorder, or other shape classes.
margin: The margin around the card.
borderOnForeground: A boolean that determines whether the shape border should be drawn above or below the Card's children.
clipBehavior: Determines how the content should be clipped inside the card. It can be set to Clip.none, Clip.hardEdge, or Clip.antiAlias.
semanticContainer: A boolean that indicates whether the card should be considered a semantic container. If set to true, the card will be treated as a single entity for accessibility purposes.
These are some of the commonly used properties, but there are more available for fine-tuning the appearance and behavior of the Card widget in Flutter.