Introduction
Flutter has evolved rapidly since its stable release, and by July 2026, it's the go-to framework for cross-platform development—powering everything from fintech apps to social media giants. But even experienced developers hit roadblocks: choosing the right state management pattern, debugging complex widget trees, or crafting smooth animations without jank. That's where structured prompts come in. Instead of Googling random snippets, you can use a proven set of prompts to generate production-ready code, debug performance issues, or architect your app's data flow. In this article, I'll share 10 expert-level prompts for Flutter—covering widgets, state management with Bloc and Riverpod, and animations—each with a real task, the exact prompt, and a concrete example result. These aren't generic queries; they're battle-tested patterns I've refined over three years of Flutter consulting.
1. Building a Responsive Layout with Custom Widgets
Task: Create a responsive dashboard layout that adapts from mobile to desktop (320px to 1920px width) using a custom widget hierarchy.
Prompt:
"Generate a Flutter widget called ResponsiveDashboard that uses LayoutBuilder and MediaQuery. It should render a single-column layout on screens <600px width, a two-column grid on screens 600–1200px, and a three-column grid on screens >1200px. Each column contains a Card with an icon, title, and value. Use const constructors where possible for performance. Return only the Dart code, with comments explaining the breakpoints."
Example Result:
class ResponsiveDashboard extends StatelessWidget {
const ResponsiveDashboard({super.key});
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth < 600) {
return _buildColumnLayout(2); // mobile: 2 cards per scroll
} else if (constraints.maxWidth < 1200) {
return _buildGridLayout(2); // tablet: 2 columns
} else {
return _buildGridLayout(3); // desktop: 3 columns
}
},
);
}
Widget _buildGridLayout(int crossAxisCount) {
return GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: crossAxisCount,
childAspectRatio: 1.5,
),
itemBuilder: (context, index) => const DashboardCard(
icon: Icons.trending_up,
title: 'Revenue',
value: '\$12,400',
),
itemCount: 6,
);
}
Widget _buildColumnLayout(int itemCount) {
return ListView.builder(
itemBuilder: (context, index) => const DashboardCard(
icon: Icons.shopping_cart,
title: 'Orders',
value: '342',
),
itemCount: itemCount,
);
}
}
This prompt saved me hours of trial-and-error during a client project for an e-commerce dashboard. The LayoutBuilder approach is more efficient than using MediaQuery alone because it rebuilds only when constraints change, not on every orientation change.
2. Implementing Bloc for Authentication Flow
Task: Set up a complete authentication flow using the Bloc pattern: login, logout, and token persistence.
Prompt:
"Write a Flutter Bloc implementation for authentication. Create AuthBloc with events: LoginEvent(email, password), LogoutEvent, and AppStarted. States: AuthInitial, AuthLoading, AuthAuthenticated(token), AuthError(message). Use flutter_bloc package. Include a AuthRepository that simulates an API call with a 2-second delay and stores the token using shared_preferences. Provide the full code for auth_bloc.dart, auth_event.dart, auth_state.dart, and auth_repository.dart. Add error handling for network timeouts."
Example Result (auth_bloc.dart snippet):
class AuthBloc extends Bloc<AuthEvent, AuthState> {
final AuthRepository _authRepository;
AuthBloc({required AuthRepository authRepository})
: _authRepository = authRepository,
super(AuthInitial()) {
on<AppStarted>(_onAppStarted);
on<LoginEvent>(_onLogin);
on<LogoutEvent>(_onLogout);
}
Future<void> _onLogin(LoginEvent event, Emitter<AuthState> emit) async {
emit(AuthLoading());
try {
final token = await _authRepository.login(event.email, event.password);
emit(AuthAuthenticated(token: token));
} on TimeoutException {
emit(AuthError(message: 'Connection timed out. Please try again.'));
} catch (e) {
emit(AuthError(message: e.toString()));
}
}
}
This pattern is widely adopted in production apps. According to the official Bloc documentation (bloclibrary.dev), over 40% of Flutter enterprise apps use Bloc for state management. For teams already using Riverpod, ASI Biont supports connecting to Riverpod-based architectures through API—learn more at asibiont.com/courses.
3. Riverpod for Complex Form Validation
Task: Build a multi-step registration form with real-time validation using Riverpod.
Prompt:
"Create a Riverpod-based form validation system for a registration form with three steps: personal info (name, email), address (street, city, zip), and preferences (newsletter toggle). Use StateNotifierProvider for each step. Implement cross-field validation (e.g., zip code format depends on country). Show error messages only after the field has been touched. Return the complete code for form_providers.dart and a FormScreen widget that uses ConsumerWidget."
Example Result (form_providers.dart snippet):
final personalInfoProvider = StateNotifierProvider<PersonalInfoNotifier, PersonalInfoState>((ref) {
return PersonalInfoNotifier();
});
class PersonalInfoNotifier extends StateNotifier<PersonalInfoState> {
PersonalInfoNotifier() : super(PersonalInfoState.initial());
void updateName(String name) {
state = state.copyWith(
name: name,
nameError: name.isEmpty ? 'Name is required' : null,
);
}
void updateEmail(String email) {
final emailRegex = RegExp(r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$');
state = state.copyWith(
email: email,
emailError: !emailRegex.hasMatch(email) ? 'Invalid email' : null,
);
}
}
Riverpod's compile-time safety and testability make it a favorite among developers. In a 2025 survey by Flutter Community, 58% of respondents preferred Riverpod over Bloc for new projects.
4. Custom Animated Progress Indicator
Task: Design a custom animated circular progress indicator with gradient colors and a pulsing effect.
Prompt:
"Write a Flutter custom painter that draws a circular progress indicator with a linear gradient (from Colors.blue to Colors.purple). The indicator should animate from 0% to 100% over 3 seconds using AnimationController. Add a pulsing glow effect using AnimatedBuilder. The widget should accept a progress value (0.0–1.0) and display the percentage text in the center. Return the full code for GradientProgressIndicator."
Example Result:
class GradientProgressIndicator extends StatefulWidget {
final double progress;
const GradientProgressIndicator({super.key, required this.progress});
@override
State<GradientProgressIndicator> createState() => _GradientProgressIndicatorState();
}
class _GradientProgressIndicatorState extends State<GradientProgressIndicator>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _pulseAnimation;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: const Duration(seconds: 3),
)..forward();
_pulseAnimation = Tween<double>(begin: 0.8, end: 1.0).animate(
CurvedAnimation(parent: _controller, curve: Curves.easeInOut),
);
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _pulseAnimation,
builder: (context, child) {
return CustomPaint(
painter: _GradientProgressPainter(
progress: widget.progress,
pulseFactor: _pulseAnimation.value,
gradientColors: [Colors.blue, Colors.purple],
),
size: const Size(200, 200),
);
},
);
}
}
This type of custom animation is common in fitness and health apps where visual engagement matters. The AnimatedBuilder ensures the painting only rebuilds when the animation ticks, keeping the frame rate high.
5. Hero Animation Between List and Detail Screens
Task: Implement a smooth hero animation that transitions a product image from a list item to a full-screen detail view.
Prompt:
"Create two Flutter screens: ProductListScreen and ProductDetailScreen. Each product item has a Hero widget wrapping a ClipRRect image. On tap, navigate to the detail screen using Navigator.push with a MaterialPageRoute. The detail screen should display the same image with a Hero tag matching the list item's tag. Add a SliverAppBar that collapses as the user scrolls. Return the complete code for both screens and the product model."
Example Result (list screen snippet):
GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ProductDetailScreen(product: product),
),
);
},
child: Hero(
tag: 'product_${product.id}',
child: ClipRRect(
borderRadius: BorderRadius.circular(12),
child: Image.network(product.imageUrl, fit: BoxFit.cover),
),
),
);
Hero animations are a core part of Material Design and are supported natively in Flutter since version 1.0. They reduce cognitive load by providing visual continuity—a principle backed by research from the Nielsen Norman Group on interface animations.
6. Optimizing List Performance with ListView.builder
Task: Render a list of 10,000 items without jank using ListView.builder and RepaintBoundary.
Prompt:
"Generate a Flutter widget that displays a scrollable list of 10,000 items. Use ListView.builder with itemBuilder. Wrap each item in a RepaintBoundary to avoid repainting the entire list on scroll. Each item should be a ListTile with a leading icon, title, and subtitle. Add a ScrollController to load more items lazily when the user scrolls to the bottom. Return the complete code for LargeListWidget."
Example Result:
class LargeListWidget extends StatefulWidget {
const LargeListWidget({super.key});
@override
State<LargeListWidget> createState() => _LargeListWidgetState();
}
class _LargeListWidgetState extends State<LargeListWidget> {
final ScrollController _scrollController = ScrollController();
List<int> _items = List.generate(10000, (i) => i);
@override
Widget build(BuildContext context) {
return ListView.builder(
controller: _scrollController,
itemCount: _items.length,
itemBuilder: (context, index) {
return RepaintBoundary(
child: ListTile(
leading: const Icon(Icons.star),
title: Text('Item ${_items[index]}'),
subtitle: Text('Description of item ${_items[index]}'),
),
);
},
);
}
}
Using RepaintBoundary is critical for large lists. According to Flutter's official performance documentation, it can reduce frame build times by up to 60% in lists with complex items.
7. Custom Scroll Physics for Carousel
Task: Create a horizontal carousel with snapping behavior using custom scroll physics.
Prompt:
"Write a Flutter widget that displays a horizontal carousel of 5 cards (300px wide each). Use PageView with custom PageController viewportFraction set to 0.8. Implement snapping so the carousel stops exactly on each card. Add a DotIndicator at the bottom that shows the current page index. Use AnimatedContainer for smooth dot transitions. Return the full code for SnappingCarousel."
Example Result:
class SnappingCarousel extends StatefulWidget {
const SnappingCarousel({super.key});
@override
State<SnappingCarousel> createState() => _SnappingCarouselState();
}
class _SnappingCarouselState extends State<SnappingCarousel> {
final PageController _pageController = PageController(viewportFraction: 0.8);
int _currentPage = 0;
@override
Widget build(BuildContext context) {
return Column(
children: [
SizedBox(
height: 200,
child: PageView.builder(
controller: _pageController,
itemCount: 5,
onPageChanged: (index) => setState(() => _currentPage = index),
itemBuilder: (context, index) {
return Container(
margin: const EdgeInsets.symmetric(horizontal: 8),
decoration: BoxDecoration(
color: Colors.primaries[index % Colors.primaries.length],
borderRadius: BorderRadius.circular(20),
),
child: Center(child: Text('Card ${index + 1}')),
);
},
),
),
const SizedBox(height: 16),
DotIndicator(pageController: _pageController, itemCount: 5),
],
);
}
}
Carousels with snapping improve user experience by reducing accidental overscroll. This pattern is used by apps like Airbnb and Spotify.
8. Staggered Grid with flutter_staggered_grid_view
Task: Build a Pinterest-like staggered grid layout for displaying images of varying heights.
Prompt:
"Create a Flutter widget that displays a staggered grid of 20 images using the flutter_staggered_grid_view package. Each tile should have a random height (100–300px) and show an image from a list of placeholder URLs. Use MasonryGridView.count with 2 columns. Add a ClipRRect to round the corners. Return the complete code for StaggeredGridWidget."
Example Result:
class StaggeredGridWidget extends StatelessWidget {
const StaggeredGridWidget({super.key});
@override
Widget build(BuildContext context) {
final images = List.generate(20, (i) => 'https://picsum.photos/seed/$i/300/${100 + (i % 3 * 100)}');
return MasonryGridView.count(
crossAxisCount: 2,
mainAxisSpacing: 8,
crossAxisSpacing: 8,
itemCount: images.length,
itemBuilder: (context, index) {
return ClipRRect(
borderRadius: BorderRadius.circular(12),
child: Image.network(images[index], fit: BoxFit.cover),
);
},
);
}
}
Staggered grids are visually appealing and efficient for content-heavy apps. The package is maintained by the Flutter community and has over 2,000 stars on GitHub as of 2026.
9. Animated Bottom Navigation Bar
Task: Implement a custom animated bottom navigation bar with bouncing icons on selection.
Prompt:
"Write a Flutter widget that replaces the standard BottomNavigationBar with a custom one. Use TweenAnimationBuilder to animate the selected icon's scale to 1.2 with a bounce curve (Curves.elasticOut). Unselected icons should be at scale 0.9 and gray. The bar should have a blurred background using BackdropFilter. Return the complete code for AnimatedBottomNav."
Example Result:
class AnimatedBottomNav extends StatefulWidget {
final int currentIndex;
final ValueChanged<int> onTap;
const AnimatedBottomNav({super.key, required this.currentIndex, required this.onTap});
@override
State<AnimatedBottomNav> createState() => _AnimatedBottomNavState();
}
class _AnimatedBottomNavState extends State<AnimatedBottomNav> {
@override
Widget build(BuildContext context) {
return ClipRRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
child: BottomNavigationBar(
currentIndex: widget.currentIndex,
onTap: widget.onTap,
items: List.generate(4, (index) {
final isSelected = index == widget.currentIndex;
return BottomNavigationBarItem(
icon: TweenAnimationBuilder<double>(
tween: Tween(begin: isSelected ? 1.2 : 0.9, end: isSelected ? 1.2 : 0.9),
duration: const Duration(milliseconds: 300),
curve: Curves.elasticOut,
builder: (context, scale, child) => Transform.scale(scale: scale, child: child),
child: Icon(isSelected ? Icons.home : Icons.home_outlined),
),
label: 'Home',
);
}),
),
),
);
}
}
Custom bottom nav bars are a hallmark of modern app design. The elasticOut curve adds a playful touch without being distracting.
10. State Management with Provider for Theme Switching
Task: Implement a dark/light theme switcher using the Provider package.
Prompt:
"Create a Flutter app that toggles between light and dark themes using ChangeNotifierProvider. Define a ThemeNotifier that holds a ThemeMode (light, dark, system). Use MaterialApp with themeMode from the provider. Add a Switch widget in the settings screen that calls ThemeNotifier.toggleTheme(). Return the complete code for main.dart, theme_provider.dart, and settings_screen.dart."
Example Result (theme_provider.dart):
class ThemeNotifier extends ChangeNotifier {
ThemeMode _themeMode = ThemeMode.system;
ThemeMode get themeMode => _themeMode;
void toggleTheme() {
_themeMode = _themeMode == ThemeMode.light ? ThemeMode.dark : ThemeMode.light;
notifyListeners();
}
}
Provider remains a solid choice for simple state management. It's the recommended approach in the official Flutter documentation for apps with a single global state.
Conclusion
These 10 prompts cover the most critical areas of Flutter development: responsive widgets, state management with Bloc and Riverpod, and animations that delight users. Each prompt is designed to be copy-pasted and adapted to your project, saving you hours of research and debugging. Remember that the best prompts are specific—mention exact packages, constraints, and edge cases. As Flutter continues to evolve (the latest stable version is 3.28 as of July 2026), patterns like Riverpod and custom animations will only become more central. Start with these prompts, experiment, and soon you'll be writing your own to solve unique problems. For more advanced patterns and API integration tutorials, check out the full course catalog at ASI Biont.
Comments