CommunityCodierung & Entwicklunggithub.com

flutter/flutter-plugins

Erstellen Sie ein Flutter-Plugin, das native Interoperabilität für andere Flutter-Apps bereitstellt.

Was ist flutter-plugins?

Diese Skill-Anleitung beschreibt, wie ein Flutter-Plugin entwickelt wird, das anderer Flutter-Apps den Zugriff auf plattformspezifische Funktionen (z. B. Kamera, Sensoren) über eine einheitliche Dart-API ermöglicht. Sie deckt die gesamte Struktur ab: die Erstellung des Plugins mit `flutter create --template=plugin`, die Implementierung der nativen Komponenten in Android (Kotlin/Java) und iOS (Swift/Objective-C) sowie die Definition der öffentlichen Dart-Schnittstelle. Die Anleitung erläutert das Konzept der Method Channels, mit denen Dart-Code Nachrichten an die native Seite sendet und empfängt. Entwickler lernen, wie sie plattformspezifische Abhängigkeiten in `pubspec.yaml` und `build.gradle` verwalten, die Plugin-Klasse registrieren und die notwendigen Berechtigungen in den nativen Manifesten hinzufügen. Abschließend wird auf Teststrategien mit Unit-Tests, Widget-Tests und Integrationstests eingegangen, um die Korrektheit des Plugins auf allen Zielplattformen sicherzustellen.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/flutter/skills/tree/main/skills/flutter-plugins

Installed? Explore more Codierung & Entwicklung skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Was macht flutter-plugins?

Erstellen Sie ein Flutter-Plugin, das native Interoperabilität für andere Flutter-Apps bereitstellt.

Übersicht

Diese Anleitung beschreibt, wie Sie ein Flutter-Plugin entwickeln, das anderen Flutter-Apps den Zugriff auf plattformspezifische Funktionen (z. B. Kamera, Sensoren, Bluetooth) über eine einheitliche Dart-API ermöglicht.

Erstellung eines Plugins

Verwenden Sie den folgenden Befehl, um ein neues Plugin-Projekt zu erstellen:

flutter create --template=plugin --platforms=android,ios <plugin_name>

Ersetzen Sie <plugin_name> durch den gewünschten Namen Ihres Plugins (z. B. my_flutter_plugin).

Projektstruktur

Ein typisches Flutter-Plugin hat folgende Struktur:

<plugin_name>/
├── lib/
│   └── <plugin_name>.dart          # Öffentliche Dart-API
├── android/
│   └── src/main/
│       ├── kotlin/com/.../<PluginName>.kt  # Android-Implementierung
│       └── AndroidManifest.xml
├── ios/
│   └── Classes/
│       └── <PluginName>.swift      # iOS-Implementierung
├── example/                        # Beispiel-App
├── pubspec.yaml
└── README.md

Implementierung der nativen Seite

Android (Kotlin/Java)

  1. Öffnen Sie die Datei android/src/main/kotlin/.../<PluginName>.kt.
  2. Implementieren Sie die MethodCallHandler-Schnittstelle.
  3. Registrieren Sie das Plugin im onAttachedToEngine-Callback.
import io.flutter.embedding.engine.plugins.FlutterPlugin
import io.flutter.plugin.common.MethodCall
import io.flutter.plugin.common.MethodChannel

class MyFlutterPlugin: FlutterPlugin, MethodChannel.MethodCallHandler {
    private lateinit var channel: MethodChannel

    override fun onAttachedToEngine(flutterPluginBinding: FlutterPlugin.FlutterPluginBinding) {
        channel = MethodChannel(flutterPluginBinding.binaryMessenger, "com.example.my_flutter_plugin")
        channel.setMethodCallHandler(this)
    }

    override fun onMethodCall(call: MethodCall, result: MethodChannel.Result) {
        if (call.method == "getPlatformName") {
            result.success("Android")
        } else {
            result.notImplemented()
        }
    }

    override fun onDetachedFromEngine(binding: FlutterPlugin.FlutterPluginBinding) {
        channel.setMethodCallHandler(null)
    }
}

iOS (Swift/Objective-C)

  1. Öffnen Sie die Datei ios/Classes/<PluginName>.swift.
  2. Implementieren Sie die FlutterPlugin- und FlutterStreamHandler-Protokolle (je nach Bedarf).
  3. Registrieren Sie das Plugin in der register-Methode.
import Flutter
import UIKit

public class MyFlutterPlugin: NSObject, FlutterPlugin {
    public static func register(with registrar: FlutterPluginRegistrar) {
        let channel = FlutterMethodChannel(name: "com.example.my_flutter_plugin", binaryMessenger: registrar.messenger())
        let instance = MyFlutterPlugin()
        registrar.addMethodCallDelegate(instance, channel: channel)
    }

    public func handle(_ call: FlutterMethodCall, result: @escaping FlutterResult) {
        if call.method == "getPlatformName" {
            result("iOS")
        } else {
            result(FlutterMethodNotImplemented)
        }
    }
}

Implementierung der Dart-API

Erstellen Sie die öffentliche Dart-API in lib/<plugin_name>.dart:

import 'dart:async';
import 'package:flutter/services.dart';

class MyFlutterPlugin {
  static const MethodChannel _channel = MethodChannel('com.example.my_flutter_plugin');

  static Future<String?> get platformName async {
    final String? name = await _channel.invokeMethod('getPlatformName');
    return name;
  }
}

Abhängigkeiten verwalten

Fügen Sie in der pubspec.yaml die erforderlichen Abhängigkeiten hinzu:

dependencies:
  flutter:
    sdk: flutter
  # Weitere Abhängigkeiten

Berechtigungen

Fügen Sie die erforderlichen Berechtigungen in den nativen Manifesten hinzu:

  • Android: android/app/src/main/AndroidManifest.xml
  • iOS: ios/Runner/Info.plist

Tests

Schreiben Sie Unit-Tests, Widget-Tests und Integrationstests für Ihr Plugin:

test('getPlatformName gibt korrekten Plattformnamen zurück', () async {
  // Testimplementierung
});

Fazit

Mit dieser Anleitung können Sie ein voll funktionsfähiges Flutter-Plugin erstellen, das plattformspezifische Funktionalität über eine saubere API für andere Flutter-Apps bereitstellt.

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

flutter/flutter-accessibility

Configure your Flutter app to support assistive technologies like Screen Readers

flutter/flutter-accessibility-audit

Triggers an accessibility scan through the widget_inspector and automatically adds Semantics widgets or missing labels to the source code.

flutter/flutter-adding-home-screen-widgets

Adds home screen widgets to a Flutter app for Android and iOS. Use when providing glanceable app information or quick actions on the device home screen.

flutter/flutter-add-integration-test

Configures Flutter Driver for app interaction and converts MCP actions into permanent integration tests. Use when adding integration testing to a project, exploring UI components via MCP, or automating user flows with the integration_test package.

flutter/flutter-add-widget-preview

Adds interactive widget previews to the project using the previews.dart system. Use when creating new UI components or updating existing screens to ensure consistent design and interactive testing.

flutter/flutter-add-widget-test

Implement a component-level test using `WidgetTester` to verify UI rendering and user interactions (tapping, scrolling, entering text). Use when validating that a specific widget displays correct data and responds to events as expected.

flutter/flutter-animating-apps

Implements animated effects, transitions, and motion in a Flutter app. Use when adding visual feedback, shared element transitions, or physics-based animations.

flutter/flutter-animation

Add animated effects to your Flutter app

flutter/flutter-apply-architecture-best-practices

Architects a Flutter application using the recommended layered approach (UI, Logic, Data). Use when structuring a new project or refactoring for scalability.

flutter/flutter-app-size

Measure and reduce the size of the Flutter app bundle, APK, or IPA

flutter/flutter-architecting-apps

Architects a Flutter application using the recommended layered approach (UI, Logic, Data). Use when structuring a new project or refactoring for scalability.

flutter/flutter-architecture

Use the Flutter team's recommended app architecture

flutter/flutter-building-forms

Builds Flutter forms with validation and user input handling. Use when creating login screens, data entry forms, or any multi-field user input.

flutter/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.

flutter/flutter-building-plugins

Builds Flutter plugins that provide native interop for other apps to use. Use when creating reusable packages that bridge Flutter with platform-specific functionality.

flutter/flutter-build-responsive-layout

Use `LayoutBuilder`, `MediaQuery`, or `Expanded/Flexible` to create a layout that adapts to different screen sizes. Use when you need the UI to look good on both mobile and tablet/desktop form factors.

flutter/flutter-caching

Cache data in a Flutter app

flutter/flutter-caching-data

Implements caching strategies for Flutter apps to improve performance and offline support. Use when retaining app data locally to reduce network requests or speed up startup.

flutter/flutter-concurrency

Execute long-running tasks in a background thread in Flutter

flutter/flutter-databases

Work with databases in a Flutter app

Verwandte Skills