Community코딩 & 개발github.com

flutter/flutter-plugins

다른 Flutter 앱에서 사용할 수 있도록 네이티브 상호 운용성을 제공하는 Flutter 플러그인을 만듭니다.

flutter-plugins란 무엇인가요?

이 스킬은 Flutter 플러그인을 개발하여 Dart 코드가 Android (Java/Kotlin) 및 iOS (Objective-C/Swift) 플랫폼의 네이티브 API와 통신할 수 있도록 합니다. 플러그인은 MethodChannel을 통해 네이티브 코드에 메시지를 전달하고, 네이티브 코드는 그 결과를 Dart로 다시 보냅니다. Flutter의 플러그인 아키텍처를 사용하면 패키지 매니저(pub.dev)를 통해 재사용 가능한 구성 요소를 쉽게 배포할 수 있습니다. 이 스킬은 네이티브 기능(예: 카메라, 블루투스, 센서)에 접근해야 하는 모든 Flutter 개발자에게 유용하며, Android와 iOS 모두에서 작동하는 일관된 Dart 인터페이스를 제공합니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/flutter/skills/tree/main/skills/flutter-plugins

Installed? Explore more 코딩 & 개발 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

flutter-plugins은(는) 무엇을 하나요?

다른 Flutter 앱에서 사용할 수 있도록 네이티브 상호 운용성을 제공하는 Flutter 플러그인을 만듭니다.

개요

Flutter 플러그인은 Dart 코드와 네이티브 플랫폼 코드(Android의 경우 Java/Kotlin, iOS의 경우 Objective-C/Swift) 간의 브리지 역할을 합니다. 이 스킬은 플랫폼별 기능을 노출하는 플러그인을 구축하고 패키지화하는 과정을 안내합니다.

설정

  1. 새 플러그인 프로젝트 만들기

    flutter create --org com.example --template=plugin hello_plugin
    cd hello_plugin
    
  2. 플러그인 구조 이해하기

    • lib/ – Dart API (hello_plugin.dart)
    • android/ – Android 네이티브 구현
    • ios/ – iOS 네이티브 구현
    • example/ – 플러그인을 사용하는 테스트 Flutter 앱

네이티브 메서드 구현

Dart 쪽 (lib/hello_plugin.dart)

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

class HelloPlugin {
  static const MethodChannel _channel = MethodChannel('hello_plugin');

  static Future<String?> get platformVersion async {
    final String? version = await _channel.invokeMethod('getPlatformVersion');
    return version;
  }
}

Android 쪽 (android/src/main/kotlin/com/example/hello_plugin/HelloPlugin.kt)

package com.example.hello_plugin

import io.flutter.embedding.engine.plugins.FlutterPlugin
import io.flutter.plugin.common.MethodCall
import io.flutter.plugin.common.MethodChannel

class HelloPlugin: FlutterPlugin, MethodChannel.MethodCallHandler {
  override fun onAttachedToEngine(binding: FlutterPlugin.FlutterPluginBinding) {
    val channel = MethodChannel(binding.binaryMessenger, "hello_plugin")
    channel.setMethodCallHandler(this)
  }

  override fun onMethodCall(call: MethodCall, result: MethodChannel.Result) {
    if (call.method == "getPlatformVersion") {
      result.success("Android ${android.os.Build.VERSION.RELEASE}")
    } else {
      result.notImplemented()
    }
  }

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

iOS 쪽 (ios/Classes/HelloPlugin.m)

#import "HelloPlugin.h"
#if __has_include(<hello_plugin/hello_plugin-Swift.h>)
#import <hello_plugin/hello_plugin-Swift.h>
#endif

@implementation HelloPlugin
+ (void)registerWithRegistrar:(NSObject<FlutterPluginRegistrar>*)registrar {
  [SwiftHelloPlugin registerWithRegistrar:registrar];
}
@end

Swift 파일 (ios/Classes/HelloPlugin.swift)

import Flutter
import UIKit

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

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

메서드 채널 이해하기

  • MethodChannel은 네이티브 코드와 DART 코드가 문자열 이름을 통해 메서드를 호출할 수 있게 해줍니다.
  • 플러그인은 binaryMessenger를 통해 등록되며, 이는 엔진이 연결될 때 자동으로 제공됩니다.
  • 채널 이름은 Dart와 네이티브 쪽에서 동일해야 합니다.

패키징 및 배포

  1. pubspec.yaml 업데이트

    name: hello_plugin
    version: 0.0.1
    description: A new Flutter plugin.
    environment:
      sdk: ">=2.12.0 <3.0.0"
    
  2. 플러그인 게시 (pub.dev 필요)

    flutter pub publish
    

리소스

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

관련 스킬