skills.rest
Wishtohear
WishtohearCOMMUNITY
Explore all skills by this author →
GitHub

flutter-embedding-native-views

Embeds native Android, iOS, macOS, and web views into Flutter applications.

1|Updated Apr 30, 2026
Search Tags:#ios#android#flutter#platform views#native embedding#web multi-view#hybrid composition
One-click install
npx skills add https://github.com/Wishtohear/bucket-water-oms --skill flutter-embedding-native-views-wishtohear
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: flutter-embedding-native-views
Source: https://github.com/Wishtohear/bucket-water-oms/tree/main/bucket-water-oms-admin-mobile/skills/flutter-embedding-native-views
Command: npx skills add https://github.com/Wishtohear/bucket-water-oms --skill flutter-embedding-native-views-wishtohear

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Flutter's widget tree cannot natively render platform-specific UI components like maps, web views, or camera previews. This Skill guides you through embedding native Android, iOS, and macOS views into Flutter apps, and embedding Flutter itself into existing web applications. ## Core Features & Use Cases - Android Platform Views: Choose between Hybrid Composition and Texture Layer modes, then implement the Dart widget, native View, factory, and registration. - iOS & macOS Platform Views: Implement UiKitView-based embedding with Hybrid Composition, including known limitations like unsupported ShaderMask and ColorFiltered widgets. - Web Multi-View Embedding: Embed Flutter into existing web apps (React, Angular, vanilla JS) using multi-view mode with addView/removeView APIs and ViewCollection widgets. - Use Case: You need to display a native Google Maps view inside your Flutter delivery app. Follow the Android workflow to register a PlatformViewFactory, implement the Dart AndroidView widget, and handle SurfaceView invalidation. ## Quick Start Ask the AI to implement an Android platform view in Flutter that embeds a native map component using hybrid composition.

Frequently Asked Questions about flutter-embedding-native-views

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I embed a native Android view in Flutter?▼

Create a Dart widget using AndroidView (Texture Layer) or PlatformViewLink with AndroidViewSurface (Hybrid Composition), implement a native class extending PlatformView, create a PlatformViewFactory, and register it via flutterEngine.platformViewsController.registry in MainActivity.

How do I embed Flutter into an existing web application?▼

Enable multi-view mode by setting multiViewEnabled: true in flutter_bootstrap.js, then use app.addView() with a host DOM element. In Dart, replace runApp with runWidget and render views using ViewCollection and View widgets.

What is the difference between Hybrid Composition and Texture Layer on Android?▼

Hybrid Composition offers the best fidelity for native Android views but lowers overall app FPS and breaks some Flutter transformations. Texture Layer gives the best Flutter rendering performance and full transform support, but scrolling WebViews can be janky and SurfaceView is problematic.

Does Flutter platform view support ShaderMask on iOS?▼

No. iOS platform views use Hybrid Composition exclusively, and ShaderMask and ColorFiltered widgets are not supported on embedded native views. BackdropFilter also has composition limitations on iOS.

Why is my Android SurfaceView not updating inside a Flutter platform view?▼

SurfaceView and SurfaceTexture do not invalidate themselves automatically when embedded as platform views. You must manually call invalidate on the view or its parent whenever the content changes.

Related Skills

Explore More Software Engineering Skills→
openaiopenai
5.3k

zoom-meeting-sdk-react-native

Implements Zoom Meeting SDK join and start flows in React Native iOS and Android apps.

Official
Intermediate
vertivolatamvertivolatam
1

Platform Channels & Native Integration

Facilitate bidirectional communication between Flutter and native iOS/Android code.

Official
Advanced
NinaVerdeNinaVerde

Flutter Performance Guru

Optimize Flutter UI performance by eliminating frame drops and jank.

Community
Advanced
takzobyetakzobye

flutter-plugins

Scaffold Flutter plugin packages with platform interfaces and native interop.

Community
Advanced