Skip to content

Flutter Development Patterns

Accelerate Flutter development with Cursor IDE and Claude Code. These patterns cover widget creation, state management, platform integration, and the unique features that make Flutter a powerful choice for cross-platform development.

  1. Open Cursor in your workspace
  2. Launch Agent mode (Cmd/Ctrl + I)
  3. Prompt: “Create a new Flutter app with:
    • Material 3 design
    • Riverpod state management
    • Go_router navigation
    • Dio for networking
    • Freezed for data classes”
  4. Let the agent handle Flutter CLI and package setup
// Cursor prompt for custom widgets:
"Create a CustomCard widget that:
- Accepts title, subtitle, and leading icon
- Has Material 3 elevation and theming
- Supports onTap callback
- Includes hero animation support"
// Agent generates:
import 'package:flutter/material.dart';
class CustomCard extends StatelessWidget {
final String title;
final String? subtitle;
final IconData? leadingIcon;
final VoidCallback? onTap;
final String? heroTag;
const CustomCard({
super.key,
required this.title,
this.subtitle,
this.leadingIcon,
this.onTap,
this.heroTag,
});
@override
Widget build(BuildContext context) {
// Implementation with Material 3 theming
}
}
// Cursor Agent prompt:
"Set up Riverpod with:
1. Authentication state provider
2. User profile provider with async loading
3. Theme mode provider
4. Language preference provider
Include proper error handling and loading states"

Async Providers

// Prompt: "Create async provider for user data with:
// - Caching
// - Refresh capability
// - Error recovery
// - Family modifier for parameters"

State Notifiers

// Prompt: "Implement shopping cart with:
// - Add/remove items
// - Quantity updates
// - Price calculation
// - Persistence"
// Comprehensive navigation prompt:
"Implement go_router with:
- Nested navigation
- Auth guards
- Deep linking
- Web URL support
- Custom transitions
- Error handling"
// Cursor will generate:
final router = GoRouter(
routes: [
GoRoute(
path: '/',
builder: (context, state) => const HomePage(),
routes: [
GoRoute(
path: 'details/:id',
builder: (context, state) {
final id = state.pathParameters['id']!;
return DetailsPage(id: id);
},
),
],
),
],
);
// Cursor prompt for responsive layouts:
"Create a responsive dashboard that:
- Uses LayoutBuilder for breakpoints
- Adapts navigation (drawer vs rail vs bottom nav)
- Responsive grid layout
- Maintains state across layout changes"
  1. Generate Theme: “Create Material 3 theme with custom color scheme”
  2. Add Dark Mode: “Implement dark mode with system preference detection”
  3. Custom Components: “Style all Material components to match brand”
  4. Dynamic Theming: “Add runtime theme switching with persistence”
// Cursor Agent prompt:
"Implement camera feature with:
- Photo capture
- Video recording
- Gallery picker
- Image compression
- iOS/Android permissions"
// Comprehensive test generation:
"Write widget tests for CustomCard including:
- Golden tests for visual regression
- Interaction tests (tap, long press)
- Accessibility tests
- Theme variation tests
- Error state tests"
  1. Setup: “Configure integration_test package”
  2. Write Tests: “Create end-to-end test for user onboarding”
  3. CI Integration: “Add integration tests to GitHub Actions”

AI-Assisted Performance

Cursor/Claude can help with:

  • Const constructor usage
  • Widget rebuilds optimization
  • Image caching strategies
  • Lazy loading implementation
  • Memory leak detection
// Performance monitoring prompt:
"Add performance tracking for:
- Widget build times
- Frame rendering metrics
- Memory usage
- Network request duration
- Include DevTools integration"
// Cursor prompt for API setup:
"Create API service with Dio that includes:
- Interceptors for auth tokens
- Request/response logging
- Error handling with retry
- Offline queue
- Type-safe models with Freezed"
// Simple storage prompt:
"Create settings service with:
- Type-safe preference keys
- Migration support
- Default values
- Stream updates"
// Comprehensive architecture prompt:
"Set up clean architecture with:
- Domain layer (entities, use cases)
- Data layer (repositories, data sources)
- Presentation layer (pages, view models)
- Dependency injection with get_it
- Error handling strategy"
// Complete auth implementation:
"Implement authentication with:
1. Email/password login
2. Social login (Google, Apple)
3. Biometric authentication
4. Session management
5. Auto-logout on inactivity"
// Pagination pattern:
"Create infinite scroll list with:
- Lazy loading
- Pull to refresh
- Error state handling
- Loading indicators
- Empty state
- Network efficiency"
  1. Create Form: “Build multi-step form with validation”
  2. Add Validation: “Implement real-time and submit validation”
  3. Error Handling: “Show inline errors with accessibility”
  4. State Management: “Persist form state across app restarts”
// Debugging setup prompt:
"Configure Flutter DevTools with:
- Custom inspector properties
- Performance overlays
- Memory profiling markers
- Network debugging
- Widget tree optimization hints"

Comprehensive Error Strategy

AI can implement:

  • Global error boundaries
  • Crash reporting (Sentry/Firebase)
  • User-friendly error screens
  • Recovery mechanisms
  • Debug vs release behavior
# Cursor prompt: "Configure Android build with:
# - App signing
# - ProGuard rules
# - Multi-APK support
# - Play Store metadata"
// Structure your prompts like:
"Create a [Widget type] that:
- Follows Material 3 guidelines
- Supports [specific features]
- Handles [edge cases]
- Includes [platform-specific code]
- Has comprehensive documentation"
// Complex UI prompt:
"Create custom painter for:
- Animated wave background
- Gradient mesh effect
- Responsive to theme
- Performance optimized
- With customizable parameters"
// Native integration prompt:
"Implement platform channel for:
- iOS HealthKit integration
- Android Health Connect
- Type-safe communication
- Error handling
- Mock implementation for tests"