flutter-platform-views

SKILL.md

Embed native views and web content into Flutter apps across Android, iOS, macOS, and web platforms.

Supports Android Hybrid Composition (native fidelity) and Texture Layer (Flutter performance), iOS/macOS Hybrid Composition, and web full-page or embedded multi-view modes

Provides complete Dart and native code templates (Kotlin for Android, Swift for iOS/macOS, JavaScript for web) with factory registration patterns

Requires decision tree upfront to determine target platform and embedding strategy before implementation

Includes validation checks for Android API 23+, manual view invalidation for SurfaceView, and multi-view web constraints (runWidget instead of runApp)

flutter-platform-views-and-web-embedding

Goal

Guides developers through implementing Flutter Platform Views for Android, iOS, and macOS, as well as embedding Flutter into existing web applications. Assumes the user has a configured Flutter environment and is comfortable with Dart, JavaScript, and the relevant native platform languages (Kotlin, Swift).

Instructions

1. Determine the Target Platform and Embedding Strategy (Decision Logic)

Before writing code, you must determine the target platform and the specific embedding strategy required by the user.

STOP AND ASK THE USER:
"Which platform are you targeting for native view embedding?

Android (Requires choosing between Hybrid Composition or Texture Layer)

iOS (Hybrid Composition only)

macOS (Hybrid Composition only, gesture support limited)

Web (Requires choosing between Full Page mode or Embedded/Multi-view mode)"

Decision Tree:

If Android: Ask the user: "Do you prioritize native Android view fidelity (Hybrid Composition) or Flutter rendering performance (Texture Layer)?"

If Web: Ask the user: "Are you taking over the full page, or embedding Flutter into specific HTML elements (Embedded/Multi-view mode)?"