Claude Flutter skill: 10 apps you can ship today

The prompt

Use the flutter-development skill. Scaffold a Flutter app called `notes_app` with three screens (NoteListScreen, NoteDetailScreen, NoteEditScreen), a Note model with id/title/body/updatedAt, a NotesRepository that persists to path_provider's app docs dir as JSON, and a ChangeNotifier-based NotesController exposed via Provider. Material 3, light/dark theme, no third-party state libraries.

What slides.md looks like

class NotesController extends ChangeNotifier {
  NotesController(this._repo);
  final NotesRepository _repo;
  List<Note> _notes = [];
  List<Note> get notes => List.unmodifiable(_notes);

  Future<void> load() async {
    _notes = await _repo.readAll();
    notifyListeners();
  }

  Future<void> upsert(Note n) async {
    await _repo.write(n);
    await load();
  }
}

Pairs with

The prompt

Use the flutter-development skill. Wire firebase_auth and google_sign_in into the Provider scaffold from use case 1. Add a StreamBuilder<User?> at MaterialApp.home that returns SignInScreen() when snapshot.data is null and HomeScreen() otherwise. Generate a SignInScreen with email/password fields and a 'Continue with Google' button. Don't add Firestore yet.

What slides.md looks like

class AuthGate extends StatelessWidget {
  const AuthGate({super.key});
  @override
  Widget build(BuildContext context) {
    return StreamBuilder<User?>(
      stream: FirebaseAuth.instance.authStateChanges(),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const Scaffold(body: Center(child: CircularProgressIndicator()));
        }
        return snapshot.data == null ? const SignInScreen() : const HomeScreen();
      },
    );
  }
}

Pairs with

The prompt

Use the flutter-development skill. Add go_router 12+ to the notes app from use case 2. Define routes for /, /sign-in, /notes, /notes/:id, /notes/:id/edit. Add a redirect that sends unauthenticated users to /sign-in for any route except /sign-in itself. Convert the StreamBuilder gate to a refreshListenable on the GoRouter.

What slides.md looks like

final goRouter = GoRouter(
  refreshListenable: GoRouterRefreshStream(FirebaseAuth.instance.authStateChanges()),
  redirect: (context, state) {
    final loggedIn = FirebaseAuth.instance.currentUser != null;
    final goingToSignIn = state.matchedLocation == '/sign-in';
    if (!loggedIn && !goingToSignIn) return '/sign-in';
    if (loggedIn && goingToSignIn) return '/';
    return null;
  },
  routes: [
    GoRoute(path: '/', builder: (_, __) => const HomeScreen()),
    GoRoute(path: '/sign-in', builder: (_, __) => const SignInScreen()),
    GoRoute(
      path: '/notes/:id',
      builder: (_, s) => NoteDetailScreen(id: s.pathParameters['id']!),
    ),
  ],
);

Pairs with

The prompt

Use the flutter-development skill. Replace the default theme with ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: const Color(0xFF1FB6FF), brightness: Brightness.light)) plus a matching dark scheme. Wrap MyApp in DynamicColorBuilder so Android 12+ wallpapers override the seed. Add a textTheme keyed to GoogleFonts.inter and override only displayLarge/headlineMedium for the in-app brand voice.

What slides.md looks like

MaterialApp(
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(
      seedColor: const Color(0xFF1FB6FF),
      brightness: Brightness.light,
    ),
    textTheme: GoogleFonts.interTextTheme().copyWith(
      displayLarge: GoogleFonts.spaceGrotesk(
        fontSize: 57, fontWeight: FontWeight.w600, letterSpacing: -0.25,
      ),
    ),
    useMaterial3: true,
  ),
  darkTheme: ThemeData(
    colorScheme: ColorScheme.fromSeed(
      seedColor: const Color(0xFF1FB6FF),
      brightness: Brightness.dark,
    ),
    useMaterial3: true,
  ),
  themeMode: ThemeMode.system,
)

Pairs with

The prompt

Use the flutter-development skill. Add a Hero widget around the leading thumbnail in NoteListScreen with `tag: 'note-image-\${note.id}'`. Add a matching Hero in NoteDetailScreen wrapping the AppBar's flexibleSpace image. Override `createRectTween` to use MaterialRectArcTween for a curved arc instead of a straight line. Make sure tags use note.id, never list index.

What slides.md looks like

// In NoteListScreen
Hero(
  tag: 'note-image-${note.id}',
  createRectTween: (begin, end) => MaterialRectArcTween(begin: begin, end: end),
  child: Image.network(note.thumbnailUrl, width: 56, height: 56, fit: BoxFit.cover),
)

// In NoteDetailScreen
SliverAppBar(
  expandedHeight: 240,
  flexibleSpace: FlexibleSpaceBar(
    background: Hero(
      tag: 'note-image-${note.id}',
      child: Image.network(note.thumbnailUrl, fit: BoxFit.cover),
    ),
  ),
)

Pairs with

The prompt

Use the flutter-development skill. Add flutter_riverpod 2.5+ alongside the existing provider package in the notes app. Migrate NoteListScreen and NotesController to a Riverpod AsyncNotifier called notesNotifierProvider. Keep the rest of the app on Provider for now. Wrap MyApp in ProviderScope.

What slides.md looks like

class NotesNotifier extends AsyncNotifier<List<Note>> {
  @override
  Future<List<Note>> build() async {
    final repo = ref.watch(notesRepositoryProvider);
    return repo.readAll();
  }

  Future<void> upsert(Note n) async {
    state = const AsyncValue.loading();
    state = await AsyncValue.guard(() async {
      await ref.read(notesRepositoryProvider).write(n);
      return ref.read(notesRepositoryProvider).readAll();
    });
  }
}

final notesNotifierProvider =
    AsyncNotifierProvider<NotesNotifier, List<Note>>(NotesNotifier.new);

Pairs with

The prompt

Use the flutter-development skill. Add dio, json_annotation, build_runner, and json_serializable to pubspec.yaml. Generate an ApiClient that wraps Dio with a base URL, an AuthInterceptor that injects Bearer tokens from SecureStore, and a RetryInterceptor that retries 5xx responses up to 3 times with exponential backoff. Generate a Note.g.dart via json_serializable. End the prompt with `dart run build_runner build --delete-conflicting-outputs`.

What slides.md looks like

@JsonSerializable()
class Note {
  Note({required this.id, required this.title, required this.body});
  final String id;
  final String title;
  final String body;

  factory Note.fromJson(Map<String, dynamic> json) => _$NoteFromJson(json);
  Map<String, dynamic> toJson() => _$NoteToJson(this);
}

class ApiClient {
  ApiClient(this._dio);
  final Dio _dio;

  Future<List<Note>> fetchNotes() async {
    final res = await _dio.get<List<dynamic>>('/notes');
    return res.data!.map((j) => Note.fromJson(j as Map<String, dynamic>)).toList();
  }
}

Pairs with

The prompt

Use the flutter-development skill. Add a SecureStore class in lib/secure_store.dart exposing read/write/delete via a MethodChannel named 'app/secure_store'. Generate the Swift handler in ios/Runner/AppDelegate.swift backed by Keychain (kSecClassGenericPassword), and the Kotlin handler in android/app/src/main/kotlin/.../MainActivity.kt backed by EncryptedSharedPreferences. Don't pull flutter_secure_storage.

What slides.md looks like

class SecureStore {
  static const _channel = MethodChannel('app/secure_store');

  Future<void> write(String key, String value) async {
    await _channel.invokeMethod<void>('write', {'key': key, 'value': value});
  }

  Future<String?> read(String key) async {
    return _channel.invokeMethod<String>('read', {'key': key});
  }

  Future<void> delete(String key) async {
    await _channel.invokeMethod<void>('delete', {'key': key});
  }
}

Pairs with

The prompt

Use the flutter-development skill. Wrap the HomeScreen in a LayoutBuilder. If constraints.maxWidth < 600, render a Scaffold with NavigationBar bottom tabs. Otherwise render a Row with NavigationRail on the left and Expanded(child: content) on the right. Switch the rail to extended when width >= 1024. Same destinations list in both branches.

What slides.md looks like

class AdaptiveNav extends StatelessWidget {
  const AdaptiveNav({super.key, required this.body, required this.index, required this.onChange});
  final Widget body;
  final int index;
  final ValueChanged<int> onChange;

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (context, c) {
      if (c.maxWidth < 600) {
        return Scaffold(
          body: body,
          bottomNavigationBar: NavigationBar(
            selectedIndex: index,
            onDestinationSelected: onChange,
            destinations: _destinations,
          ),
        );
      }
      return Scaffold(
        body: Row(children: [
          NavigationRail(
            extended: c.maxWidth >= 1024,
            selectedIndex: index,
            onDestinationSelected: onChange,
            destinations: _railDestinations,
          ),
          const VerticalDivider(width: 1),
          Expanded(child: body),
        ]),
      );
    });
  }
}

Pairs with

The prompt

Use the flutter-development skill. Configure the notes app for Flutter Web. Replace web/index.html with a skeleton that shows a CSS-only loading state until Flutter renders. Add a firebase.json with cache-control: max-age=0 for index.html and max-age=31536000,immutable for /assets/**. Generate the deploy command using `flutter build web --release --wasm` and `firebase deploy --only hosting`.

What slides.md looks like

// firebase.json
{
  "hosting": {
    "public": "build/web",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [{ "source": "**", "destination": "/index.html" }],
    "headers": [
      { "source": "/index.html",
        "headers": [{ "key": "Cache-Control", "value": "max-age=0, must-revalidate" }] },
      { "source": "/assets/**",
        "headers": [{ "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }] }
    ]
  }
}

Pairs with