Tinyrack

Card

Group related Flutter content on a bordered Tinyrack surface.

Group related content on a bordered semantic surface.

Contract

AxisContract
FocusA card that only groups content leaves focused off. Pass raw descendant focus while a group of controls should read as one, and give the field inside it TRFieldAppearance.plain so the ring is painted once rather than twice. The card shows that ring only for keyboard navigation. A TRFieldAppearance.ghost field already paints its own focus, so a card wrapping just that field should leave this off. The ring paints over the card, so it never changes the card size.

Install

Add the package, then import its public library.

flutter pub add tinyrack_ui
import 'package:tinyrack_ui/tinyrack_ui.dart';

Playground

Usage

import 'package:material_ui/material_ui.dart';
import 'package:tinyrack_ui/tinyrack_ui.dart';

const TRCard(
  variant: TRCardVariant.outlined,
  child: TRCardHeader(
    children: [
      TRCardTitle(child: Text('Rack alpha')),
      TRCardDescription(child: Text('Healthy')),
    ],
  ),
)

Examples

Variants permalink

Choose default, outlined, or elevated to set how much a card separates from the page.

Content layout permalink

Compose header, content, and footer slots for a complete card with actions.

API

Card preserves native Flutter state and callbacks while applying Tinyrack token defaults.