When a Flutter is developed with Native, the default Flutter render mode. surface overwrites the upper view within the Relativelayout of native layout.

First said the conclusion, and then give a chestnut; For example, if the native layout is like this, go directly to the code

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">

    <FrameLayout
        android:id="@+id/realtabcontent"
        android:layout_width="fill_parent"
        android:layout_height="match_parent"/>
  

    <View
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_marginBottom="100dp"
        android:layout_alignParentBottom="true"
        android:background="@color/color_666666"/>
</RelativeLayout>
Copy the code

The small view in the upper layer can be displayed normally when the real native fragment is displayed, but when the real flutterFragment is displayed, you will find that the small view in the upper layer is missing and covered. I don’t know what’s going on. When I was looking at the documentation, I came across that Flutter could set its rendering mode, so I checked the documentation. There are three rendering modes for document addresses, the default is Surface;

surface
public static final RenderMode surface
RenderMode, which paints a Flutter UI to a SurfaceView. This mode has the best performance, but a Flutter UI in this mode cannot be positioned between 2 other Android Views in the z-index, nor can it be animated/transformed. Unless the special capabilities of a SurfaceTexture are required, developers should strongly prefer this render mode.
Copy the code
texture public static final RenderMode texture RenderMode, which paints a Flutter UI to a SurfaceTexture. This mode is not as performant as surface, but a Flutter UI in this mode can be animated and transformed, as well as positioned in the z-index between 2+ other Android Views. Unless the special capabilities of a SurfaceTexture  are required, developers should strongly prefer the surface render mode.Copy the code
image
public static final RenderMode image
RenderMode, which paints Paints a Flutter UI provided by an ImageReader onto a Canvas. This mode is not as performant as surface, but a FlutterView in this mode can handle full interactivity with a PlatformView. Unless PlatformViews are required developers should strongly prefer the surface render mode.
Copy the code

A simple translation is, forget the translation, English is not good, use translation tools to turn it; The texture is the texture that makes the rendering so texture is the texture that makes the rendering so texture is the texture.

FlutterFragment
.createDefault()
.renderMode(RenderMode.texture)
.build()
Copy the code