Stitch to Flutter Skill

This skill documents how to translate UI designs generated by Google Stitch (which come as HTML and Tailwind CSS) into Flutter widgets, ensuring alignment with your Flutter project architecture and design system.

Core Conversion Principles

1. Structure Mapping:

   • <div> with flex -> Column, Row, or Flex.
   • <div> with max-w-md mx-auto -> Center + ConstrainedBox or Container with maxWidth.
   • padding (p-4, px-6) -> Padding widget or padding property in Container/ListView.
   • space-y-4 -> ListView with gap (if available) or Column with SizedBox between items.

2. Style Mapping:

   • Colors: Use Theme.of(context).colorScheme for dynamic colors. Map Tailwind custom colors (e.g., primary: "#F97316") to the project's brand colors in lib/core/theme/.
   • Typography: Map Tailwind font weights (font-bold) and sizes (text-3xl) to TextTheme scale tokens.
     • CRITICAL: Never used hardcoded fontSize. Always use Theme.of(context).textTheme.

Typography Mapping Table

*   **Shadows**: Map `shadow-lg` to `BoxShadow` in `BoxDecoration`.
*   **Border Radius**: Map `rounded-2xl` to `BorderRadius.circular(16)`.

3. Component Mapping:

   • button -> ElevatedButton, TextButton, or custom Material + InkWell for complex cards.
   • header -> SliverAppBar or a custom AppBar.
   • nav -> BottomNavigationBar or a custom navigation widget.
   • span.material-icons-round -> Icon(Icons.<icon_name>).

4. Tailwind Class to Flutter Decoration Table:

Implementation Patterns

Complex Action Cards

For cards like "Informar de un animal vulnerable", use:

Material(
  color: color,
  borderRadius: BorderRadius.circular(24),
  child: InkWell(
    onTap: onTap,
    child: Padding(
      padding: const EdgeInsets.all(24),
      // ... content
    ),
  ),
)

Dynamic Theme Usage

Always prioritize using Theme.of(context) to support Dark Mode automatically, as the Stitch designs often include dark: classes.

Atomic Design Mapping

When translating designs, follow the Atomic Design methodology to ensure components are reusable and well-structured:

Rules for Components:

1. Atoms should be generic and stateless. They only import from theme/quarks.
2. Molecules combine atoms and provide specific layout/logic for those atoms.
3. Organisms handle layout of multiple molecules and may connect to state/data.
4. Composition over duplication: If a pattern repeats in Stitch (e.g., an input card), extract it as a Molecule.

Dynamic Color & Branding

When converting designs, always use Theme.of(context).colorScheme tokens. The app uses Brand-Based Dynamic Color, meaning the entire ColorScheme is generated from the Brand Primary seed.

1. NEVER hardcode hex colors for surfaces, containers, or secondary elements.
2. Harmonized Colors: For semantic colors like "Warning" or "Success" that come from Stitch, use the harmonized() extension if you need them to feel more integrated with the brand theme.
3. Semantic Mapping:
   • bg-primary -> colorScheme.primary
   • bg-primary-light -> colorScheme.primaryContainer
   • text-on-primary -> colorScheme.onPrimary
   • bg-surface -> colorScheme.surface

Workflow

1. Read the .html file from Stitch.
2. Examine the .png screenshot to understand visual hierarchy and spacing.
3. Deconstruct into Atoms/Molecules: Identify repeated UI patterns (e.g., the input cards with labels).
4. Generate the Dart code following the Atomic Design structure.
5. Verify on Device: Execute the debug launch script to see the new screen in action:
   bashCopy

   make dev-mobile-launch