Flutter 3.7.2 PlatformView API: 사용법 및 옵션

Flutter 3.7.2 버전에서 등장한 PlatformView API는 Flutter 앱 개발에 새로운 가능성을 열어줍니다.

이 API를 통해 개발자들은 iOS 및 Android 기본 UI 요소를 Flutter 앱에 직접 포함할 수 있게 되었습니다.

기존에는 Flutter 앱에서 기본 UI 요소를 사용하기 위해 플랫폼 채널을 통해 별도로 구현해야 했지만, PlatformView API를 사용하면 이러한 번거로운 과정 없이 간편하게 구현할 수 있습니다.

 

1. PlatformView API란 무엇인가요?

 

PlatformView API는 Flutter 앱에서 iOS의 UIView 또는 CALayer와 Android의 View를 직접 사용할 수 있도록 해주는 기능입니다.

이를 통해 개발자들은 다음과 같은 이점을 얻을 수 있습니다.

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

2. PlatformView API 사용법

 

PlatformView API를 사용하려면 다음 단계를 따르세요.

1. 원하는 플랫폼별 UI 요소를 정의합니다.
   • iOS: UIView 또는 CALayer를 상속하는 클래스를 정의합니다.
   • Android: View 클래스를 상속하는 클래스를 정의합니다.
2. PlatformViewFactory 클래스를 정의합니다.
   • create 메서드를 통해 플랫폼별 UI 요소를 생성하는 코드를 작성합니다.
3. Flutter 앱에서 PlatformView 위젯을 사용합니다.
   • viewType 속성을 사용하여 정의한 PlatformViewFactory 클래스를 지정합니다.
   • creationParams 속성을 사용하여 플랫폼별 UI 요소에 전달할 매개 변수를 설정합니다.

예시

// iOS UI 요소 정의
class MyPlatformView extends UIView {
  // ...
}

// Android UI 요소 정의
class MyPlatformView extends View {
  // ...
}

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

// Flutter 앱에서 PlatformView 위젯 사용
PlatformView(
  viewType: 'MyPlatformView',
  creationParams: {
    'param1': 'value1',
    'param2': 'value2',
  },
);

 

3. PlatformView API 옵션

 

PlatformView API는 다음과 같은 다양한 옵션들을 제공합니다.

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

4. PlatformView API 활용 사례

 

PlatformView API를 활용하여 다음과 같은 다양한 기능들을 구현할 수 있습니다.

• 기존 iOS 및 Android UI 요소를 Flutter 앱에 활용: 지도, 카메라, 캘린더 등 기존 앱에서 사용하던 UI 요소들을 Flutter 앱에서 그대로 사용할 수 있습니다. 이를 통해 개발 시간을 단축하고 일관된 사용자 경험을 제공할 수 있습니다.
• 특정 플랫폼에서만 필요한 UI 요소 구현: 특정 플랫폼에서만 필요한 UI 요소는 해당 플랫폼의 UI 요소를 직접 사용하여 구현할 수 있습니다. 예를 들어, iOS 앱에서만 사용되는 iMessage 기능을 구현하거나, Android 앱에서만 사용되는 Material Design 요소를 구현하는 경우에 유용합니다.
• 플랫폼별 성능 최적화: 플랫폼별 UI 요소를 사용하면 각 플랫폼에 맞게 최적화된 성능을 얻을 수 있습니다. 예를 들어, iOS 앱에서 Core Animation을 사용하여 애니메이션을 구현하거나, Android 앱에서 하드웨어 가속을 활용한 UI 요소를 구현하는 경우에 유용합니다.
• 기존 네이티브 코드 재사용: 기존 네이티브 코드를 PlatformView 위젯으로 래핑하여 Flutter 앱에서 활용할 수 있습니다. 이를 통해 기존 앱 개발에 투자한 시간과 노력을 낭비하지 않고 Flutter 앱 개발에 활용할 수 있습니다.

5. 주의 사항

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

6. 결론

 

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

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

 

 

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

 

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