Is there an existing issue for this?

• I have searched the existing issues
• I have read the guide to filing a bug

Use case

This ticket provides a description of two pull requests in the Flutter repository:

PR framework: #128193
PR engine: flutter-team-archive/engine#42550

Use case: The current implementation of Hybrid Composition mode in Android involves splitting the Flutter UI into two views: the background and overlay views. The platform view is positioned at the center of these views. Additionally, the rasterization task has been moved from the raster thread to the platform thread using raster thread merge. However, this approach has certain drawbacks.

Rendering into each background and overlay view takes a considerable amount of time, especially when rasterization has to compete with other tasks on the platform thread. As a result, the performance of the application suffers when using this mode.

To address these performance issues, I propose a new mode that retains the same functionality as Hybrid Composition mode but offers improved performance.

Proposal

Opaque hybrid composition mode:

• In Opaque Hybrid Composition mode, the Flutter UI is rendered into a single view, providing certain benefits and considerations.
• To use this mode, the BackgroundMode.transparent must be set for the FlutterView in the MainActivity class:

class MainActivity: FlutterActivity() {
    override fun getBackgroundMode(): BackgroundMode {
        return BackgroundMode.transparent;
    }

    /*
    override fun getRenderMode(): RenderMode {
        return RenderMode.surface;
    }
   */
}

• After creating the platform view, it is positioned behind the FlutterView
• The AndroidView widget uses a CustomPainter to clear the content behind it, allowing the platform view to be visible behind the FlutterView.
• Platform view cannot have a transparent background in this mode. The content behind the platform view will be cleared, so it needs to have an opaque background.
• In terms of performance, the impact of having platform views versus not having them is negligible. Flutter only needs to add a CustomPaint() widget to clear some pixels, and the rendering process continues to utilize the efficient raster thread.

Some limitations:

• Does not support platform views with transparent backgrounds
• Synchronization between the platform view and the Flutter UI is not guaranteed. It is recommended to use this mode with platform views that have a fixed position to ensure proper alignment and consistency.
• Currently, supported only on Android but may be possible for other platforms.
• TBD

Demo project:
https://github.com/XuanTung95/test_opaque_hybrid_composition
How to test:

• clone and build the custom engine
• clone and use the custom framework
• change google map api key and run test_opaque_hybrid_composition