New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Flutter Embedding Native Views

by btwld in btwld/superdeck

Embeds native Android, iOS, or macOS views into a Flutter app.

BSD-3-ClauseAuto-check passedMobile

Install Flutter Embedding Native Views

skills CLI
$ npx skills add btwld/superdeck --skill flutter-embedding-native-views -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install btwld/superdeck flutter-embedding-native-views --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/btwld/superdeck.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/flutter-embedding-native-views .claude/skills/flutter-embedding-native-views && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
flutter-embedding-native-views
GitHub stars
129
Token cost
~2.1k tokens
SKILL.md length
652 words
Files
1
Skills in repo
23
Repo updated
First seen
Licence
BSD-3-Clause

At a glance

Embeds native Android, iOS, or macOS views into a Flutter app.

  • Works in 5 steps: Dart Implementation → Native Implementation → Registration → …
  • Integrating complex native components like maps
  • SKILL.md covers Contents, Platform Views Architecture, Web Embedding Architecture and Workflow: Implementing Android…, plus 3 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Flutter Embedding Native Views is an agent skill from btwld/superdeck. Embeds native Android, iOS, or macOS views into a Flutter app. Use when integrating complex native components like maps or web views.

Its SKILL.md is about 2.1k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Mobile, covering Cross-platform mobile apps and Embeddings. It works with Flutter, Android, iOS and macOS. The repository describes itself as: Presentation slides for Flutter with Flutter. The licence is BSD-3-Clause.

When your agent uses it

  • Integrating complex native components like maps
  • Tasks that involve Cross-platform mobile apps
  • Tasks that involve Embeddings

Example prompts

  • “Use the flutter-embedding-native-views skill to embed native Android, iOS, or macOS views into a Flutter app”
  • “/flutter-embedding-native-views”

Workflow steps

5 steps, taken from the step headings in SKILL.md.

  1. Dart Implementation
  2. Native Implementation
  3. Registration
  4. JavaScript Configuration
  5. Dart Configuration

What it can do on your machine

Read from SKILL.md and the folder at commit 815a746. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are dart and javascript).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Flutter Embedding Native Views loads about 2.1k tokens when it runs. Until then it costs about 41 tokens; SKILL.md has 652 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~41
When it runs · the whole SKILL.md, loaded when a task matches
~2.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from btwld/superdeck at commit 815a746, republished under its BSD-3-Clause licence (© btwld). 652 words, ~2,076 tokens.

Download SKILL.mdSave it as .claude/skills/flutter-embedding-native-views/SKILL.md (or your agent's skills folder).
name
flutter-embedding-native-views
description
Embeds native Android, iOS, or macOS views into a Flutter app. Use when integrating complex native components like maps or web views.
metadata.model
models/gemini-3.1-pro-preview
metadata.last_modified
Thu, 12 Mar 2026 22:20:28 GMT

Integrating Platform Views and Web Content

Contents

Platform Views Architecture

Platform Views allow embedding native views (Android, iOS, macOS) directly into a Flutter application, enabling the application of transforms, clips, and opacity from Dart.

Android Implementations (API 23+)

Choose the appropriate implementation based on your performance and fidelity requirements:

  • Hybrid Composition: Renders Flutter content into a texture and uses SurfaceFlinger to compose both.
    • Pros: Best performance and fidelity for Android views.
    • Cons: Lowers overall application FPS. Certain Flutter widget transformations will not work.
  • Texture Layer (Texture Layer Hybrid Composition): Renders Platform Views into a texture. Flutter draws them via the texture and renders its own content directly into a Surface.
    • Pros: Best performance for Flutter rendering. All transformations work correctly.
    • Cons: Quick scrolling (e.g., WebViews) can be janky. SurfaceView is problematic (breaks accessibility). Text magnifiers break unless Flutter is rendered into a TextureView.
iOS & macOS Implementations
  • iOS: Uses Hybrid Composition exclusively. The native UIView is appended to the view hierarchy.
    • Limitations: ShaderMask and ColorFiltered widgets are not supported. BackdropFilter has composition limitations.
  • macOS: Uses Hybrid Composition (NSView).
    • Limitations: Not fully functional in current releases (e.g., gesture support is unavailable).
Performance Mitigation

Mitigate performance drops during complex Dart animations by rendering a screenshot of the native view as a placeholder texture while the animation runs.

Web Embedding Architecture

Embed Flutter into existing web applications (Vanilla JS, React, Angular, etc.) using either Full Page mode or Embedded (Multi-view) mode.

  • Full Page Mode: Flutter takes over the entire browser window. Use an iframe if you need to constrain the Flutter app without modifying the Flutter bootstrap process.
  • Embedded Mode (Multi-view): Render Flutter into specific HTML elements (divs). Requires multiViewEnabled: true during engine initialization.
    • Manage views from JavaScript using app.addView() and app.removeView().
    • In Dart, replace runApp with runWidget.
    • Manage the dynamic list of views using WidgetsBinding.instance.platformDispatcher.views and render them using ViewCollection and View widgets.

Workflow: Implementing Android Platform Views

Follow this sequential workflow to implement a Platform View on Android.

Task Progress:

  • 1. Determine the composition mode (Hybrid vs. Texture Layer).
  • 2. Implement the Dart widget.
  • 3. Implement the native Android View and Factory.
  • 4. Register the Platform View in the Android host.
  • 5. Run validator -> review rendering -> fix manual invalidation issues.
Show full SKILL.md (261 more words)Show less
1. Dart Implementation

If using Hybrid Composition, use PlatformViewLink, AndroidViewSurface, and PlatformViewsService.initSurfaceAndroidView. If using Texture Layer, use the AndroidView widget.

2. Native Implementation

Create a class implementing io.flutter.plugin.platform.PlatformView that returns your native android.view.View. Create a factory extending PlatformViewFactory to instantiate your view.

3. Registration

Register the factory in your MainActivity.kt (or plugin) using flutterEngine.platformViewsController.registry.registerViewFactory.

Note: If your native view uses SurfaceView or SurfaceTexture, manually call invalidate on the View or its parent when content changes, as they do not invalidate themselves automatically.

Workflow: Implementing iOS Platform Views

Follow this sequential workflow to implement a Platform View on iOS.

Task Progress:

  • 1. Implement the Dart widget using UiKitView.
  • 2. Implement the native iOS View (FlutterPlatformView) and Factory (FlutterPlatformViewFactory).
  • 3. Register the Platform View in AppDelegate.swift or the plugin registrar.
  • 4. Run validator -> review composition limitations -> fix unsupported filters.

Workflow: Embedding Flutter in Web Applications

Follow this sequential workflow to embed Flutter into an existing web DOM.

Task Progress:

  • 1. Update flutter_bootstrap.js to enable multi-view.
  • 2. Update main.dart to use runWidget and ViewCollection.
  • 3. Implement JavaScript logic to add/remove host elements.
  • 4. Run validator -> review view constraints -> fix CSS conflicts.
1. JavaScript Configuration

In flutter_bootstrap.js, initialize the engine with multiViewEnabled: true. Use the returned app object to add views: app.addView({ hostElement: document.getElementById('my-div') }).

2. Dart Configuration

Replace runApp() with runWidget(). Create a root widget that listens to WidgetsBindingObserver.didChangeMetrics. Map over WidgetsBinding.instance.platformDispatcher.views to create a View widget for each attached FlutterView, and wrap them all in a ViewCollection.

Examples

Example: Android Texture Layer (Dart)
dart
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class NativeAndroidView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    const String viewType = 'my_native_view';
    final Map<String, dynamic> creationParams = <String, dynamic>{};

    return AndroidView(
      viewType: viewType,
      layoutDirection: TextDirection.ltr,
      creationParams: creationParams,
      creationParamsCodec: const StandardMessageCodec(),
    );
  }
}
Example: Web Multi-View Initialization (JavaScript)
javascript
_flutter.loader.load({
  onEntrypointLoaded: async function(engineInitializer) {
    let engine = await engineInitializer.initializeEngine({
      multiViewEnabled: true,
    });
    let app = await engine.runApp();
    
    // Add a view to a specific DOM element
    let viewId = app.addView({
      hostElement: document.querySelector('#flutter-host-container'),
      initialData: { customData: 'Hello from JS' }
    });
  }
});
Example: Web Multi-View Root Widget (Dart)
dart
import 'dart:ui' show FlutterView;
import 'package:flutter/widgets.dart';

void main() {
  runWidget(MultiViewApp(viewBuilder: (context) => const MyEmbeddedWidget()));
}

class MultiViewApp extends StatefulWidget {
  final WidgetBuilder viewBuilder;
  const MultiViewApp({super.key, required this.viewBuilder});

  @override
  State<MultiViewApp> createState() => _MultiViewAppState();
}

class _MultiViewAppState extends State<MultiViewApp> with WidgetsBindingObserver {
  Map<Object, Widget> _views = {};

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
    _updateViews();
  }

  @override
  void didChangeMetrics() => _updateViews();

  void _updateViews() {
    final newViews = <Object, Widget>{};
    for (final FlutterView view in WidgetsBinding.instance.platformDispatcher.views) {
      newViews[view.viewId] = _views[view.viewId] ?? View(
        view: view,
        child: Builder(builder: widget.viewBuilder),
      );
    }
    setState(() => _views = newViews);
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ViewCollection(views: _views.values.toList(growable: false));
  }
}

© btwld, BSD-3-Clause. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .agents/skills/flutter-embedding-native-views of btwld/superdeck.

Open the folder on GitHubat commit 815a746

Compare with similar skills

Flutter Embedding Native Views next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Flutter Embedding Native Views compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Flutter Embedding Native Views this skillbtwld/superdeck129—~2.1kAutomated safety check: PassBSD-3-Clause
flutter_soloud Setupalnitak/flutter_soloud424—~3.6kAutomated safety check: NotesMIT
Fkit SetupJoker-x-dev/FlutterKit127—~720Automated safety check: PassMIT
Sentry Flutter SDKgetsentry/sentry-for-ai268—~7.1kAutomated safety check: PassApache-2.0
Flutter Appccplugins/awesome-claude-code-plugins967—~1.1kAutomated safety check: NotesApache-2.0
RunQuisApp/flutter_contacts111—~252Automated safety check: NotesMIT

Similar skills

  • flutter_soloud Setup

    alnitak/flutter_soloud

    Walks through adding the flutter_soloud audio engine to a Flutter app, with per-platform setup, initialization, binary-size and logging options, and output device switching.

    424 GitHub stars~3.6k tokensUpdated today
    MobileAuto-check: notes

  • Fkit Setup

    Joker-x-dev/FlutterKit

    将 FlutterKit 脚手架初始化为新的应用项目，统一修改应用显示名称、Dart 包名、Android Application ID、Apple Bundle ID、Linux/Windows 标识、Web 名称、运行时品牌文案、Logo、桌面图标和启动页。用户拉取模板后要求改名、改包名、替换品牌资源或完成首次项目配置时使用。

    127 GitHub stars~720 tokensUpdated 2 mo ago
    MobileAuto-check passed

  • Sentry Flutter SDK

    getsentry/sentry-for-ai

    Official

    Full Sentry SDK setup for Flutter and Dart. An agent skill from getsentry/sentry-for-ai.

    268 GitHub stars~7.1k tokensUpdated today
    MobileAuto-check passed

  • Flutter App

    ccplugins/awesome-claude-code-plugins

    Bootstrap a new Flutter mobile app with clean architecture, Riverpod, FVM-pinned SDK, current packages, and no deprecated APIs.

    967 GitHub stars~1.1k tokensUpdated 1 mo ago
    MobileAuto-check: notes

  • Run

    QuisApp/flutter_contacts

    Run the example app on physical devices. An agent skill from QuisApp/flutter_contacts.

    111 GitHub stars~252 tokensUpdated 4 days ago
    MobileAuto-check: notes

  • Fkit Native

    Joker-x-dev/FlutterKit

    管理 FlutterKit 多端运行时资源、应用图标、原生启动页、Android/iOS/Web/桌面端配置和发布构建。用户要求生成图标、启动页、FlutterGen 资源、同步原生底座、排查原生缓存或执行多端打包时使用。

    127 GitHub stars~285 tokensUpdated 2 mo ago
    MobileAuto-check passed

More from btwld/superdeck

All 23 skills in this repo

  • Superdeck Presentations

    btwld/superdeck

    Create, review, or edit SuperDeck Markdown presentations and Flutter presentation apps.

    129 GitHub stars~649 tokensUpdated 9 days ago
    Auto-check passed

  • Flutter Adding Home Screen Widgets

    btwld/superdeck

    Adds home screen widgets to a Flutter app for Android and iOS.

    129 GitHub stars~2.2k tokensUpdated 9 days ago
    Auto-check passed

  • Flutter Animating Apps

    btwld/superdeck

    Implements animated effects, transitions, and motion in a Flutter app.

    129 GitHub stars~1.9k tokensUpdated 9 days ago
    Auto-check passed

  • Flutter Architecting Apps

    btwld/superdeck

    Architects a Flutter application using the recommended layered approach (UI, Logic, Data).

    129 GitHub stars~1.8k tokensUpdated 9 days ago
    Auto-check passed

  • Flutter Building Forms

    btwld/superdeck

    Builds Flutter forms with validation and user input handling.

    129 GitHub stars~1.4k tokensUpdated 9 days ago
    Auto-check passed

  • Flutter Building Layouts

    btwld/superdeck

    Builds Flutter layouts using the constraint system and layout widgets.

    129 GitHub stars~1.5k tokensUpdated 9 days ago
    Auto-check passed

Works with

Categories

Questions about Flutter Embedding Native Views

What does Flutter Embedding Native Views do?

Embeds native Android, iOS, or macOS views into a Flutter app. Flutter Embedding Native Views is an agent skill from btwld/superdeck. Embeds native Android, iOS, or macOS views into a Flutter app.

When should I use Flutter Embedding Native Views?

Flutter Embedding Native Views fits situations like: integrating complex native components like maps; tasks that involve Cross-platform mobile apps; tasks that involve Embeddings.

How do I install Flutter Embedding Native Views in Claude Code?

Run `npx skills add btwld/superdeck --skill flutter-embedding-native-views -a claude-code`. Or copy the skill folder (.agents/skills/flutter-embedding-native-views in btwld/superdeck) into .claude/skills/flutter-embedding-native-views in your project. Claude Code loads it when a task matches its description.

How do I install Flutter Embedding Native Views in Codex?

Run `npx skills add btwld/superdeck --skill flutter-embedding-native-views -a codex`. Or copy the skill folder (.agents/skills/flutter-embedding-native-views in btwld/superdeck) into .agents/skills/flutter-embedding-native-views in your project. Codex loads it when a task matches its description.

Can I use Flutter Embedding Native Views in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add btwld/superdeck --skill flutter-embedding-native-views -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/flutter-embedding-native-views, .gemini/skills/flutter-embedding-native-views, .github/skills/flutter-embedding-native-views and .opencode/skills/flutter-embedding-native-views in your project.

What does Flutter Embedding Native Views need to run?

SKILL.md names no scripts, command-line tools or credentials: Flutter Embedding Native Views is instructions for the agent only.

Does Flutter Embedding Native Views access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Flutter Embedding Native Views safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Flutter Embedding Native Views use?

Flutter Embedding Native Views is published under the BSD-3-Clause licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Flutter Embedding Native Views use?

About 2.1k tokens (SKILL.md is roughly 8.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Flutter Embedding Native Views?

Skills that share tags, products or a category with Flutter Embedding Native Views: flutter_soloud Setup (alnitak/flutter_soloud, 424 stars), Fkit Setup (Joker-x-dev/FlutterKit, 127 stars), Sentry Flutter SDK (getsentry/sentry-for-ai, 268 stars) and Flutter App (ccplugins/awesome-claude-code-plugins, 967 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Flutter Embedding Native Views?

btwld (a GitHub organization) maintains it in btwld/superdeck, which has 129 GitHub stars. The repository holds 23 skills in this directory. The repository was last updated on September 28, 2026.

Source: btwld/superdeck on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.