Embedding Native Views in Flutter with AndroidView

During the long transition period from native to Flutter, using native controls that are already mature can make the migration smoother. This article introduces how to use AndroidView in Flutter and presents a solution for embedding native components on both sides.

1. Tutorial

Embedding a map is a common scenario, but the current map SDKs do not provide a Flutter library. Using a hybrid stack, we can embed a native map view via AndroidView . A simple demo that embeds Gaode (Amap) map is presented.

1.2 AndroidView usage

The usage is similar to MethodChannel and consists of three steps:

Step 1: In Dart, place an AndroidView and provide a viewType string that uniquely identifies the widget.

Step 2: On the native side, implement a PlatformViewFactory and create the native view in its create() method.

Step 3: Register the factory with registerViewFactory() , passing the same viewType and the factory instance.

Configuration of the Gaode map SDK is omitted for brevity.

2. Principle Explanation

To answer two key questions—who decides the final size of the view and how touch events are handled—we need to understand the underlying data flow. Flutter receives a textureId from the native side, which points to a texture already rendered in native code. The texture is then drawn by the Skia engine via a TextureLayer using SceneBuilder::addTexture() .

The size of an AndroidView is determined by its parent widget because the underlying RenderAndroidView has sizedByParent = true . Therefore, containers such as Container or SizedBox control the view size.

If the native view is larger than the AndroidView , Flutter clips the overflow; if it is smaller, empty space is filled with white because the native view is placed inside a FrameLayout .

2.3 Touch Event Propagation

Android’s event flow is top‑down propagation and bottom‑up handling. In Flutter, AndroidView uses two classes:

MotionEventsDispatcher – packages events and forwards them to native.

AndroidViewGestureRecognizer – recognizes gestures and maintains cachedEvents and forwardedPointers . Only pointers listed in forwardedPointers are dispatched; others are cached.

Developers can control which gestures are claimed by providing custom recognizers in the gestureRecognizers set.

3. Summary

While AndroidView offers a convenient way to embed native UI, it is relatively expensive and should be avoided when a pure Flutter solution exists. The approach also incurs a performance penalty due to texture round‑trips (GPU → CPU → GPU).

In practice, the team used this technique to unify image resources between native and Flutter, avoiding duplicate assets and leveraging the mature native image library for both local and network images.

References include the Gaode Map SDK documentation, the article “Flutter外接纹理”, and an analysis of Android 7.1 Presentation dual‑screen rendering.