Flutter Development Patterns

Ta treść nie jest jeszcze dostępna w Twoim języku.

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.

Quick Setup for Flutter Projects

Open Cursor in your workspace
Launch Agent mode (Cmd/Ctrl + I)
Prompt: “Create a new Flutter app with:
- Material 3 design
- Riverpod state management
- Go_router navigation
- Dio for networking
- Freezed for data classes”
Let the agent handle Flutter CLI and package setup

Open terminal in Claude Code
Run: claude "Set up Flutter project with clean architecture"
Claude will create the folder structure and dependencies
Review the generated architecture

Creating Custom Widgets

Stateless Widget
Stateful Widget

// 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
  }
}

// Prompt: "Create an AnimatedCounter widget with:
// - Smooth number transitions
// - Customizable duration
// - Number formatting support
// - Accessibility features"

State Management Patterns

Riverpod Setup

// 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"

Advanced Riverpod Patterns

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"

Go_router Setup

// Comprehensive navigation prompt:
"Implement go_router with:
- Nested navigation
- Auth guards
- Deep linking
- Web URL support
- Custom transitions
- Error handling"

Basic Routes
Auth Flow

// 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);
          },
        ),
      ],
    ),
  ],
);

// Prompt: "Add authentication flow with:
// - Login redirect
// - Protected routes
// - Refresh token handling"

UI/UX Patterns

Responsive Design

// 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"

Custom Themes

Generate Theme: “Create Material 3 theme with custom color scheme”
Add Dark Mode: “Implement dark mode with system preference detection”
Custom Components: “Style all Material components to match brand”
Dynamic Theming: “Add runtime theme switching with persistence”

Platform Integration

Native Features

Camera Integration
Location Services

// Cursor Agent prompt:
"Implement camera feature with:
- Photo capture
- Video recording
- Gallery picker
- Image compression
- iOS/Android permissions"

// Prompt: "Add location tracking with:
// - Current position
// - Background updates
// - Geofencing
// - Battery optimization"

Testing Patterns

// 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"

Integration Testing

Setup: “Configure integration_test package”
Write Tests: “Create end-to-end test for user onboarding”
CI Integration: “Add integration tests to GitHub Actions”

Performance Optimization

Build Optimization

AI-Assisted Performance

Cursor/Claude can help with:

Const constructor usage
Widget rebuilds optimization
Image caching strategies
Lazy loading implementation
Memory leak detection

Profiling Patterns

// Performance monitoring prompt:
"Add performance tracking for:
- Widget build times
- Frame rendering metrics
- Memory usage
- Network request duration
- Include DevTools integration"

Data & Networking

API 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"

Local Storage

SharedPreferences
SQLite

// Simple storage prompt:
"Create settings service with:
- Type-safe preference keys
- Migration support
- Default values
- Stream updates"

// Database prompt:
"Implement SQLite with Drift for:
- User data storage
- Full-text search
- Migrations
- Reactive queries"

Architecture Patterns

Clean Architecture

// 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"

Common Recipes

Authentication Flow

// 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"

Infinite Scroll

// Pagination pattern:
"Create infinite scroll list with:
- Lazy loading
- Pull to refresh
- Error state handling
- Loading indicators
- Empty state
- Network efficiency"

Form Handling

Create Form: “Build multi-step form with validation”
Add Validation: “Implement real-time and submit validation”
Error Handling: “Show inline errors with accessibility”
State Management: “Persist form state across app restarts”

Debugging Workflows

DevTools Integration

// Debugging setup prompt:
"Configure Flutter DevTools with:
- Custom inspector properties
- Performance overlays
- Memory profiling markers
- Network debugging
- Widget tree optimization hints"

Error Handling

Comprehensive Error Strategy

AI can implement:

Global error boundaries
Crash reporting (Sentry/Firebase)
User-friendly error screens
Recovery mechanisms
Debug vs release behavior

Deployment Patterns

Build Configuration

Android
iOS

# Cursor prompt: "Configure Android build with:
# - App signing
# - ProGuard rules
# - Multi-APK support
# - Play Store metadata"

# Prompt: "Set up iOS build with:
# - Code signing
# - App Store Connect
# - TestFlight distribution
# - App clips support"

Best Practices with AI

Effective Flutter Prompts

// 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"

Code Generation Tips

Advanced Patterns

Custom Painters

// Complex UI prompt:
"Create custom painter for:
- Animated wave background
- Gradient mesh effect
- Responsive to theme
- Performance optimized
- With customizable parameters"

Platform Channels

// Native integration prompt:
"Implement platform channel for:
- iOS HealthKit integration
- Android Health Connect
- Type-safe communication
- Error handling
- Mock implementation for tests"

Next Steps

Try Expo patterns for React Native
Explore Backend integration for API development
Learn Testing strategies for comprehensive coverage