Data Presentation

Card

A flexible container component that displays content with an optional title, subtitle, and child widget. Cards are commonly used to group related information and actions.

FCard(
  image: Container(
    decoration: BoxDecoration(
      image: DecorationImage(image: AssetImage('avatar.png'), fit: BoxFit.cover),
    ),
    height: 200,
  ),
  title: const Text('Gratitude'),
  subtitle: const Text('The quality of being thankful; readiness to show appreciation for and to return kindness.'),
);

CLI

To generate and customize this style:

dart run forui style create card

Usage

`FCard(...)`

FCard(
  image: const Placeholder(),
  title: const Text('Notification'),
  subtitle: const Text('You have 3 unread messages.'),
  child: FButton(child: const Text('Read messages'), onPress: () {}),
  mainAxisSize: MainAxisSize.min,
  style: (style) => style.copyWith(...),
);

`FCard.raw(...)`

FCard.raw(
  child: const Placeholder(),
  style: (style) => style.copyWith(...),
);

Calendar

A calendar component for selecting and editing dates.

Item Group

An item group that typically groups related information together.

On this page

CLI Usage FCard(...)FCard.raw(...)