CustomCard

A versatile and reusable card component with flexible content organization and customizable styling options.

Features

  • Flexible Content Structure:
    • Title section (required)
    • Optional description
    • Leading (trail) and trailing (suffix) widgets
  • Visual Customization:
    • Adjustable elevation and shadow color
    • Custom background color
    • Configurable border radius
    • Flexible padding
  • Interactive Elements:
    • Built-in tap handler
    • Smooth material ink splash effect
  • Responsive Design:
    • Automatically handles visibility of optional elements
    • Adapts to content size

Installation

Add the dependency to your pubspec.yaml:

dependencies:
  apptomate_custom_card: ^0.0.2

Basic Usage

CustomCard(
  titleWidget: Text("Basic Card"),
  onTap: () => print("Card tapped"),
)

Complete Example

Column(
  children: [
    // Simple card
    CustomCard(
      titleWidget: Text("Notification", style: TextStyle(fontWeight: FontWeight.bold)),
      trailWidget: Icon(Icons.notifications),
      onTap: () => _showNotifications(),
    ),

    // Detailed card
    CustomCard(
      titleWidget: Text("User Profile"),
      descriptionWidget: Text("Tap to view complete profile details"),
      suffixWidget: Icon(Icons.chevron_right),
      backgroundColor: Colors.blue[50],
      elevation: 8,
      borderRadius: 16,
      padding: EdgeInsets.all(20),
      onTap: () => _openProfile(),
    ),

    // Card with custom styling
    CustomCard(
      titleWidget: Text("Premium Feature", style: TextStyle(color: Colors.purple)),
      descriptionWidget: Text("Unlock exclusive content"),
      trailWidget: Icon(Icons.star, color: Colors.amber),
      backgroundColor: Colors.purple[50],
      shadowColor: Colors.purple,
      elevation: 12,
      borderRadius: 24,
      onTap: () => _upgradeToPremium(),
    )
  ],
)

Parameter Reference

Core Properties

Parameter Type Required Description
titleWidget Widget Yes Primary content of the card
onTap VoidCallback Yes Action when card is tapped

Content Options

Parameter Type Default Description
descriptionWidget Widget? null Secondary content text
trailWidget Widget? null Leading widget (left side)
suffixWidget Widget? null Trailing widget (right side)

Styling Options

Parameter Type Default Description
backgroundColor Color Colors.white Card background color
elevation double 4.0 Shadow depth
shadowColor Color Colors.grey Shadow color
borderRadius double? 12 Corner radius
padding EdgeInsets? EdgeInsets.all(16) Inner padding

Layout Behavior

  1. Content Organization:

    • trailWidget appears on the left (if provided)
    • titleWidget and descriptionWidget in the middle
    • suffixWidget appears on the right (if provided)

  2. Visibility Handling:

    • Description only appears if provided
    • Trail and suffix widgets are automatically hidden when null

  3. Spacing:

    • Automatic spacing between elements
    • Consistent padding defaults

Theming Guide

For consistent card styling across your app:

// Define card theme constants
class AppCardTheme {
  static const defaultCard = CardStyle(
    backgroundColor: Colors.white,
    elevation: 4,
    borderRadius: 12,
    padding: EdgeInsets.all(16),
  );

  static const accentCard = CardStyle(
    backgroundColor: Color(0xFFF5F5FF),
    elevation: 8,
    borderRadius: 16,
    padding: EdgeInsets.all(20),
  );
}

class CardStyle {
  final Color backgroundColor;
  final double elevation;
  final double borderRadius;
  final EdgeInsets padding;

  const CardStyle({
    required this.backgroundColor,
    required this.elevation,
    required this.borderRadius,
    required this.padding,
  });
}

// Usage
CustomCard(
  titleWidget: Text("Consistent Styling"),
  backgroundColor: AppCardTheme.defaultCard.backgroundColor,
  elevation: AppCardTheme.defaultCard.elevation,
  borderRadius: AppCardTheme.defaultCard.borderRadius,
  padding: AppCardTheme.defaultCard.padding,
  onTap: () {},
)

Best Practices

  1. Accessibility:

    • Ensure sufficient contrast between text and background
    • Provide meaningful tap targets (minimum 48x48dp)
    • Include semantic labels for interactive elements

  2. Performance:

    • Use const constructors for static content
    • Avoid deeply nested content in cards
    • Consider using ListView.builder for long lists of cards

  3. Consistency:

    • Standardize card styles throughout your app
    • Maintain consistent spacing and elevation
    • Use a limited set of card variants

  4. Content Guidelines:

    • Keep titles concise
    • Use descriptions for supplementary information
    • Reserve icons for important actions or status indicators

Comparison with Standard Card

Feature CustomCard Standard Card
Content Structure Predefined layout Fully manual
Icon Support Built-in leading/trailing Manual implementation
Padding Sensible defaults No default padding
Tap Handling Built-in Requires InkWell wrapper
Styling Unified properties Multiple widgets needed

Libraries

apptomate_custom_card