はじめに
FlutterはiOSやAndroidなど複数のプラットフォームで動作するUIフレームワークです。Flutterは独自のUIレンダリングの仕組みを持っており、基本的には各プラットフォームのネイティブUIを使用しないため、プラットフォーム間での動作の差異がほとんどないという特徴があります。
しかしながらマップやウェブビューなど、プラットフォームが提供しているUIをFlutterで表示したいことがあります。そのようなケースに対応するための仕組みが Platform Views です。
あるプラットフォーム上でそのプラットフォーム向けのUIを表示する（例えばiOSでUIButtonを表示する）というのは当たり前なことです。しかし、それをFlutterで構築されたアプリの中で表示する場合、Flutterが独自にレンダリングするUIとプラットフォームのUIを同時に組み合わせて表示しなければならないことになります。
iOS/Androidにおけるそのような課題をFlutterはどのように解決しているのか？を整理する機会があったため、こちらの記事にまとめます。
記事中に各表示モードにおいてネイティブでのビュー階層がどうなっているかを、以下のようなプラットフォームビューを含むWidgetで示します。
- 背面に緑色のWidget
- 中間にプラットフォームビューとしてGoogle MapsのWidget
- 前面に青色のWidget
@override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Platform Views'),
),
body: Stack(
alignment: Alignment.center,
children: [
SizedBox(
width: size.width,
height: size.height,
child: const ColoredBox(color: Colors.green),
),
SizedBox(
width: size.width,
height: size.height * 0.4,
child: const GoogleMap(
initialCameraPosition: CameraPosition(
target: LatLng(37.42796133580664, -122.085749655962),
zoom: 15,
),
),
),
SizedBox(
width: size.width * 0.2,
height: size.height,
child: const ColoredBox(color: Colors.blue),
),
],
),
),
);
}
Android
AndroidにおけるPlatform Viewsの表示モードは以下の3種類から選択することができます。なぜ3つも選択肢があるのかというと、それぞれの表示モードに異なるメリット・デメリットがあり、利用シーンによって最適なモードが異なるためです。逆に言うと、現時点で万能な表示モードが存在しないということになります。
- Virtual Display
- Hybrid Composition
- Texture Layer Hybrid Composition
Virtual Display
- プラットフォームビューをAndroidのVirtual Displayに描画し、その内容をFlutterのTextureに接続する方式
-
テキスト入力やアクセシビリティなどの機能において互換性の問題が発生する
- プラットフォームビューがVirtuarl Display内で描画され、実際にはAndroidのビュー階層に存在しないことが原因と思われる
- Android SDK 20（4.4W / KitKat Watch）以降で利用可能
- 公式Wiki / Virtual Display
Hybrid Composition
- Androidのビュー階層の中に直接プラットフォームビューを表示する方式
- プラットフォームビューの背面にあるFlutter UIを表示する層
- プラットフォームビューを表示する層
- プラットフォームビューの前面にあるFlutter UIを表示する層
- プラットフォームビューがAndroidのビュー階層の中にいるため、Virtual Displayのような互換性の問題が発生しにくい
- パフォーマンス面で問題があり、特にAndroid 10.0（Q）以前のバージョンが顕著
- Android SDK 19（4.4 / KitKat）以降で利用可能
- 公式Wiki / Hybrid Composition
Hybrid Compositionのビュー階層
プラットフォームビューの前面にくるFlutterのWidgetは、複数のビューに分割されて描画されているのが興味深いです。
FlutterImageView
ImageReader によって提供された Flutter UI を Canvas に描画します。
FlutterImageView は、開発者が Flutter UI をレンダリングする必要があるが、同時に対話型のPlatformView もレンダリングする必要がある状況を想定しています。
このビューは、Flutter UI を画像として提供する ImageReader を取得し、onDraw でそれを Canvas にレンダリングします。
（リファレンスからの抜粋をChatGPTにて翻訳）
FlutterMutatorView / FlutterMutatorsStack
ミューテータは PlatformView に適用され、一連の変換を行うことができます。Mutators に関する情報については、FlutterMutatorsStack.FlutterMutator を参照してください。
（リファレンスからの抜粋をChatGPTにて翻訳）
PlatformOverlayView
Flutter コンテンツをプラットフォームビュー上に表示するためのホストビュー。
（リファレンスからの抜粋をChatGPTにて翻訳）
Texture Layer Hybrid Composition
- Virtual Display・Hybrid Compositionそれぞれの問題を解決して置き換えることを目的に開発され、Flutter 3にて導入された新しい方式
- Hybrid Compositionのようにプラットフォームビューは実際に画面上の正しい位置に配置される
- Virtual Displayと同様に描画はTextureを使用し、drawをリダイレクトすることでTextureに描画内容を反映する
-
プラットフォームビューが SurfaceView そのもの、もしくはそれを含む場合に機能しない
- これによりVirtual DisplayやHybrid Compositionを完全に置き換えられない
- Android SDK 23（6.0 / Marshmallow）以降で利用可能
- 公式Wiki / Texture Layer Hybrid Composition
Texture Layer Hybrid Compositionのビュー階層
FlutterSurfaceView
PlatformViewWrapper
プラットフォームビューをラップしてジェスチャーをインターセプトし、このビューをPlatformViewRenderTarget に投影します。
Android プラットフォームビューは、TextureLayer を使用してエンジンによって構成されます。ビューは通常のビューのように Android ビューヒエラルキーに埋め込まれますが、PlatformViewRenderTarget に投影されるため、エンジンによって効率的に構成できます。
ビューは Android ビューヒエラルキーに存在するため、キーボードおよびアクセシビリティの操作は通常通りに動作します。
（リファレンスからの抜粋をChatGPTにて翻訳）
表示モードの指定方法
Flutterの PlatformViewService の初期化方法によって表示モードを指定することができる。
-
PlatformViewService.initAndroidView
- Texture Layer Hybrid Composition モードが適用される
- 適用できない場合（※）は Virtual Display モードにフォールバックされる
-
PlatformViewService.initSurfaceAndroidView
- Texture Layer Hybrid Composition モードが適用される
- 適用できない場合（※）は Hybrid Composition モードにフォールバックされる
-
PlatformViewService.initExpensiveAndroidView
- Hybrid Composition モードが適用される
※ 以下のいずれかの場合は Texture Layer Hybrid Compositionモードを適用できない
- Android SDK 23未満
- プラットフォームビューに SurfaceView を含む
iOS
iOSの表示モードはHybrid Compositionのみです。AndroidのHybrid Compositionと同じ仕組みをとっていますが、パフォーマンス面の問題もないようです。
公式Wiki / Hybrid Composition iOS
ビュー階層
FlutterView
ChildClippingView > FlutterTouchInterceptingView
FlutterOverlayView
