Flutter 3.7.2 PlatformView API 풀매뉴얼: 심층 가이드

플러터 3.7.2 버전에서 등장한 PlatformView API는 iOS 및 Android 기본 UI 요소를 Flutter 앱에 직접 포함할 수 있도록 하는 강력한 기능입니다.

기존에는 플랫폼 채널을 통해 별도로 구현해야 했던 UI 요소들을 간편하게 구현할 수 있게 되었죠.

이 블로그에서는 PlatformView API의 모든 것을 심층적으로 다루며, 실제 개발에 활용할 수 있도록 단계별 가이드와 활용 사례, 주의 사항까지 풀매뉴얼 형식으로 제공합니다.

 

1. PlatformView API 개요

 

1.1. PlatformView API란 무엇인가요?

 

PlatformView API는 플랫폼별 UI 요소를 Flutter 앱에 직접 사용할 수 있도록 하는 기능입니다.

• iOS: UIView 또는 CALayer
• Android: View

를 사용하여 원하는 UI 요소를 구현할 수 있습니다.

 

1.2. PlatformView API를 사용하면 무엇을 할 수 있나요?

• 기존 iOS 및 Android UI 요소 활용: 지도, 카메라, 캘린더 등 기존 앱에서 사용하던 UI 요소들을 Flutter 앱에서 그대로 사용할 수 있습니다.
• 특정 플랫폼에서만 필요한 UI 요소 구현: 특정 플랫폼에서만 필요한 UI 요소는 해당 플랫폼의 UI 요소를 직접 사용하여 구현할 수 있습니다.
• 플랫폼별 성능 최적화: 플랫폼별 UI 요소를 사용하면 각 플랫폼에 맞게 최적화된 성능을 얻을 수 있습니다.
• 기존 네이티브 코드 재사용: 기존 네이티브 코드를 PlatformView 위젯으로 래핑하여 Flutter 앱에서 활용할 수 있습니다.

1.3. PlatformView API의 장점은 무엇인가요?

• 개발 시간 단축: 플랫폼 채널을 통한 번거로운 구현 과정 없이 간편하게 UI 요소를 구현할 수 있습니다.
• 일관된 사용자 경험 제공: 다양한 플랫폼에서 동일한 UI를 제공하여 사용자에게 일관된 경험을 제공할 수 있습니다.
• 성능 향상: 플랫폼별 UI 요소를 사용하여 각 플랫폼에 최적화된 성능을 얻을 수 있습니다.
• 유연성 확대: 기존 앱 개발에 투자한 시간과 노력을 낭비하지 않고 Flutter 앱 개발에 활용할 수 있습니다.

2. PlatformView API 사용법

 

2.1. 단계별 가이드

1. 원하는 플랫폼별 UI 요소 정의:
   • iOS: UIView 또는 CALayer를 상속하는 클래스를 정의합니다.
     • 예시: class MyPlatformView extends UIView { /* ... */ }
   • Android: View 클래스를 상속하는 클래스를 정의합니다.
     • 예시: class MyPlatformView extends View { /* ... */ }
2. PlatformViewFactory 클래스 정의:
   • create 메서드를 통해 플랫폼별 UI 요소를 생성하는 코드를 작성합니다.
     • 예시: class MyPlatformViewFactory extends PlatformViewFactory<MyPlatformView> { @override MyPlatformView create(BuildContext context) { return MyPlatformView(); } }
3. Flutter 앱에서 PlatformView 위젯 사용:
   • viewType 속성을 사용하여 정의한 PlatformViewFactory 클래스를 지정합니다.
   • creationParams 속성을 사용하여 플랫폼별 UI 요소에 전달할 매개 변수를 설정합니다.
     • 예시: PlatformView( viewType: 'MyPlatformView', creationParams: { 'param1': 'value1', 'param2': 'value2', }, )

2.2. 옵션

• viewType: 플랫폼별 UI 요소를 식별하는 문자열입니다.
• creationParams: 플랫폼별 UI 요소에 전달할 매개 변수를 설정하는 맵입니다.
• size: PlatformView 위젯의 크기를 설정합니다.
• gestureRecognizers: PlatformView 위젯에 연결할 제스처 인식기를 설정합니다.
• onPlatformViewCreated: 플랫폼별 UI 요소가 생성된 후 호출되는 콜백 함수입니다.
• onPlatformViewDestroyed: 플랫폼별 UI 요소가 제거된 후 호출되는 콜백 함수입니다.

2.3. 예시

// iOS UI 요소 정의
class MyPlatformView extends UIView {
  @override
  void layoutSubviews() {
    super.layoutSubviews();
    // UI 요소 레이아웃 코드 작성
  }

  @override
  void draw(CGRect rect) {
    super.draw(rect);
    // UI 요소 드로잉 코드 작성
  }
}

// Android UI 요소 정의
class MyPlatformView extends View {
  @override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    // UI 요소 드로잉 코드 작성
  }
}

// PlatformViewFactory 정의
class MyPlatformViewFactory extends PlatformViewFactory<MyPlatformView> {
  @override
  MyPlatformView create(BuildContext context) {
    return MyPlatformView();
  }
}

// Flutter 앱에서 PlatformView 위젯 사용
PlatformView(
  viewType: 'MyPlatformView',
  creationParams: {
    'param1': 'value1',
    'param2': 'value2',
  },
  size: Size(200, 100),
  gestureRecognizers: [
    TapGestureRecognizer()..onTap = () {
      // PlatformView 위젯 탭 시 처리
    },
  ],
  onPlatformViewCreated: (int viewId) {
    // PlatformView 위젯 생성 시 처리
  },
  onPlatformViewDestroyed: (int viewId) {
    // PlatformView 위젯 제거 시 처리
  },
);

 

3. PlatformView API 활용 사례

 

3.1. 기존 iOS 및 Android UI 요소 활용

• 지도: iOS의 MKMapView 또는 Android의 MapView를 사용하여 지도를 표시할 수 있습니다.
• 카메라: iOS의 AVCaptureDevice 또는 Android의 Camera 클래스를 사용하여 카메라 기능을 구현할 수 있습니다.
• 캘린더: iOS의 EventKit 또는 Android의 Calendar API를 사용하여 캘린더 기능을 구현할 수 있습니다.
• 기타: 위와 같이 다양한 기존 UI 요소들을 Flutter 앱에서 활용할 수 있습니다.

3.2. 특정 플랫폼에서만 필요한 UI 요소 구현

• iOS iMessage 기능 구현
• Android Material Design 요소 구현
• 특정 플랫폼에서만 사용되는 SDK 또는 API 활용

3.3. 플랫폼별 성능 최적화

• iOS Core Animation을 사용한 애니메이션 구현
• Android 하드웨어 가속을 활용한 UI 요소 구현
• 플랫폼별 API를 직접 사용하여 성능 최적화

3.4. 기존 네이티브 코드 재사용

• 기존 네이티브 코드를 PlatformView 위젯으로 래핑하여 Flutter 앱에서 활용
• 기존 앱 개발에 투자한 시간과 노력을 절약

4. 주의 사항

• PlatformView API는 아직 베타 버전이며, 일부 기능이 변경될 수 있습니다.
• PlatformView 위젯을 사용하면 앱의 성능과 안정성에 영향을 미칠 수 있으므로 주의해서 사용해야 합니다.
• 플랫폼별 UI 요소를 정의하고 PlatformViewFactory 클래스를 구현하는 데는 iOS 및 Android 개발 경험이 필요합니다.
• 복잡한 UI 요소를 구현하는 경우 성능 저하가 발생할 수 있으므로 주의해야 합니다.

5. 결론

 

Flutter 3.7.2 버전의 PlatformView API는 Flutter 개발자들에게 더욱 강력하고 유연한 개발 환경을 제공하며, 다양한 플랫폼에서 동일한 UI를 제공하거나 특정 플랫폼에서만 필요한 UI 요소를 구현하는 경우 유용하게 활용될 수 있습니다.

하지만 아직 베타 버전이며 주의해서 사용해야 하는 점을 기억해야 합니다.

 

6. 추가 정보

• Flutter 공식 문서 - PlatformView
• PlatformView API 사용 가이드
• PlatformView API 활용 사례

7. 질문

 

PlatformView API와 관련하여 궁금한 점이 있으면 언제든지 질문해주세요.

 

참고

• 이 블로그는 정보 제공만을 목적으로 작성되었으며, 실제 개발 환경에 따라 다를 수 있습니다.
• PlatformView API를 사용하기 전에 공식 문서를 참고하고 테스트를 진행하는 것이 좋습니다.

본 블로그가 Flutter 3.7.2 PlatformView API를 이해하고 실제 개발에 활용하는 데 도움이 되었기를 바랍니다.

 

 

수발가족을 위한 일기장 “나비일기장”

 

https://play.google.com/store/apps/details?id=com.maccrey.navi_diary_release

 

구글플레이 앱 배포의 시작! 비공개테스트 20명의 테스터모집을 위한 앱 "테스터 쉐어"

 

https://play.google.com/store/apps/details?id=com.maccrey.tester_share_release

Tester Share [테스터쉐어] - Google Play 앱

카카오톡 오픈 채팅방

 

https://open.kakao.com/o/gsS8Jbzg