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