Card components are versatile containers for grouping related content and actions. They support headers, footers, images, and various styling options.
ChromiaCard
A customizable card component that follows the Chromia design system.
Basic Usage
ChromiaCard(
child: Padding(
padding: EdgeInsets.all(16),
child: Text('Card content'),
),
)
Parameters
The main content of the card.
Optional header widget displayed at the top of the card.
Optional footer widget displayed at the bottom of the card.
imagePosition
CardImagePosition
default:"CardImagePosition.top"
Position of the image relative to content. Options: top, bottom.
Callback when the card is tapped. Makes the card interactive with hover effects.
Padding for the main content. Defaults to theme spacing.
Padding for the header section.
Padding for the footer section.
Elevation of the card (0-9). Controls the shadow depth.
Border radius of the card. Defaults to theme radius.
Background color of the card.
Border color. If provided, adds a border to the card.
Border width when borderColor is specified.
clipBehavior
Clip
default:"Clip.antiAlias"
Clip behavior for the card content.
Examples
Simple Card
ChromiaCard(
child: Padding(
padding: EdgeInsets.all(16),
child: Text('Simple card content'),
),
)
Card with Header and Footer
ChromiaCard(
header: Text('Card Title'),
footer: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
TextButton(
onPressed: () {},
child: Text('Cancel'),
),
SizedBox(width: 8),
ElevatedButton(
onPressed: () {},
child: Text('Save'),
),
],
),
child: Text('Main card content here'),
)
Card with Image
ChromiaCard(
image: Image.network(
'https://example.com/image.jpg',
height: 200,
fit: BoxFit.cover,
),
header: Text('Image Card'),
child: Text('Card with a cover image on top'),
)
Interactive Card
ChromiaCard(
onTap: () => print('Card tapped'),
elevation: 2,
child: Padding(
padding: EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Clickable Card', style: TextStyle(fontWeight: FontWeight.bold)),
SizedBox(height: 8),
Text('Tap me to see the hover effect'),
],
),
),
)
Card with Custom Styling
ChromiaCard(
elevation: 4,
borderRadius: BorderRadius.circular(20),
backgroundColor: Colors.blue.shade50,
borderColor: Colors.blue,
borderWidth: 2,
child: Padding(
padding: EdgeInsets.all(24),
child: Text('Custom styled card'),
),
)
Fixed Size Card
ChromiaCard(
width: 300,
height: 200,
child: Center(
child: Text('Fixed size card'),
),
)
Card with Bottom Image
ChromiaCard(
header: Text('Header'),
child: Text('Content above the image'),
image: Image.network(
'https://example.com/image.jpg',
height: 150,
fit: BoxFit.cover,
),
imagePosition: CardImagePosition.bottom,
)
ChromiaListTileCard
A specialized card for displaying list items with leading, trailing, title, and subtitle.
Parameters
The primary content (main text).
Additional content displayed below the title.
A widget to display before the title (e.g., icon, avatar).
A widget to display after the title (e.g., icon, chevron).
Callback when the card is tapped.
Padding around the content. Defaults to theme spacing.
Examples
Simple List Tile Card
ChromiaListTileCard(
title: Text('Title'),
subtitle: Text('Subtitle'),
leading: Icon(Icons.star),
trailing: Icon(Icons.arrow_forward),
onTap: () => print('Tapped'),
)
User List Item
ChromiaListTileCard(
leading: ChromiaAvatar(
imageUrl: 'https://example.com/user.jpg',
),
title: Text('John Doe'),
subtitle: Text('[email protected]'),
trailing: Icon(Icons.chevron_right),
onTap: () => viewUserProfile(),
)
Settings List Item
ChromiaListTileCard(
leading: Icon(Icons.settings, color: Colors.blue),
title: Text('Settings'),
subtitle: Text('App preferences and options'),
trailing: Icon(Icons.arrow_forward_ios, size: 16),
onTap: () => navigateToSettings(),
)
Notification Card
ChromiaListTileCard(
leading: Container(
padding: EdgeInsets.all(8),
decoration: BoxDecoration(
color: Colors.blue.shade100,
shape: BoxShape.circle,
),
child: Icon(Icons.notifications, color: Colors.blue),
),
title: Text('New notification'),
subtitle: Text('You have a new message'),
trailing: Text(
'2m ago',
style: TextStyle(fontSize: 12, color: Colors.grey),
),
onTap: () => viewNotification(),
)
Task List Item
ChromiaListTileCard(
leading: Checkbox(
value: isCompleted,
onChanged: (value) => toggleComplete(),
),
title: Text(
'Complete documentation',
style: TextStyle(
decoration: isCompleted ? TextDecoration.lineThrough : null,
),
),
subtitle: Text('Due: Tomorrow'),
trailing: IconButton(
icon: Icon(Icons.more_vert),
onPressed: () => showOptions(),
),
)
Product Card
ChromiaListTileCard(
leading: Image.network(
'https://example.com/product.jpg',
width: 50,
height: 50,
fit: BoxFit.cover,
),
title: Text('Product Name'),
subtitle: Text(r'$29.99'),
trailing: ChromiaButton(
onPressed: () => addToCart(),
child: Text('Add'),
),
elevation: 2,
)
CardImagePosition
top - Image at the top of the cardbottom - Image at the bottom of the card
