home / skills / ehtbanton / claudeskillsrepo / flutter-widget-generator

flutter-widget-generator skill

safe

/flutter-widget-generator

This skill generates complete Flutter widget Dart files with state management and theming for immediate use

npx playbooks add skill ehtbanton/claudeskillsrepo --skill flutter-widget-generator

Review the files below or copy the command above to add this skill to your agents.

Files (2)

SKILL.md

686 B

---
name: flutter-widget-generator
description: Generate Flutter widget files with Dart, state management, and theming. Triggers on "create flutter widget", "generate flutter component", "dart widget", "flutter screen".
---

# Flutter Widget Generator

Generate Flutter Dart widgets with proper state management and theming.

## Output Requirements

**File Output:** `*.dart` widget files
**Format:** Valid Dart/Flutter
**Standards:** Flutter 3.x, Dart 3.x

## When Invoked

Immediately generate a complete Flutter widget with state and theming.

## Example Invocations

**Prompt:** "Create Flutter button widget"
**Output:** Complete `custom_button.dart` with variants and animations.

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.

FAQ

What file format does the skill output?

It outputs complete .dart files formatted as valid Flutter widgets.

Which Flutter and Dart versions are targeted?

Generated code targets Flutter 3.x and Dart 3.x conventions.

Can I request a specific state management approach?

Yes — include the preferred state pattern in your prompt and the output will follow it.