在原生 Android、iOS 代码中有很多复杂的组件，例如高德地图，还没有 Flutter 的实现，所以需要在 Dart 代码中使用原生组件。

我们需要解决这几个问题：
(1) 怎么在 Flutter 中显示原生的控件；
(2) 怎么在 Flutter 中调用原生控件的方法；
(3) 原生控件的各种事件怎么回调到 Flutter 中。

这篇文章以在 Flutter 中使用原生高德地图为例子分享一下 Flutter 调用原生控件的流程。

1. 怎么在 Flutter 中显示原生的控件

1.1 在 Android 端的实现

我们需要在 Android 端实现一个 PlatformView 的子 View，大致步骤是：
(1) 在 Android 端新建一个实现 PlatformView 接口的类，并实现 getView 接口；
(2) 再一个继承 PlatformViewFactory 的类，并实现 create 接口，用于返回(1)的 PlatformView 对象；
(3) 再新建一个实现 FlutterPlugin 接口的类，在 onAttachedToEngine 方法中，将(2)的 Factory 对象注册到 platformViewRegistry 中；
(4) 在 Android 端，将(3)的 Plugin 添加到 FlutterEngine 中；

类之间的结构是：

用到的类的关系

实现 FlutterMapView:

/**
 * 实现 PlatformView 接口，重写 getView 方法返回 mapView 对象。
 */
class FlutterMapView: PlatformView {

    /* ======================================================= */
    /* Fields                                                  */
    /* ======================================================= */

    val context: Context

    val messenger: BinaryMessenger

    val viewId: Int
    
    val mapView: MapView
    
    
    
    /* ======================================================= */
    /* Constructors                                            */
    /* ======================================================= */

    /**
     * [messenger] 和 [viewId] 两个参数是在后续 Flutter 调用原生控件的方法时创建 Channel 用。
     */
    constructor(context: Context, messenger: BinaryMessenger, viewId: Int) {
        this.context   = context
        this.messenger = messenger
        this.viewId    = viewId
        this.mapView   = MapView(context)
    }
    
    
    
    /* ======================================================= */
    /* Override/Implements Methods                             */
    /* ======================================================= */

    override fun getView() = mapView

    override fun dispose() {}
}

后续 Flutter 调用原生控件的方法时，我们会在 FlutterMapView 中添加更多的方法。

实现 FlutterMapViewFactory：

/**
 * 这个工厂类用于创建 FlutterMapView 对象。
 */
class FlutterMapViewFactory : PlatformViewFactory {

    private val messenger: BinaryMessenger


    /**
     * 构造时传的 messenger 对象，后续在 Flutter 调用原生控件时需要用于创建 Channel。
     */
    constructor(createArgsCodec: MessageCodec<Any>?, messenger: BinaryMessenger) : super(createArgsCodec) {
        this.messenger = messenger
    }


    /**
     * 如果原生控件需要有参数，可以通过 [args] 传入。
     */
    override fun create(context: Context, viewId: Int, args: Any?): PlatformView {
        return FlutterMapView(context, messenger, viewId)
    } 

}

实现 FlutterMapViewPlugin：

class FlutterMapViewPlugin : FlutterPlugin {

    /* ======================================================= */
    /* Public Methods                                          */
    /* ======================================================= */

    fun registerWith(flutter: FlutterEngine) {
        flutter.plugins.add(this);
    }



    /* ======================================================= */
    /* Override/Implements Methods                             */
    /* ======================================================= */

    override fun onAttachedToEngine(binding: FlutterPluginBinding) {
        val registry = binding.platformViewRegistry

        // 消息解码器类型，我们没有特殊的要求，使用默认的即可。
        val codec = StandardMessageCodec.INSTANCE
        val factory = FlutterMapViewFactory(codec, binding.binaryMessenger)
        
        // 第一个字符串参数对应着一个类型的原生控件，在 Dart 中需要用相同的字符串创建 MapView。
        val viewType = "me.moolv.flutter.view.mapView"
        registry.registerViewFactory(viewType, factory)
    }

    override fun onDetachedFromEngine(binding: FlutterPluginBinding) {
        // ...
    }

}

在 Activity 中注册 FlutterMapViewPlugin

class MainActivity: FlutterActivity() {


    // ...

    /* ======================================================= */
    /* Override/Implements Methods                             */
    /* ======================================================= */

    override fun onCreate(savedInstanceState: Bundle?) {
        // ...
    }

    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)

        // 注册 MapView 插件
        FlutterMapViewPlugin().registerWith(flutterEngine)
        
        // ...
    }

}

1.2 在 Flutter 端的使用

在 Android 端实现好了之后，我们就能在 Flutter 端显示原生的 MapView 了，为了更好的使用，我们在 Dart 端也封装一个 MapView。
和原生的 Flutter 控件一样，我们需要实现 State 和 Widget 两个部分：

MapView.dart

/// 定义一个 Callback 回调，后续会用到。
typedef OnMapViewCreated = void Function(MapView mapView);


/// MapView 是有状态的，所以继承自 StatefullWidget。
class MapView extends StatefulWidget {


  /* ======================================================= */
  /* Fields                                                  */
  /* ======================================================= */

  OnMapViewCreated onMapViewCreated;

  _MapViewState _state;



  /* ======================================================= */
  /* Constructors                                            */
  /* ======================================================= */

  MapView({
    Key key,
    this.onMapViewCreated,
  });



  /* ======================================================= */
  /* Override/Implements Methods                             */
  /* ======================================================= */

  @override
  State<MapView> createState() {
    _state = _MapViewState(this, this.onMapViewCreated);
    return _state;
  }
  
  /// ...

}

_MapViewState.dart

/// 这里 「with AutomaticKeepAliveClientMixin」 的作用是保持这个 State 不要无谓的重建，
/// 因为频繁创建 MapView 是一个耗时的操作。
class _MapViewState extends State<MapView> with AutomaticKeepAliveClientMixin {

  /* ======================================================= */
  /* Fields                                                  */
  /* ======================================================= */
    
  /// 这个 ViewType 需要和上面在 Android 中定义的 ViewType 相同。
  static const String VIEW_TYPE = "me.moolv.flutter.view.mapView";

  AMap _map;

  OnMapViewCreated _onMapViewCreated;

  MapView _view;



  /* ======================================================= */
  /* Constructors                                            */
  /* ======================================================= */

  _MapViewState(MapView view, OnMapViewCreated onMapViewCreated) {
    this._view = view;
    this._onMapViewCreated = onMapViewCreated;
  }



  /* ======================================================= */
  /* Override/Implements Methods                             */
  /* ======================================================= */

  @override
  Widget build(BuildContext context) {
    super.build(context);
    
    // 这里使用 AndroidView，告知 Flutter 这是个原生控件，控件的类型是 VIEW_TYPE。
    return AndroidView(
      viewType: VIEW_TYPE,
      onPlatformViewCreated: this._onMapViewViewCreated,
    );
  }

  @override
  bool get wantKeepAlive => true;
  
  // ...



  /* ======================================================= */
  /* Private Methods                                         */
  /* ======================================================= */

  void _onMapViewViewCreated(int id) {
    // ...
    this._onMapViewCreated(this._view);
  }

}

经过上面👆的步骤，我们就能在 Flutter 中使用 MapView 了：
MapView的使用：

class SomeState extends State<SomeWidget> {

  @override
  Widget build(BuildContext context) {
    var screenSize = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(
        title: Text("原生地图测试"),
      ),
      body: SizedBox(
        height: screenSize.height - 56/*AppBar的高度*/,
        
        // 在这里愉快地使用原生控件
        child: MapView(
          onMapViewCreated: this.onMapViewViewCreated,
        ),
        
      ), // end SizedBox
    ); // end Scaffold
  }
  
}

2. Flutter 中调用原生控件的方法 及 控件的事件回调。

经过上面的步骤，我们能在 Flutter 中显示出 Android 原生的组件。但很多情况下，我们还需要再 Dart 中调用原生控件的方法，例如调用 MapView 的 onCreate 方法。同时控件有了回调，我们也希望能在 Dart 中接收到回调。这就需要在 Dart 和 原生代码 之间建立一个 MethodChannel。

关于 MethodChannel 可以参考这篇文章： 《Flutter 与 原生代码 的相互调用》 。

在调用原生控件的场景下，还需要保证多个控件的通信不会被干扰，所以我们需要为每一个控件对象都创建一个 Channel。 Channel 的命名通常是 ViewType+viewID。

2.1 在 Android 端实现方法 Channel 相关逻辑

Channel 相关逻辑都放在 FlutterMapView 中:

/**
 * 实现 MethodCallHandler 用于处理 Flutter 的方法调用。
 */
class FlutterMapView: PlatformView, MethodCallHandler, OnCameraChangeListener {


    /* ======================================================= */
    /* Fields                                                  */
    /* ======================================================= */

    val context: Context

    val messenger: BinaryMessenger

    val viewId: Int

    val mapView: MapView
    
    /** 用于方法互相调用的通道 */
    val channel: MethodChannel
    
    /** 地图移动结束后的回调，用于存储 Flutter 端的回调 */
    val onCameraChangeFinishListeners: MutableList<String>



    /* ======================================================= */
    /* Constructors                                            */
    /* ======================================================= */

    constructor(context: Context, messenger: BinaryMessenger, viewId: Int) {
        this.context = context
        this.messenger = messenger
        this.viewId = viewId
        this.mapView = MapView(context)
        this.onCameraChangeFinishListeners = LinkedList()

        // 初始化地图
        initMapView();

        // 创建通信渠道，用于 Flutter 调用原生控件的方法
        this.channel = MethodChannel(this.messenger, METHOD_CHANNEL_PREFIX + "$viewId")
        this.channel.setMethodCallHandler(this)
    }



    /* ======================================================= */
    /* Override/Implements Methods                             */
    /* ======================================================= */

    override fun getView() = mapView

    override fun dispose() {}

    /** 
     * Flutter 端调用 原生 的方法时的处理。
     关于
     */
    override fun onMethodCall(call: MethodCall, res: MethodChannel.Result) {
        Log.i("ZHP_TEST", "Flutter 调用 Android 的方法:${call.method}")
        when(call.method) {
            // Flutter 端调用原生控件的 onCreate 方法
            "onCreate"      -> { mapView.onCreate(Bundle()); res.success(null); }

            // 地图视野范围变化中的回调，Dart 端会调用这个方法，用于添加回调
            "addOnCameraChangeFinishListener" -> { addOnCameraChangeFinishListener(call, res) }
            
            // 省略其它...
        }
    }

    /** 
     * Android 端的控件收到事件后，回调到 Flutter 端
     */
    override fun onCameraChangeFinish(position: CameraPosition?) {
        if (position == null) {
            return
        }
        
        // 遍历 Flutter 端注册到 Android 的每一个方法
        this.onCameraChangeFinishListeners.forEach { dartMethodName ->
            val params = mapOf(
                    "lat"  to position.target.latitude,
                    "lng"  to position.target.longitude,
                    "zoom" to position.zoom
            )
            this.channel.invokeMethod(dartMethodName, params)
        }
    }

    override fun onCameraChange(position: CameraPosition?) {
        // ...
    }



    /* ======================================================= */
    /* Private Methods                                         */
    /* ======================================================= */

    private fun initMapView() {
        mapView.map.setOnCameraChangeListener(this as OnCameraChangeListener)
    }
    
    /** 
     * Flutter 端注册的回调，会保存在 Android 端，回调的本质就是一个字符串，是通过 channel 调用时的方法名。
     */
    private fun addOnCameraChangeFinishListener(call: MethodCall, res: MethodChannel.Result) {
        val callbackMethodName = call.argument<String>("callbackMethodName")
        if (callbackMethodName.isNullOrEmpty()) {
            res.error("E0004", "addOnCameraChangedListener 没有传递 callbackMethodName 参数", null)
            return
        }

        this.onCameraChangeFinishListeners.add(callbackMethodName)
        res.success(null)
    }
    
    // ...

}

2.2 在 Flutter 端调用控件的方法及注册回调

有了原生端的实现，我们可以在 MapViewState 中调用原生控件的各种方法，以及向原生控件中注册各种回调。

_MapViewState.dart

class _MapViewState extends State<MapView> with AutomaticKeepAliveClientMixin {

  /* ======================================================= */
  /* Fields                                                  */
  /* ======================================================= */

  static const String VIEW_TYPE = "me.moolv.flutter.view.mapView";

  MethodChannel _channel;

  OnMapViewCreated _onMapViewCreated;

  MapView _view;

  // 省略上面👆已经出现过的一些方法...



  /* ======================================================= */
  /* Private Methods                                         */
  /* ======================================================= */

  /// 调用原生控件的 onCreate 方法。
  void _onCreate() {
    _channel.invokeMethod("onCreate");
  }
  
  /// 原生控件回调 Dart 的方法
  void _onCameraChangeFinish(MethodCall call) {
    double lat = call.arguments["lat"];
    double lng = call.arguments["lng"];
    double zoom = call.arguments["zoom"];
    // 具体的逻辑处理 ...
  }

  // ...



  /* ======================================================= */
  /* Private Methods                                         */
  /* ======================================================= */

  void _onMapViewViewCreated(int id) {
      // 在这里创建 channel，注意 channel 名的最后有一个 view 的 id 区分不同的 channel。
      _channel = MethodChannel("me.moolv.flutter.channels.MapView.$id");
      // 添加一个回调到原生控件端
      _channel.invokeMethod("addOnCameraChangeFinishListener", {"callbackMethodName": "AMap.onCameraChangeFinish"});
      // 添加回调，当原生控件回调时，处理收到的信息
      _channel.setMethodCallHandler((call) {
        switch(call.method) {
          case "AMap.onCameraChangeFinish": {
            _onCameraChangeFinish(call);
            break;
          }
        }
        
        return null;
      });
      
      // 调用原生控件的方法
      this._onCreate();
      
      this._onMapViewCreated(this._view);
  }

}

这样我们就能实现在 Flutter 中调用原生控件的方法了，同时也可以收到 原生控件 的回调了。