Why Flutter Developers Need a Prompt Playbook
As a Flutter developer, you've likely hit the wall of boilerplate state management or wondered “how do I animate this widget without jank?”. The best way to accelerate your workflow is to leverage AI prompts as your pair programmer. But not all prompts are equal. This article is a curated collection of 10 battle-tested prompts for Flutter, ranging from basic widgets to expert-level state management with Riverpod and Bloc. Each prompt includes a concrete task, the exact prompt to copy, and an example result with real code.
I've based the code and best practices on official Flutter documentation (flutter.dev/docs), the Riverpod and Bloc documentation, and the Dart language tour. No invented statistics, just practical, verifiable knowledge.
Basic Prompts: Widgets and State
1. Task: Generate a custom loading button
Prompt: You are a Flutter expert. Write a StatefulWidget for a custom button that shows a CircularProgressIndicator when_isLoadingis true. Include onPressed callback, custom colors, and disabled state. Provide code and explanation.
Example result:
class LoadingButton extends StatefulWidget {
final Future<void> Function() onTap;
final String text;
LoadingButton({required this.onTap, required this.text});
@override
_LoadingButtonState createState() => _LoadingButtonState();
}
class _LoadingButtonState extends State<LoadingButton> {
bool _isLoading = false;
Future<void> _handleTap() async {
setState(() => _isLoading = true);
await widget.onTap();
if (mounted) setState(() => _isLoading = false);
}
@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: _isLoading ? null : _handleTap,
child: _isLoading
? SizedBox(
height: 20, width: 20,
child: CircularProgressIndicator(strokeWidth: 2))
: Text(widget.text),
);
}
}
This prompt teaches you to handle async operations safely with mounted check, a core Flutter pattern.
2. Task: Explain Stateless vs Stateful with a concrete example
Prompt: Compare StatelessWidget and StatefulWidget in Flutter. Give a code example of each for a weather app card that updates temperature when a refresh button is pressed.
Example result: A StatelessWidget for static weather icon, a StatefulWidget for the temperature that changes with setState.
3. Task: Create a login form with validation
Prompt: Create a Flutter login form using Form and TextFormField. Validate email format and password length > 6. Show error messages and a submit button that prints the form data.
Example result: You get a complete StatefulWidget with a GlobalKey<FormState>, validator functions, and an _submit() method.
Advanced Prompts: State Management
4. Task: Manage state with Riverpod
Prompt: Using flutter_riverpod, create a counter app. Show a Provider for the count, a ConsumerWidget to display it, and a button to increment. Explain the difference between Provider and StateProvider.
Example result:
final counterProvider = StateProvider<int>((ref) => 0);
class CounterWidget extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
final count = ref.watch(counterProvider);
return Scaffold(
body: Center(child: Text('$count')),
floatingActionButton: FloatingActionButton(
onPressed: () => ref.read(counterProvider.notifier).state++,
),
);
}
}
Riverpod's ConsumerWidget makes widgets rebuild only when the watched provider changes — this is the modern alternative to setState with better testability.
5. Task: Implement a Bloc for authentication
Prompt: Write a complete flutter_bloc implementation for user authentication. Define AuthEvent, AuthState, and AuthBloc that loads a user from an API. Include a simple UI with BlocBuilder.
Example result: You'll get files: auth_event.dart with AuthStarted, AuthLoggedIn, AuthLoggedOut, and auth_bloc.dart that extends Bloc<AuthEvent, AuthState>. This prompt gives you a production-grade pattern.
6. Task: Animate a page transition
Prompt: Create a custom PageRoute animation in Flutter using AnimationController and FadeTransition. Show how to use SlideTransition as a secondary effect.
Example result:
class FadePageRoute extends PageRouteBuilder {
FadePageRoute({required Widget page})
: super(pageBuilder: (_, __, ___) => page,
transitionsBuilder: (_, animation, ___, child) {
return FadeTransition(opacity: animation, child: child);
});
}
Advanced Prompts: Animations
7. Task: Use implicit animations
Prompt: Show how to use AnimatedContainer and TweenAnimationBuilder to create a smooth size and color change when a button is pressed.
Example result: A square container that changes from 100x100 blue to 200x200 red using AnimatedContainer(duration: Duration(milliseconds: 500)). The prompt teaches the concept of implicit animations — no controllers needed.
Expert Prompts: Performance and Custom Painting
8. Task: Optimize a list for many items
Prompt: Write a Flutter ListView.builder that renders 10,000 items without jank. Use itemExtent, const constructors, and RepaintBoundary. Explain why each optimization helps.
Example result:
ListView.builder(
itemExtent: 50, // forces item height, avoids layout calculation
itemCount: 10000,
itemBuilder: (context, index) => const ListTile(title: Text('Item')),
)
Using const reduces widget rebuilds, itemExtent helps the lazy list, and RepaintBoundary isolates repaints.
9. Task: CustomPainter for a progress ring
Prompt: Using CustomPainter, paint a circular progress indicator with an arc. Show how to animate it with AnimationController.
Example result: A CustomPainter that draws an arc with canvas.drawArc() and an AnimationController to update the sweep angle.
10. Task: Build a custom RenderObject
Prompt: Explain how to create a custom SingleChildRenderObjectWidget and RenderBox in Flutter. Write a simple Padding equivalent.
Example result: A minimal RenderPaddingBox that overrides performLayout and paint, giving you ultimate control over layout.
Conclusion
These 10 prompts cover the essential Flutter spectrum — from basic widget composition to advanced state management and custom rendering. Copy them, adapt them, and you'll save hours of boilerplate. Remember to always validate AI-generated code against the official docs. Start with the basic prompts, then move to Riverpod and Bloc once you're confident. The next time you're stuck on a widget, let a prompt guide you — your future self will thank you.
Sources: flutter.dev/docs, pub.dev/packages/flutter_riverpod, pub.dev/packages/flutter_bloc, dart.dev/guides.
Comments