card top-level property

CatalogItem card
final

A Material Design card.

This widget displays a card, which is a container for a single child widget. Cards often have rounded corners and a shadow, and are used to group related content.

Parameters:

  • child: The ID of a child widget to display inside the card.

Implementation

final card = CatalogItem(
  name: 'Card',
  dataSchema: _schema,
  widgetBuilder: (itemContext) {
    final cardData = _CardData.fromMap(itemContext.data as JsonMap);
    return Card(
      color: Theme.of(itemContext.buildContext).colorScheme.surface,
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: itemContext.buildChild(cardData.child),
      ),
    );
  },
  exampleData: [
    () => '''
      [
        {
          "id": "root",
          "component": "Card",
          "child": "text"
        },
        {
          "id": "text",
          "component": "Text",
          "text": "This is a card."
        }
      ]
    ''',
  ],
);