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 Interoperating With Native APIs

by btwld in btwld/superdeck

Interoperates with native platform APIs on Android, iOS, and the web.

BSD-3-ClauseAuto-check passedMobile

Install Flutter Interoperating With Native APIs

skills CLI
$ npx skills add btwld/superdeck --skill flutter-interoperating-with-native-apis -a claude-code

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

GitHub CLI
$ gh skill install btwld/superdeck flutter-interoperating-with-native-apis --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-interoperating-with-native-apis .claude/skills/flutter-interoperating-with-native-apis && 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-interoperating-with-native-apis
GitHub stars
129
Token cost
~2.1k tokens
SKILL.md length
926 words
Files
1
Skills in repo
23
Repo updated
First seen
Licence
BSD-3-Clause

At a glance

Interoperates with native platform APIs on Android, iOS, and the web.

  • Works in 3 steps: Define the messaging protocol in a… → Generate the host (Kotlin/Swift/C++) and… → Implement the generated interfaces on…
  • Accessing device-specific features not available in Dart
  • SKILL.md covers Contents, Core Concepts & Terminology, Binding to Native C/C++ Code… and Implementing Platform Channels…, plus 3 more sections
  • Calls flutter and dart

What it does

Flutter Interoperating With Native APIs is an agent skill from btwld/superdeck. Interoperates with native platform APIs on Android, iOS, and the web. Use when accessing device-specific features not available in Dart or calling existing native code.

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. It works with Flutter, Android, iOS and Dart. The repository describes itself as: Presentation slides for Flutter with Flutter. The licence is BSD-3-Clause.

When your agent uses it

  • Accessing device-specific features not available in Dart
  • Calling existing native code

Example prompts

  • “Use the flutter-interoperating-with-native-apis skill to interoperate with native platform APIs on Android, iOS, and the web”
  • “/flutter-interoperating-with-native-apis”

Workflow steps

3 steps, taken from the first numbered list in SKILL.md.

  1. Define the messaging protocol in a standalone Dart file using Pigeon annotations (@HostApi()).
  2. Generate the host (Kotlin/Swift/C++) and client (Dart) code.
  3. Implement the generated interfaces on the native side.

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

    Shell commands in SKILL.md call:

    • flutter
    • dart

    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 Interoperating With Native APIs loads about 2.1k tokens when it runs. Until then it costs about 52 tokens; SKILL.md has 926 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~52
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). 926 words, ~2,065 tokens.

Download SKILL.mdSave it as .claude/skills/flutter-interoperating-with-native-apis/SKILL.md (or your agent's skills folder).
name
flutter-interoperating-with-native-apis
description
Interoperates with native platform APIs on Android, iOS, and the web. Use when accessing device-specific features not available in Dart or calling existing native code.
metadata.model
models/gemini-3.1-pro-preview
metadata.last_modified
Thu, 12 Mar 2026 22:21:02 GMT

Integrating Platform-Specific Code in Flutter

Contents

Core Concepts & Terminology

  • FFI (Foreign Function Interface): The dart:ffi library used to bind Dart directly to native C/C++ APIs.
  • Platform Channel: The asynchronous message-passing system (MethodChannel, BasicMessageChannel) connecting the Dart client (UI) to the host platform (Kotlin/Java, Swift/Objective-C, C++).
  • Pigeon: A code-generation tool that creates type-safe Platform Channels.
  • Platform View: A mechanism to embed native UI components (e.g., Android View, iOS UIView) directly into the Flutter widget tree.
  • JS Interop: The modern, Wasm-compatible approach to interacting with JavaScript and DOM APIs using package:web and dart:js_interop.

Binding to Native C/C++ Code (FFI)

Use FFI to execute high-performance native code or utilize existing C/C++ libraries without the overhead of asynchronous Platform Channels.

Project Setup
  • If creating a standard C/C++ integration (Recommended since Flutter 3.38): Use the package_ffi template. This utilizes build.dart hooks to compile native code, eliminating the need for OS-specific build files (CMake, build.gradle, podspec).
    bash
    flutter create --template=package_ffi <package_name>
  • If requiring access to the Flutter Plugin API or Play Services: Use the legacy plugin_ffi template.
    bash
    flutter create --template=plugin_ffi <plugin_name>
Implementation Rules
  • Symbol Visibility: Always mark C++ symbols with extern "C" and prevent linker discarding during link-time optimization (LTO).
    cpp
    extern "C" __attribute__((visibility("default"))) __attribute__((used))
  • Dynamic Library Naming (Apple Platforms): Ensure your build.dart hook produces the exact same filename across all target architectures (e.g., arm64 vs x86_64) and SDKs (iphoneos vs iphonesimulator). Do not append architecture suffixes to the .dylib or .framework names.
  • Binding Generation: Always use package:ffigen to generate Dart bindings from your C headers (.h). Configure this in ffigen.yaml.

Implementing Platform Channels & Pigeon

Use Platform Channels when you need to interact with platform-specific APIs (e.g., Battery, Bluetooth, OS-level services) using the platform's native language.

Pigeon (Type-Safe Channels)

Always prefer package:pigeon over raw MethodChannel implementations for complex or frequently used APIs.

  1. Define the messaging protocol in a standalone Dart file using Pigeon annotations (@HostApi()).
  2. Generate the host (Kotlin/Swift/C++) and client (Dart) code.
  3. Implement the generated interfaces on the native side.
Threading Rules
  • Main Thread Requirement: Always invoke channel methods destined for Flutter on the platform's main thread (UI thread).
  • Background Execution: If executing channel handlers on a background thread (Android/iOS), you must use the Task Queue API (makeBackgroundTaskQueue()).
  • Isolates: To use plugins/channels from a Dart background Isolate, ensure it is registered using BackgroundIsolateBinaryMessenger.ensureInitialized(rootIsolateToken).

Hosting Native Platform Views

Use Platform Views to embed native UI components (e.g., Google Maps, native video players) into the Flutter widget tree.

Android Platform Views

Evaluate the trade-offs between the two rendering modes and select the appropriate one:

  • If requiring perfect fidelity, accessibility, or SurfaceView support: Use Hybrid Composition (PlatformViewLink + AndroidViewSurface). This appends the native view to the hierarchy but may reduce Flutter's rendering performance.
  • If prioritizing Flutter rendering performance and transformations: Use Texture Layer (AndroidView). This renders the native view into a texture. Note: Quick scrolling may drop frames, and SurfaceView is problematic.
iOS Platform Views
  • iOS exclusively uses Hybrid Composition.
  • Implement FlutterPlatformViewFactory and FlutterPlatformView in Swift or Objective-C.
  • Use the UiKitView widget on the Dart side.
  • Limitation: ShaderMask and ColorFiltered widgets cannot be applied to iOS Platform Views.

Integrating Web Content & Wasm

Flutter Web supports compiling to WebAssembly (Wasm) for improved performance and multi-threading.

Show full SKILL.md (375 more words)Show less
Wasm Compilation
  • Compile to Wasm using: flutter build web --wasm.
  • Server Configuration: To enable multi-threading, configure your HTTP server to emit the following headers:
    • Cross-Origin-Embedder-Policy: credentialless (or require-corp)
    • Cross-Origin-Opener-Policy: same-origin
  • Limitation: WasmGC is not currently supported on iOS browsers (WebKit limitation). Flutter will automatically fall back to JavaScript if WasmGC is unavailable.
Web Interop
  • If writing new web-specific code: Strictly use package:web and dart:js_interop.
  • Do NOT use: dart:html, dart:js, or package:js. These are incompatible with Wasm compilation.
  • Embedding HTML: Use HtmlElementView.fromTagName to inject arbitrary HTML elements (like <video>) into the Flutter Web DOM.

Workflows

Workflow: Creating a Native FFI Integration

Use this workflow when binding to a C/C++ library.

  • Task Progress:
    • 1. Run flutter create --template=package_ffi <name>.
    • 2. Place C/C++ source code in the src/ directory.
    • 3. Ensure all exported C++ functions are wrapped in extern "C" and visibility attributes.
    • 4. Configure ffigen.yaml to point to your header files.
    • 5. Run dart run ffigen to generate Dart bindings.
    • 6. Modify hook/build.dart if linking against pre-compiled or system libraries.
    • 7. Run validator -> flutter test -> review errors -> fix.
Workflow: Implementing a Type-Safe Platform Channel (Pigeon)

Use this workflow when you need to call Kotlin/Swift APIs from Dart.

  • Task Progress:
    • 1. Add pigeon to dev_dependencies.
    • 2. Create pigeons/messages.dart and define data classes and @HostApi() abstract classes.
    • 3. Run the Pigeon generator script to output Dart, Kotlin, and Swift files.
    • 4. Android: Implement the generated interface in MainActivity.kt or your Plugin class.
    • 5. iOS: Implement the generated protocol in AppDelegate.swift or your Plugin class.
    • 6. Dart: Import the generated Dart file and call the API methods.
    • 7. Run validator -> verify cross-platform compilation -> review errors -> fix.
Workflow: Embedding a Native Platform View

Use this workflow when embedding a native UI component (e.g., a native map or camera view).

  • Task Progress:
    • 1. Dart: Create a widget that conditionally returns AndroidView (or PlatformViewLink) for Android, and UiKitView for iOS based on defaultTargetPlatform.
    • 2. Android: Create a class implementing PlatformView that returns the native Android View.
    • 3. Android: Create a PlatformViewFactory and register it in configureFlutterEngine.
    • 4. iOS: Create a class implementing FlutterPlatformView that returns the native UIView.
    • 5. iOS: Create a FlutterPlatformViewFactory and register it in application:didFinishLaunchingWithOptions:.
    • 6. Run validator -> test on physical Android and iOS devices -> review UI clipping/scrolling issues -> fix.

© 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-interoperating-with-native-apis of btwld/superdeck.

Open the folder on GitHubat commit 815a746

Compare with similar skills

Flutter Interoperating With Native APIs 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 Interoperating With Native APIs compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Flutter Interoperating With Native APIs this skillbtwld/superdeck129—~2.1kAutomated safety check: PassBSD-3-Clause
flutter_soloud Setupalnitak/flutter_soloud424—~3.6kAutomated safety check: NotesMIT
Flutter Appccplugins/awesome-claude-code-plugins967—~1.1kAutomated safety check: NotesApache-2.0
Fkit SetupJoker-x-dev/FlutterKit127—~720Automated safety check: PassMIT
Fkit NativeJoker-x-dev/FlutterKit127—~285Automated safety check: PassMIT
Iphone Duo Fluttermirzaaghazadeh/iphone-duo-skills137—~1.6kAutomated safety check: PassCustom licence

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 yesterday
    MobileAuto-check: notes

  • 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

  • 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

  • Fkit Native

    Joker-x-dev/FlutterKit

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

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

  • Iphone Duo Flutter

    mirzaaghazadeh/iphone-duo-skills

    Adapt a Flutter app to iPhone Duo, Apple's first foldable iPhone — what MediaQuery gives you today, why displayFeatures does not work here, and how to bridge the iOS 27.1 reserved-region, hinge and…

    137 GitHub stars~1.6k tokensUpdated 7 days ago
    MobileAuto-check passed

  • Oma Mobile

    first-fluke/oh-my-agent

    Mobile specialist for Flutter, React Native, and cross-platform mobile development.

    1.3k GitHub stars~1.6k tokensUpdated yesterday
    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 10 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 10 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 10 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 10 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 10 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 10 days ago
    Auto-check passed

Works with

Categories

Questions about Flutter Interoperating With Native APIs

What does Flutter Interoperating With Native APIs do?

Interoperates with native platform APIs on Android, iOS, and the web. Flutter Interoperating With Native APIs is an agent skill from btwld/superdeck. Interoperates with native platform APIs on Android, iOS, and the web.

When should I use Flutter Interoperating With Native APIs?

Flutter Interoperating With Native APIs fits situations like: accessing device-specific features not available in Dart; calling existing native code.

How do I install Flutter Interoperating With Native APIs in Claude Code?

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

How do I install Flutter Interoperating With Native APIs in Codex?

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

Can I use Flutter Interoperating With Native APIs 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-interoperating-with-native-apis -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-interoperating-with-native-apis, .gemini/skills/flutter-interoperating-with-native-apis, .github/skills/flutter-interoperating-with-native-apis and .opencode/skills/flutter-interoperating-with-native-apis in your project.

What does Flutter Interoperating With Native APIs need to run?

Going by SKILL.md and its folder, Flutter Interoperating With Native APIs needs the command-line tools its instructions call (flutter and dart).

Does Flutter Interoperating With Native APIs 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 Interoperating With Native APIs 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 Interoperating With Native APIs use?

Flutter Interoperating With Native APIs 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 Interoperating With Native APIs 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 Interoperating With Native APIs?

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

Who maintains Flutter Interoperating With Native APIs?

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.