flutter-native-interop
Cross-platform native interoperability for Flutter apps on Android, iOS, and Web.
- Provides decision logic to select the optimal integration strategy: FFI for C/C++ code, Platform Channels for OS-specific APIs, Platform Views for native UI components, and JS Interop for web
- Implements modern FFI architecture using build hooks (Flutter 3.38+) with native toolchain compilation and Dart bindings
- Supports asynchronous Platform Channels (MethodChannel) with complete Kotlin and Swift implementations for bidirectional communication
- Enforces thread safety constraints, WebAssembly compatibility via
package:webanddart:js_interop, and platform-specific performance best practices
Flutter Platform Integration
Goal
Integrates Flutter applications with platform-specific code and native features across Android, iOS, and Web environments. Determines the optimal interoperability strategy (FFI, Platform Channels, Platform Views, or JS Interop) and implements the necessary Dart and native code bindings while adhering to thread safety, WebAssembly (Wasm) compatibility, and modern build hook standards.
Instructions
1. Determine Integration Strategy (Decision Logic)
Evaluate the user's requirements using the following decision tree to select the correct integration path:
- Scenario A: Calling native C/C++ code.
- Action: Use
dart:ffiwith thepackage_ffitemplate and build hooks. - Exception: If accessing the Flutter Plugin API or requiring static linking on iOS, use the legacy
plugin_ffitemplate.
- Action: Use
- Scenario B: Calling OS-specific APIs (Java/Kotlin for Android, Swift/Obj-C for iOS).
- Action: Use Platform Channels (
MethodChannel) or thepigeonpackage for type-safe code generation.
- Action: Use Platform Channels (
- Scenario C: Embedding native UI components into the Flutter widget tree.
- Action: Use Platform Views (
AndroidView/AndroidViewSurfacefor Android,UiKitViewfor iOS).
- Action: Use Platform Views (
- Scenario D: Web integration and JavaScript APIs.
- Action: Use
package:webanddart:js_interop(Wasm-compatible). UseHtmlElementViewfor embedding web content.
- Action: Use
More from flutter/skills
flutter-building-layouts
Builds Flutter layouts using the constraint system and layout widgets. Use when creating or refining the UI structure of a Flutter application.
10.6Kflutter-architecting-apps
Architects a Flutter application using the recommended layered approach (UI, Logic, Data). Use when structuring a new project or refactoring for scalability.
10.4Kflutter-animating-apps
Implements animated effects, transitions, and motion in a Flutter app. Use when adding visual feedback, shared element transitions, or physics-based animations.
9.6Kflutter-managing-state
Manages application and ephemeral state in a Flutter app. Use when sharing data between widgets or handling complex UI state transitions.
9.6Kflutter-theming-apps
Customizes the visual appearance of a Flutter app using the theming system. Use when defining global styles, colors, or typography for an application.
9.5Kflutter-implementing-navigation-and-routing
Handles routing, navigation, and deep linking in a Flutter application. Use when moving between screens or setting up URL-based navigation.
9.3K