| 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. |
Navigator.pushandNavigator.popto 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.ThemeDatainstance usingColorScheme.fromSeedto create a modern Material 3 design system. Use when initializing a new app's visual identity or migrating from Material 2.path_providerto locate the application's document or temporary directories and usedart:ioto read/write files. Use when you need to cache large binary data, logs, or raw text files locally.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.flutter create --template=pluginto initialize a new plugin package with support for specific platforms. Use when starting a new project that requires native interoperability.AndroidVieworAndroidViewSurfaceto embed a native Android view into the Flutter widget tree. Use when integrating complex Android-specific components like Google Maps or native ads.UiKitViewto embed a native iOSUIViewinto the Flutter widget tree. Use when integrating iOS-specific components likeWKWebVieworARKit.flutter_bootstrap.jsandmain.dartto 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.RestorationManagerandRestorationMixinto 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.Isolate.spawnalong withReceivePortandSendPortto 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.package:webanddart:js_interopto 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.pubspec.yamland theassets/directory to remove unreferenced files and compress oversized images. Use when you identify that assets are the primary contributor to app size.package:pigeonto 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.FlutterEnginein the AndroidApplicationclass and store it inFlutterEngineCache. Use when adding Flutter to an existing Android app to eliminate the "blank screen" during the initial transition.flutter_bootstrap.jsandmain.dartto 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.dart:ffiandffigento 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.