Card

Introduction

FluttyCard is a versatile card widget that provides a structured way to display content such as titles, descriptions, and actions. It supports customization options like background images, rounded corners, shadow effects, and allows primary and secondary action buttons. The card can also be made tappable for additional interactivity.

Usage

Basic Card

FluttyCard(
  title: 'Welcome',
  description: 'This is a customizable card widget.',
);

Card with Actions

FluttyCard(
  title: 'Action Card',
  description: 'This card includes primary and secondary actions.',
  primaryAction: () => print('Primary action triggered'),
  secondaryAction: () => print('Secondary action triggered'),
  primaryActionLabel: 'OK',
  secondaryActionLabel: 'Cancel',
);

Card with a Background Image

FluttyCard(
  title: 'Card with Image',
  description: 'This card has a background image.',
  backgroundImage: 'https://via.placeholder.com/150',
  primaryAction: () => print('Primary Action'),
);

Clickable Card

FluttyCard(
  title: 'Clickable Card',
  description: 'Tap on the card to trigger an event.',
  clickable: true,
  onTap: () => print('Card tapped!'),
);

API

FluttyCard Props

Features

1. Customizable Design

• Add rounded corners using the radius property based on your theme's design system.
• Configure shadows for depth and emphasis.
• Use a custom background image via the backgroundImage property.

2. Interactive Behavior

• Enable clickable to make the card tappable, and use the onTap callback to respond to user interactions.
• Add primary and secondary action buttons for inline operations with support for customizable labels.

3. Thematic Support

• The card dynamically respects color and style variants defined in the ThemeExtension for seamless theming across your app.

Notes

• If no backgroundImage is supplied, the card will use the default background color defined by the theme with its primary color variant.
• Primary and secondary buttons are optional. You can display either or both.
• Ensure the radius property matches your design system's guidelines for uniformity.
• Use FluttyCard to build reusable, scalable card components for a consistent UI experience.