components/cards/flutstrap_card library Components Layout

Flutstrap Card

A high-performance, flexible card component with comprehensive theming, multiple variants, and optimized rendering patterns.

{@tool snippet}

Basic Usage

// Basic card with text content
FlutstrapCard(
  headerText: 'Card Title',
  bodyText: 'Card content goes here...',
  footerText: 'Footer text',
)

// Interactive card with tap action
FlutstrapCard.interactive(
  title: 'Clickable Card',
  content: 'Tap me for action',
  onTap: () => print('Card tapped'),
  trailing: Icon(Icons.chevron_right),
)

// Image card with custom layout
FlutstrapCard.image(
  image: Image.network('https://example.com/image.jpg'),
  title: 'Beautiful Image',
  content: 'This card features an image header',
  actions: [
    FlutstrapButton(
      onPressed: () {},
      child: Text('Action'),
    ),
  ],
)

{@end-tool}

Performance Features

  • Style Caching: Computed styles cached by variant and brightness
  • LRU Cache Management: Automatic cache eviction for memory efficiency
  • Factory Caching: Common card patterns cached for reuse
  • Error Boundaries: Graceful error handling for content rendering

Accessibility

  • Full screen reader support with semantic labels
  • Keyboard navigation with focus management
  • Proper cursor feedback for interactive cards
  • WCAG compliant color contrast ratios

Best Practices

  • Use factory methods for common card patterns
  • Leverage copyWith for state modifications
  • Consider using const constructors when possible
  • Use error boundaries for dynamic content
  • Test interactive cards with keyboard navigation

Classes

ErrorBoundary
Error Boundary Widget for graceful error handling
FlutstrapCard
Flutstrap Card Component

Enums

FSCardVariant
Flutstrap Card Variants