Articles/Claude Code

⟐ Claude Code/2026-04-07Advanced

Claude Code × Flutter: Complete App Development Guide — Accelerating Mobile Development with Dart and AI

A practical guide to using Claude Code for Flutter development. From auto-generating Dart code to state management, UI design, test automation, and App Store submission — a complete roadmap for indie developers.

flutter dart mobile⁶ claude-code¹⁶⁵ app-development⁴ ios¹³ android⁷

✦ Premium Article

Setup and context — How Flutter × Claude Code Transforms Indie Development

Flutter is Google's framework for building natively compiled apps for iOS, Android, web, and desktop from a single codebase. For indie developers running both App Store and Google Play in 2026, it remains one of the most rational choices available.

That said, Flutter development has its own learning curve: Dart's unique syntax, deeply nested widget trees, the variety of state management libraries (Riverpod, Bloc, Provider), and the complexity of platform-specific configuration files. Even experienced developers spend significant time on these areas.

Claude Code substantially eliminates these friction points. This guide walks through a practical workflow — from project setup to App Store submission — using Claude Code at every stage.

If you haven't set up Claude Code yet, check out the Claude Code workflow automation guide first.

1. Setting Up Claude Code for a Flutter Project

Giving Claude Code Project Context via CLAUDE.md

For Claude Code to generate accurate Flutter code, it needs project-specific context upfront. Create a CLAUDE.md at your project root:

# MyApp — CLAUDE.md
 
## Tech Stack
- Flutter 3.24 / Dart 3.5
- State management: Riverpod 2.x (StateNotifier + AsyncNotifier patterns)
- Routing: go_router 13.x
- Networking: dio + retrofit
- Local DB: Hive 4.x
- Testing: flutter_test + mocktail + integration_test
 
## Directory Structure
lib/
├── features/        # Feature-first architecture
│   └── {feature}/
│       ├── data/    # Repository / DataSource
│       ├── domain/  # UseCase / Entity
│       └── presentation/ # Page / ViewModel
├── core/            # Shared utilities
└── generated/       # Riverpod code generation output
 
## Coding Conventions
- All widgets extend ConsumerWidget
- Async operations use AsyncNotifierProvider
- No Navigator.push — use go_router's context.go / context.push
- l10n: ARB files with Japanese + English required
 
## Testing Strategy
- Business logic: Unit tests (80%+ coverage)
- UI: WidgetTests (critical paths only)
- E2E: integration_test (5+ major flows)

With this CLAUDE.md loaded, Claude Code understands your architecture before writing a single line.

Recommended .claude/settings.json

{
  "permissions": {
    "allow": [
      "Bash(flutter:*)",
      "Bash(dart:*)",
      "Bash(fvm:*)",
      "Write(lib/**)",
      "Write(test/**)",
      "Write(integration_test/**)"
    ]
  }
}

Explicitly allowing flutter and dart commands means Claude Code can run flutter pub get, dart format, and flutter test autonomously after generating code.

✦

Thank you for reading this far.

Continue Reading

What follows includes implementation code, benchmarks, and practical content we hope you'll find useful. This site runs without ads — server and development costs are supported entirely by members like you. If it's been helpful, we'd be truly grateful for your support.

WHAT YOU'LL LEARN

✦Learn how to design a CLAUDE.md system prompt that gives Claude Code accurate Flutter project context

✦Practical patterns for auto-generating and refactoring Riverpod / Bloc state management code

✦How to delegate WidgetTest and integration_test writing to Claude Code, cutting QA effort by 70%

Secure payment via Stripe · Cancel anytime

2. Auto-Generating Riverpod State Management

Scaffolding AsyncNotifierProvider

The highest learning-curve part of Riverpod is the AsyncNotifierProvider boilerplate. Pass this prompt to Claude Code for a fully project-compliant implementation:

Create a WallpaperListNotifier that fetches a wallpaper list.
- Use AsyncNotifierProvider
- Constructor-inject WallpaperRepository
- Support cursor-based pagination
- Error handling: distinguish NetworkException vs ServerException
- Implement optimistic updates when toggling favorites
- Output to lib/features/wallpaper/presentation/wallpaper_list_notifier.dart

Generated code skeleton:

// lib/features/wallpaper/presentation/wallpaper_list_notifier.dart
import 'package:riverpod_annotation/riverpod_annotation.dart';
import '../data/wallpaper_repository.dart';
import '../domain/wallpaper.dart';
 
part 'wallpaper_list_notifier.g.dart';
 
@riverpod
class WallpaperListNotifier extends _$WallpaperListNotifier {
  @override
  Future<List<Wallpaper>> build() async {
    return _fetchPage(null);
  }
 
  Future<List<Wallpaper>> _fetchPage(String? cursor) async {
    final repo = ref.read(wallpaperRepositoryProvider);
    try {
      return (await repo.fetchWallpapers(cursor: cursor)).items;
    } on NetworkException catch (e) {
      throw WallpaperNetworkError(message: e.message);
    } on ServerException catch (e) {
      throw WallpaperServerError(statusCode: e.statusCode);
    }
  }
 
  /// Toggle favorite with optimistic update
  Future<void> toggleFavorite(String wallpaperId) async {
    final previous = state;
    state = AsyncData(
      state.value!.map((w) =>
        w.id == wallpaperId ? w.copyWith(isFavorite: !w.isFavorite) : w
      ).toList(),
    );
    try {
      await ref.read(wallpaperRepositoryProvider).toggleFavorite(wallpaperId);
    } catch (e) {
      state = previous; // rollback
      rethrow;
    }
  }
}

After generation, instruct Claude Code to run flutter pub run build_runner build to produce the .g.dart file automatically.

Generating go_router Configuration

Generate a go_router setup for the following screen structure:

- /: Home (no auth required)
- /wallpapers: Wallpaper list (no auth)
- /wallpapers/:id: Wallpaper detail (no auth)
- /favorites: Favorites (requires auth → redirect to /login if not authenticated)
- /login: Login
- /settings: Settings (requires auth)

Auth state managed by authNotifierProvider.
Implement bottom navigation with ShellRoute.

3. Efficient UI Component Generation

Generating Widgets Against Your Design System

The key to consistent widget generation is defining design tokens first:

// lib/core/theme/app_theme.dart
// Load this file into Claude Code before requesting widgets
 
class AppColors {
  static const primary = Color(0xFF6750A4);
  static const onPrimary = Color(0xFFFFFFFF);
  static const surface = Color(0xFFFEF7FF);
}
 
class AppTextStyles {
  static const headlineLarge = TextStyle(
    fontSize: 32, fontWeight: FontWeight.w400,
  );
}

With this loaded, "create a wallpaper card widget" will produce code using your exact design tokens.

Auto-Implementing Responsive Layouts

Create WallpaperGridView:
- Phone (< 600px): 2 columns
- Tablet (600–900px): 3 columns
- Desktop (> 900px): 4 columns
- Cards maintain 9:16 aspect ratio
- Hero animation to detail screen
- Infinite scroll with auto-load on bottom reach

4. Auto-Generated Tests for Quality Assurance

Generating WidgetTests

Generate WidgetTests for the WallpaperCard widget below.

Test cases:
1. Normal rendering (title and thumbnail visible)
2. Tapping the favorite button calls toggleFavorite
3. Placeholder shown on network image load error
4. Color verification in dark mode

Use mocktail to mock the repository.

Generated test skeleton:

// test/features/wallpaper/presentation/wallpaper_card_test.dart
import 'package:flutter_test/flutter_test.dart';
import 'package:mocktail/mocktail.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
 
class MockWallpaperRepository extends Mock
    implements WallpaperRepository {}
 
void main() {
  late MockWallpaperRepository mockRepo;
 
  setUp(() => mockRepo = MockWallpaperRepository());
 
  group('WallpaperCard', () {
    testWidgets('displays title and thumbnail', (tester) async {
      const wallpaper = Wallpaper(
        id: 'test-1', title: 'Test Wallpaper',
        imageUrl: 'https://example.com/test.jpg', isFavorite: false,
      );
      await tester.pumpWidget(
        ProviderScope(
          overrides: [
            wallpaperRepositoryProvider.overrideWithValue(mockRepo),
          ],
          child: const MaterialApp(
            home: Scaffold(body: WallpaperCard(wallpaper: wallpaper)),
          ),
        ),
      );
      expect(find.text('Test Wallpaper'), findsOneWidget);
      expect(find.byType(CachedNetworkImage), findsOneWidget);
    });
  });
}

5. Automating Platform-Specific Configuration

iOS / Android Permissions

Add the following permissions to the project:

iOS (Info.plist):
- Photo library save access (NSPhotoLibraryAddUsageDescription)
- Push notifications

Android (AndroidManifest.xml):
- WRITE_EXTERNAL_STORAGE (API 28 and below)
- READ_MEDIA_IMAGES (API 33+)
- INTERNET
- RECEIVE_BOOT_COMPLETED (background tasks)

Update both config files and generate runtime permission
request code using permission_handler.

Release Build Scripts

# iOS App Store build
flutter build ipa --release \
  --export-options-plist=ios/ExportOptions.plist
 
# Android App Bundle
flutter build appbundle --release \
  --target-platform android-arm,android-arm64,android-x64

6. Automated Localization (ARB)

Generating English ARB from Japanese

Given lib/l10n/app_ja.arb, generate app_en.arb with natural
English translations. Use idiomatic phrasing for an English-speaking
audience — don't translate literally.

// Generated app_en.arb
{
  "@@locale": "en",
  "appTitle": "Wallpaper Collection",
  "favoriteAdded": "Added {title} to favorites",
  "@favoriteAdded": {
    "description": "Favorite added message",
    "placeholders": { "title": { "type": "String" } }
  }
}

7. Performance Optimization

Common Flutter Performance Issues Claude Code Can Fix

Optimize the following code:
- Apply const constructors where possible
- Add RepaintBoundary for expensive subtrees
- Convert ListView to ListView.builder
- Fix Provider scope causing unnecessary rebuilds

Analyzing Flutter DevTools Output

Paste a timeline JSON from Flutter DevTools and ask Claude Code to identify rebuild hotspots and suggest targeted fixes.

8. App Store Submission Metadata

Generating ASO-Optimized Metadata

Generate App Store Connect metadata for wallpaper app "WallpaperX":

Key features:
- 8,000+ high-resolution wallpapers in organized categories
- New wallpapers added daily
- Favorites management and custom collections
- iOS 16+, iPad supported

Needed:
- Title (30 chars max)
- Subtitle (30 chars max)
- Promotional text (170 chars max)
- Description (4,000 chars max)
- Keywords (100 chars max)
- Both English and Japanese

Summary

Claude Code × Flutter is a powerful combination for indie mobile developers. Key takeaways:

CLAUDE.md context sharing produces architecture-consistent code without repeated explanation
Riverpod state management and go_router routing are ideal Claude Code targets due to their boilerplate-heavy nature
Auto-generated WidgetTests and integration_tests dramatically cut QA effort
ARB localization automation lowers the barrier to English-market expansion
App Store metadata generation doubles as ASO optimization

Explore Claude Code's parallel development workflow for the next step in scaling your productivity.

Thank You for Reading

Claude Lab is ad-free, supported entirely by members like you. We publish practical guides daily with implementation code, benchmarks, and production-ready patterns. If you've found it useful, we'd love to have you on board.