skills.rest
Dchuuuuuu
DchuuuuuuCOMMUNITY
Explore all skills by this author →
GitHub

flutter-patterns

Implements Flutter design systems, responsive layouts, and widget testing patterns.

Updated Apr 2, 2026
Search Tags:#design system#cross-platform#dark mode#flutter#widget testing#dart#responsive layout
One-click install
npx skills add https://github.com/Dchuuuuuu/disease-risk-classifier --skill flutter-patterns-dchuuuuuu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: flutter-patterns
Source: https://github.com/Dchuuuuuu/disease-risk-classifier/tree/main/.claude/skills/19-flutter-patterns
Command: npx skills add https://github.com/Dchuuuuuu/disease-risk-classifier --skill flutter-patterns-dchuuuuuu

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Flutter projects often suffer from inconsistent UI, hardcoded colors and spacing, broken responsive layouts, and flaky widget tests. This Skill provides production-ready patterns for building design systems, responsive components, and reliable tests so teams ship consistent cross-platform Flutter apps. ## Core Features & Use Cases - Design System Creation: Step-by-step phased guide covering design tokens (colors, typography, spacing, shadows), 16 core components, dark mode support, and a component showcase app. - Responsive Layout Patterns: Breakpoint definitions, ResponsiveBuilder, AdaptiveGrid, AdaptiveFilter, and AdaptiveForm widgets for mobile, tablet, and desktop. - Flutter Testing Patterns: Proven widget testing techniques including ensureVisible for off-screen widgets, pumpAndSettle for validation and async operations, and multi-breakpoint responsive testing. - Use Case: When building a new Flutter feature, use the single design_system.dart import, compose AppButton/AppCard/AppInput components with design tokens, and write widget tests that pass across all screen sizes. ## Quick Start Ask the AI to create a Flutter design system with color tokens, typography, and responsive components following the flutter-patterns skill.

Frequently Asked Questions about flutter-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a Flutter design system from scratch?▼

Follow a phased approach: set up the directory structure with a single design_system.dart export, define design tokens for colors, typography, spacing, and shadows, then build 8-16 core components. Finish with responsive utilities, a component showcase app, and documentation.

How do I build responsive layouts in Flutter?▼

Use a ResponsiveBuilder widget with breakpoints at 600px (mobile), 1024px (tablet), and 1440px (desktop) instead of manual MediaQuery checks. AdaptiveGrid, AdaptiveFilter, and AdaptiveForm widgets automatically adjust columns and layouts per screen size.

Why does tester.tap fail on off-screen Flutter widgets?▼

Flutter tests cannot interact with widgets rendered outside the 600px test viewport. Call tester.ensureVisible() before tapping to scroll the widget into view, then use pumpAndSettle() so validation errors and async updates complete before assertions.

Should I use pump or pumpAndSettle in Flutter widget tests?▼

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

Does this Flutter design system support dark mode?▼

Yes, the design system includes a separate AppColorsDark palette and theme-aware components that adapt automatically based on Theme.of(context).brightness. Both light and dark themes should be tested for every component.

When should I create a custom Flutter component instead of using the design system?▼

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 follow the App naming prefix, support dark mode, be exported from design_system.dart, and include widget tests.

Related Skills

Explore More Software Engineering Skills→
MilUX-LtdMilUX-Ltd

design-system-setup

Generate a token-based design system with CSS tokens, showcase page, and starter templates from a brand config.

Official
Intermediate
terrene-foundationterrene-foundation
1

flutter-patterns

Create Flutter design systems with tokens, components, and themes.

Official
Advanced
terrene-foundationterrene-foundation
1

uiux-design-principles

Provide UI/UX design principles for enterprise applications with WCAG 2.1 AA accessibility.

Official
Intermediate
epiphanyappsepiphanyapps

use-dom

Run web-only React libraries and components in Expo webviews via DOM APIs.

Official
Intermediate