☂️ Skill roadmap

Milestone | Category | Name | Description
-- | -- | -- | --
P1 | Navigation and Routing | flutter-implement-imperative-navigation | Use `Navigator.push` and `Navigator.pop` to move between screens in a stack-based fashion. Use when building a simple application that does not require deep linking or complex URL-based routing.
P1 | Getting Started | flutter-install-on-macos | Install and configure Xcode, command-line tools, and CocoaPods on a macOS machine. Use when preparing a new or existing macOS environment for building Flutter iOS or macOS applications.
P1 | Getting Started | flutter-install-on-windows | Sets up a Windows environment for Flutter development. Use when configuring a Windows machine to run, build, or deploy Flutter applications for Windows desktop or Android.
P1 | Getting Started | flutter-install-on-linux | Sets up a Linux environment for Flutter development. Use when configuring a Linux machine to run, build, or deploy Flutter applications.
P1 | Animation | flutter-add-explicit-animation | Configure an AnimationController and AnimatedBuilder to provide granular control over an animation's lifecycle (play, pause, reverse). Use when you need to coordinate multiple properties, loop animations, or have fine-grained control over timing.
P1 | Animation | flutter-add-implicit-animation | Replace a static widget with an animated version (e.g., AnimatedContainer, AnimatedOpacity) to fire-and-forget simple property changes. Use when you need to animate basic properties like color, size, or opacity without needing complex playback control.
P1 | UI | flutter-migrate-to-material3-theme | Define a `ThemeData` instance using `ColorScheme.fromSeed` to create a modern Material 3 design system. Use when initializing a new app's visual identity or migrating from Material 2.
P1 | Persistence | flutter-implement-file-persistence | Use `path_provider` to locate the application's document or temporary directories and use `dart:io` to read/write files. Use when you need to cache large binary data, logs, or raw text files locally.
P1 | Concurrency | flutter-offload-cpu-task | Use `Isolate.run()` to offload a CPU-intensive, one-off task (like parsing a large JSON string or image processing) to a background isolate. Use when a task takes more than 16ms and would cause UI jank if run on the main thread.
P1 | Plugins | flutter-initialize-plugin-project | Use `flutter create --template=plugin` to initialize a new plugin package with support for specific platforms. Use when starting a new project that requires native interoperability.
P1 | Native views | flutter-embed-android-view | Use `AndroidView` or `AndroidViewSurface` to embed a native Android view into the Flutter widget tree. Use when integrating complex Android-specific components like Google Maps or native ads.
P1 | Native views | flutter-embed-ios-view | Use `UiKitView` to embed a native iOS `UIView` into the Flutter widget tree. Use when integrating iOS-specific components like `WKWebView` or `ARKit`.
P1 | Native views | flutter-embed-web-view | Configure `flutter_bootstrap.js` and `main.dart` to enable Multi-view mode for Flutter Web. Use when you need to embed multiple Flutter widgets into different HTML elements of an existing web application.
P1 | Add to app | flutter-add-to-app-on-ios | Integrate a Flutter module into your iOS project. Use when adding Flutter views into an existing iOS app.
P1 | Add to app | flutter-add-to-app-on-android | Integrate a Flutter module into your Android project. Use when adding Flutter views into an existing Android app.
P1 | Data | flutter-setup-json-serializable | Configure json_serializable and build_runner...
P1 | State restoration | flutter-implement-state-restoration | Use `RestorationManager` and `RestorationMixin` to persist and restore scroll positions, text field input, and navigation state. Use when you want to provide a seamless user experience if the OS kills the app in the background.
P1 | Deep linking | flutter-validate-deep-links | Triggers a deep link via the terminal tool and verifies through the widget_inspector that the navigator reached the intended route.
P2 | Concurrency | flutter-setup-long-lived-worker-isolate | Use `Isolate.spawn` along with `ReceivePort` and `SendPort` to establish a persistent background worker. Use for continuous or repeated tasks that require bidirectional message passing, such as a background audio processor or real-time simulation logic.
P2 | Animation | flutter-implement-hero-transition | Wrap widgets in Hero widgets with matching tags across different routes to create shared element transitions. Use when navigating between screens where a specific element should "fly" from the source to the destination.
P2 | Plugins | flutter-implement-js-interop | Use `package:web` and `dart:js_interop` to interact with JavaScript and browser APIs in a Flutter Web app. Use for calling JavaScript libraries or accessing DOM features not exposed by the Flutter framework.
P3 | Platform | flutter-setup-home-screen-widget | Adds home screen widgets to a Flutter app for Android and iOS. Use when providing glanceable app information or quick actions on the device home screen.
P3 | App Size | flutter-audit-assets-size | Manually or programmatically inspect `pubspec.yaml` and the `assets/` directory to remove unreferenced files and compress oversized images. Use when you identify that assets are the primary contributor to app size.
P3 | Plugins | flutter-implement-federated-plugin | Split a plugin into app-facing, platform interface, and platform implementation packages. Use when building a complex plugin that needs to support many platforms with independent maintainers.
P3 | Plugins | flutter-setup-pigeon-channel | Configure `package:pigeon` to generate type-safe platform channel communication between Dart and native host languages (Kotlin, Swift). Use when building complex or frequently updated APIs that bridge Flutter with the host OS.
P3 | Performance | flutter-cache-android-engine | Pre-warm a `FlutterEngine` in the Android `Application` class and store it in `FlutterEngineCache`. Use when adding Flutter to an existing Android app to eliminate the "blank screen" during the initial transition.
P3 | Native views | flutter-enable-web-multi-view | Configure `flutter_bootstrap.js` and `main.dart` to enable Multi-view mode for Flutter Web. Use when you need to embed multiple Flutter widgets into different HTML elements of an existing web application.
P3 | Plugins | flutter-implement-ffi-binding | Use `dart:ffi` and `ffigen` to bind Dart to a native C or C++ library. Use when you need to execute high-performance native logic or use an existing native library without the overhead of message passing.