flutter-patterns

Follow a phased approach: set up a lib/core/design directory, define color, typography, spacing, and shadow tokens, build 8-16 core components, add responsive utilities, and create a component showcase app. Use a single design_system.dart export file for all imports.

Use a ResponsiveBuilder widget with breakpoints at 600px (mobile), 1024px (tablet), and 1440px (desktop). Combine it with AdaptiveGrid, AdaptiveFilter, and AdaptiveForm widgets that automatically adjust column counts and layouts per screen size.

The button is likely rendered outside the 600px test viewport. Call tester.ensureVisible() to scroll it into view, then pumpAndSettle() before tapping. This pattern fixed 49 real-world auth test failures.

Use pumpAndSettle() after interactions that trigger validation, async operations, loading states, or animations. Use pump() only for simple synchronous widget updates or when stepping through animation frames manually.

Yes, it includes a separate AppColorsDark palette following Material Design 3 dark theme principles with muted saturation and higher contrast. All components adapt automatically through Theme.of(context) brightness detection.

Only create a new component when no existing component fits the use case and it will be reused across three or more features. New components must support light and dark mode, use design tokens, and be added to the showcase and tests.