---
name: flutter-cross-platform
description: "Build iOS, Android, and web apps from one Flutter codebase with BLoC and Riverpod. A Flutter architect who scaffolds cross-platform screens, implements BLoC and Riverpod state management, writes widget tests, and configures CI for Google Play + App Store releases."
license: BSD-3-Clause
---

# Flutter Cross-Platform Builder

A Flutter architect that scaffolds production screens from a single Dart codebase targeting iOS, Android, and the web. It sets up state management with either flutter_bloc or Riverpod, writes widget and bloc tests, and wires up CI pipelines for Google Play and App Store delivery. Built for mobile teams who want consistent architecture instead of ad-hoc `setState` sprawl, and for solo developers shipping to all three platforms at once.

## When to use it

- Starting a new app and you want a clean folder structure (feature-first layout, separated `data/`, `domain/`, `presentation/` layers) before writing screens.
- Migrating a screen from `setState` to BLoC's event/state model or Riverpod providers.
- Adding `flutter test` coverage for widgets, blocs (via `bloc_test`), and notifiers.
- Configuring fastlane + GitHub Actions for signed `.aab` and `.ipa` uploads.

## How it works

The skill generates idiomatic Flutter. For BLoC it creates `Event`, `State`, and `Bloc` classes wired through `BlocProvider` and consumed with `BlocBuilder`/`BlocListener`, using `emit` inside `on<Event>` handlers. For Riverpod it favors `Notifier`/`AsyncNotifier` with `@riverpod` code generation (`riverpod_generator`), exposing providers through `ConsumerWidget` and `ref.watch`/`ref.read`.

It runs `flutter create`, manages dependencies in `pubspec.yaml`, and respects `flutter gen-l10n` for localization. Tests use `flutter_test`, `bloc_test`, and `mocktail`. For releases it scaffolds fastlane lanes (`supply` for Play, `pilot`/`deliver` for App Store) plus an Actions workflow running `flutter build appbundle` and `flutter build ipa`.

## Example

```bash
curl -fsSL --create-dirs -o ~/.claude/skills/flutter-cross-platform/SKILL.md https://claudeskil.com/skills/flutter-cross-platform/SKILL.md

# then, in your repo:
"Scaffold a login feature using Riverpod with an AsyncNotifier,
 add a widget test, and set up the GitHub Actions release workflow."
```

Generated provider sketch:

```dart
@riverpod
class AuthController extends _$AuthController {
  @override
  FutureOr<User?> build() => null;

  Future<void> signIn(String email, String pw) async {
    state = const AsyncLoading();
    state = await AsyncValue.guard(() => _repo.signIn(email, pw));
  }
}
```

## Tips & gotchas

- Pick one state solution per project. Mixing BLoC and Riverpod in the same feature creates two sources of truth — the skill will ask which to standardize on.
- Riverpod code-gen requires `dart run build_runner watch -d`; the skill adds this but you must keep it running during development.
- Web builds need `flutter build web --wasm` or the CanvasKit renderer for pixel-consistent rendering; HTML renderer behaves differently on text and shadows.
- iOS releases still require macOS for `flutter build ipa`; the CI workflow uses a `macos-latest` runner for that job and `ubuntu-latest` for Android.

## FAQ

**BLoC or Riverpod — which does it recommend?** Riverpod for greenfield apps wanting compile-safe DI and less boilerplate; BLoC when your team already knows the event/state pattern or needs explicit, traceable transitions.

**Does it handle signing?** It scaffolds the config (keystore references, `ExportOptions.plist`, fastlane match) but you supply secrets via CI environment variables — credentials are never written to the repo.

**Can it test navigation and async UI?** Yes — it uses `pumpAndSettle`, `bloc_test`'s `expect` matchers, and `mocktail` stubs to cover async states and route transitions.