flutter-widget-generator_skill

Overview

This skill generates complete Flutter widget files in Dart, including state management and theming integration. It produces ready-to-use .dart components following Flutter 3.x and Dart 3.x standards. Triggers include phrases like "create flutter widget", "generate flutter component", "dart widget", and "flutter screen".

How this skill works

On invocation, the skill creates a valid .dart file containing a widget class, associated state handling (StatefulWidget or stateless alternatives), and theme-aware styling. It includes common patterns such as Provider, Riverpod, or simple ValueNotifier-based state where appropriate, plus responsive layout and accessibility hints. The output is formatted for immediate use in a Flutter project and adheres to current language and framework conventions.

When to use it

• You need a ready-to-drop-in Flutter widget file with state and theming.
• Prototyping UI components quickly for mobile or web using Flutter.
• Generating consistent component variants and animations.
• Creating screens with built-in state handling and responsive layouts.
• Scaffolding widgets that follow Flutter 3.x / Dart 3.x best practices.

Best practices

• Specify desired widget type, behavior, and state pattern in the prompt (e.g., button with loading state, list with pull-to-refresh).
• Request the preferred state solution (Provider, Riverpod, Cubit/BLoC, or simple StatefulWidget) to match project architecture.
• Ask for theme tokens or color keys rather than hard-coded colors to ensure consistency with app theming.
• Request unit or widget test stubs when you need testable components.
• Review and run the generated code in a sandbox project before merging into production.

Example use cases

• Create a themed primary button with loading and disabled states and a subtle press animation.
• Generate a user profile screen with form state, validation, and adaptive layout for mobile/tablet.
• Produce a reusable card widget with light/dark theme variants and elevation animations.
• Scaffold a paginated list widget with pull-to-refresh and infinite scroll state handling.
• Create a small feature module widget using Riverpod for isolated state management.