Flutter Widget Architect
Designs Flutter widget trees with proper separation of concerns and state management.
What it does
The Flutter Widget Architect prompt designs the widget tree for a feature before you write code. It picks the state management approach, identifies which widgets should be Stateless vs Stateful vs ConsumerWidget, flags what to extract, and calls out loading / error / empty states explicitly.
What it solves
Flutter features often go wrong at the architecture stage — state is lifted too late, widgets get too big, and platform-specific edge cases are missed. This prompt forces the right conversation up front.
How to install
Which tool are you using?
Not sure? Claude.ai is the website. Claude Code is the command-line tool you install separately. Cursor is a code editor that reads .cursorrules.
- 01
Copy the prompt
Click the Copy button on the code block below to grab the full prompt text.
- 02
Paste into a new Claude chat
Open claude.ai or Claude Code and paste the prompt as the first message.
- 03
Fill in the bracketed placeholder
Replace [PASTE YOUR ... HERE] with your actual input before sending.
- 04
Iterate on the output
Claude's first response is usually 80% there. Ask for specific refinements — "make section 4 more concrete", "shorten section 7" — instead of regenerating from scratch.
The claude prompt file
Copy the full contents below, or download the file directly.
You are a Flutter architect who has shipped 20+ production apps. When I describe a feature or screen, design the Flutter widget tree for it. Your response must include:1. Screen name and route2. State management choice (Riverpod / Bloc / setState) and why3. Widget tree as nested bullet list with widget names4. Which widgets should be StatelessWidget vs StatefulWidget vs ConsumerWidget5. Which widgets to extract into separate files6. Data sources and how they flow in7. Loading, error, and empty states Rules:- Prefer composition over inheritance- Extract any widget whose build exceeds 50 lines- Always specify const where possible- Use named constructors for widgets with 2+ params Feature to design:[DESCRIBE YOUR FEATURE HERE]Example output
What Claude does before and after you install this claude prompt.
Claude starts writing a 200-line widget with inline state and no loading states.
Claude returns a screen name, state choice (Riverpod), tree outline, extraction plan, data flow, and loading/error/empty states — before a single line of widget code.
Customization tips
If your team uses Bloc exclusively, update the state management section of the prompt to remove Riverpod. For apps with strict UI kit constraints (e.g. custom design system), add a section requiring the architect to reference the existing widget library first.
Related resources
Flutter Development Skill
Teaches Claude Flutter best practices, widget patterns, state management conventions, and your team's coding style.
Flutter + Dart Rules
Cursor rules for Flutter + Dart projects. Widget patterns, state management, naming, and error handling conventions.
API Designer
Designs RESTful APIs with proper resource naming, status codes, and error handling patterns.
Frequently asked questions
Can I use it for Flutter web?
Yes. The structural rules apply across targets.
Does it pick state management automatically?
It proposes one and explains why. You can override.
Does it write the code too?
Not by default. It designs first. Ask for the code in a follow-up.
Does it handle navigation?
It references route and data flow but does not design the full navigation graph.
Works with GetX?
Yes, but the prompt defaults away from GetX. Edit it if your team uses GetX.
Want more like this?
Browse the full RohanKit library — free resources for Claude and Cursor.