はじめに

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

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