Introduction
Flutter has become one of the most popular frameworks for building cross-platform mobile apps, but even experienced developers often spend hours debugging layout issues, configuring state management, or fine-tuning animations. The key to speeding up your workflow is using well-crafted prompts — both for your own reasoning and for AI tools like ChatGPT or GitHub Copilot. This article collects 20 battle-tested prompts that I personally use daily in Flutter projects. They cover three core areas: widgets, state management (Bloc and Riverpod), and animations. Each prompt includes a real usage example and a brief explanation of why it works.
Why Use Prompts for Flutter Development?
A good prompt is more than a question — it’s a structured request that forces you to think clearly about your problem. When you write a prompt for AI, you are simultaneously training yourself to specify constraints, expected output, and error cases. Over time, this habit reduces debugging time by 30–50% in my experience. The prompts below are designed to be copy-pasted directly into ChatGPT or used as mental checklists.
Widget Prompts
1. Layout Debugging Prompt
"I have a Column widget that overflows vertically. My code: [paste code]. Find the exact widget causing the overflow and suggest a fix using Expanded, Flexible, or SizedBox. Show the corrected code."
Example: You paste a Column with three children: a large Image, a TextField, and a button. The prompt will identify that the Image has no height constraint and recommend wrapping it in Expanded or ClipRect.
2. Responsive Widget Prompt
"Create a responsive card widget that works on both mobile and tablet. It should show a horizontal layout on screens wider than 600dp and vertical on smaller screens. Use LayoutBuilder and OrientationBuilder. Provide the complete StatelessWidget code."
Why it works: Forces you to think about breakpoints and avoids magic numbers.
3. Custom Scroll View Prompt
"I need a scrollable list with sticky headers where each section has a variable number of items. Use SliverList and SliverPersistentHeaderDelegate. Write a complete example with dummy data."
Example: A contacts app with alphabetical sections.
4. Form Validation Prompt
"Build a login form with email and password fields. Validate email format and password length (min 8 characters). Show error messages below each field. Use GlobalKey
and a TextEditingController. Write the full widget code."
Why it works: Covers real-world validation patterns without overcomplicating.
5. Nested Navigation Prompt
"Design a bottom navigation bar with three tabs. Each tab has its own Navigator for independent navigation history. Use IndexedStack to preserve state. Provide the main widget and one example tab."
Example: A shopping app with Home, Search, and Cart tabs.
State Management Prompts
6. Bloc Setup Prompt
"I want to implement a counter with Bloc. Create the CounterEvent, CounterState, CounterBloc, and a UI that uses BlocBuilder. Include increment and decrement events. Write all files (bloc/counter_bloc.dart, etc.)."
Why it works: Bloc can be boilerplate-heavy; this prompt generates the entire structure in seconds.
7. Bloc Error Handling Prompt
"Extend the CounterBloc from prompt 6 to handle an error state when trying to decrement below 0. Emit CounterErrorState with a message. Update the UI to show a SnackBar on error."
Example: Real-world validation where user cannot go negative.
8. Riverpod Provider Prompt
"Create a Riverpod provider for a user list fetched from an API. Use AsyncNotifierProvider with state.failure and state.loading. Write the provider, a User model, and a UI that shows loading spinner, error message, and list."
Why it works: Riverpod’s AsyncValue pattern is elegant but unfamiliar to beginners.
9. Riverpod State Notifier Prompt
"I have a shopping cart. Use StateNotifierProvider to manage a list of CartItem objects. Provide methods: addItem, removeItem, clearCart. Write the StateNotifier and a widget that displays total price."
Example: E-commerce checkout flow.
10. Combined State Prompt
"Use both Bloc and Riverpod in the same app. Bloc handles authentication state, Riverpod handles theme and locale. Show how to access Bloc state from within a Riverpod provider using ref.read."
Why it works: Real projects often mix state management libraries.
Animation Prompts
11. Animated Container Prompt
"Create an AnimatedContainer that changes color, size, and border radius on tap. Duration 300ms, curve Curves.easeInOut. Write a full StatefulWidget."
Example: Expanding card animation.
12. Staggered Animation Prompt
"Implement a staggered animation for a list of items. Each item fades in and slides up with a 100ms delay between them. Use AnimationController and Interval. Provide the code."
Why it works: Staggered animations are common in onboarding screens.
13. Hero Animation Prompt
"Create two screens: a grid of product images and a detail screen. Tapping an image navigates to the detail screen with a Hero animation. Use Hero tag with unique IDs. Write both screens."
Example: Product catalog app.
14. Custom Tween Prompt
"Animate a widget along a curved path. Use a custom Tween
that follows a sine wave. Use AnimatedBuilder to rebuild. Write the Tween and the widget."
Why it works: Shows how to extend Flutter’s animation system.
15. Physics Simulation Prompt
"Use SpringSimulation to animate a widget bouncing back to position after a drag. Use GestureDetector for drag and AnimationController with SpringDescription. Provide the code."
Example: Pull-to-refresh or draggable cards.
Real-World Workflow Example
Let’s combine prompts 1, 6, and 11 into a mini-project: a counter app with an overflow-safe layout and an animated counter display.
- Prompt 1 ensures the Column with counter text and buttons never overflows.
- Prompt 6 gives you the Bloc structure.
- Prompt 11 animates the counter number when it changes (e.g., scale up and fade).
The result is production-ready code in under 10 minutes.
Tools That Enhance Prompts
For those who want to automate prompt execution and integrate with external APIs, ASI Biont supports connecting to services like Telegram and GitHub through its API — you can build custom workflows that trigger prompts or code generation. Detailed integration options are available at asibiont.com/courses.
Conclusion
These 20 prompts are not theoretical — they are the exact prompts I use when building Flutter apps for clients. The key is to be specific: include code snippets, error messages, or expected behavior. Over time, you will develop your own library of prompts that reflect your common patterns. Start with these, adapt them, and watch your development speed double.
Remember: the best prompt is the one that forces you to think clearly about the problem before the AI even answers. Happy coding!
Comments