Community코딩 & 개발github.com

flutter/flutter-embedding-native-views

Flutter 앱에 Android, iOS 또는 macOS의 네이티브 뷰를 임베딩합니다. 지도나 웹 뷰와 같은 복잡한 네이티브 컴포넌트를 통합할 때 사용합니다.

flutter-embedding-native-views란 무엇인가요?

이 기술은 Flutter 애플리케이션 내에서 네이티브 플랫폼 뷰(Android, iOS, macOS)를 임베딩할 수 있게 해줍니다. 지도, 웹 뷰, 사용자 정의 UI 컴포넌트 등 Flutter 위젯만으로는 구현하기 어려운 고성능 또는 플랫폼 특화 기능을 통합해야 할 때 매우 유용합니다. Android에서는 `AndroidView` 위젯을, iOS/macOS에서는 `UiKitView`(또는 `PlatformViewLink`)를 사용하여 네이티브 뷰 계층을 Flutter 위젯 트리에 직접 삽입합니다. 이 접근 방식은 플랫폼 채널을 통해 통신하는 것보다 더 원활하고 효율적인 통합을 제공하며, Flutter 개발자가 네이티브 SDK의 전체 기능을 활용할 수 있게 합니다. 주요 사용 사례로는 Google Maps 또는 Apple Maps 통합, WKWebView와 같은 고급 웹 뷰, 네이티브 비디오 플레이어, ARKit/ARCore 뷰 등이 있습니다.

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

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

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

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

문서

flutter-embedding-native-views은(는) 무엇을 하나요?

Flutter 앱에 Android, iOS 또는 macOS의 네이티브 뷰를 임베딩합니다. 지도나 웹 뷰와 같은 복잡한 네이티브 컴포넌트를 통합할 때 사용합니다.

개요

이 기술은 Flutter 애플리케이션 내에서 네이티브 플랫폼 뷰(Android, iOS, macOS)를 임베딩할 수 있게 해줍니다. 지도, 웹 뷰, 사용자 정의 UI 컴포넌트 등 Flutter 위젯만으로는 구현하기 어려운 고성능 또는 플랫폼 특화 기능을 통합해야 할 때 매우 유용합니다.

지원 플랫폼

  • Android: AndroidView 위젯 사용
  • iOS: UiKitView 위젯 사용
  • macOS: UiKitView 위젯 사용

사용 방법

Android (AndroidView 예시)

Widget build(BuildContext context) {
  return Container(
    width: 300,
    height: 200,
    child: AndroidView(
      viewType: 'native-view-type',
      creationParams: <String, dynamic>{
        'param1': 'value1',
      },
      creationParamsCodec: StandardMessageCodec(),
    ),
  );
}

iOS/macOS (UiKitView 예시)

Widget build(BuildContext context) {
  return Container(
    width: 300,
    height: 200,
    child: UiKitView(
      viewType: 'native-view-type',
      creationParams: <String, dynamic>{
        'param1': 'value1',
      },
      creationParamsCodec: StandardMessageCodec(),
    ),
  );
}

주요 사용 사례

  • 지도 통합: Google Maps, Apple Maps 등 네이티브 지도 SDK를 직접 사용
  • 웹 뷰: WKWebView(iOS) 또는 WebView(Android)를 통한 고급 웹 콘텐츠 렌더링
  • 네이티브 비디오 플레이어: ExoPlayer, AVPlayer 등 고성능 재생
  • AR/VR: ARKit, ARCore 등 증강 현실 뷰 통합
  • 사용자 정의 네이티브 UI: Flutter에서 제공하지 않는 플랫폼 특화 UI 컴포넌트

주의사항

  • 네이티브 뷰를 임베딩할 때는 성능 오버헤드가 발생할 수 있으므로, 꼭 필요한 경우에만 사용하는 것이 좋습니다.
  • 네이티브 뷰와 Flutter 위젯 간의 상호 작용은 플랫폼 채널을 통해 처리해야 할 수 있습니다.
  • 각 플랫폼에서 네이티브 뷰를 등록하는 방법은 해당 플랫폼의 문서를 참조하세요.

참고 자료

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

관련 스킬