Flutter集成Google Maps出现updateAcquireFence等渲染错误该如何解决？

问题背景 #

开发包含Google Maps组件的Flutter项目时，持续出现以下渲染相关警告和错误：

E/FrameEvents(10551): updateAcquireFence: Did not find frame.
W/Parcel  (10551): Expecting binder but got null!

这些错误与Google Maps组件的渲染流程直接相关。

初始实现 #

以下是Google Maps组件的初始实现代码：

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

class RecordMaps extends Stateful Widget {
  final LatLng initialLocation;

  RecordMaps({Key? key, required widget.initialLocation}) : super(key: key);

  @override
  _RecordMapsState createState() => _RecordMapsState();
}

class _RecordMapsState extends State<RecordMaps> {
  GoogleMapController? mapController;

  void _onMapCreated(GoogleMapController controller) {
    mapController = controller;
    _updateCamera();
  }

  void _updateCamera() {
    mapController?.animateCamera(CameraUpdate.newCameraPosition(
      CameraPosition(
        target: widget.initialLocation,
        zoom: 15.0,
      ),
    ));
  }

  @override
  Widget build(BuildContext context) {
    return GoogleMap(
      onMapCreated: _onMapCreated,
      initialCameraPosition: CameraPosition(
        target: widget.initialLocation,
        zoom: 15.0,
      ),
      myLocationEnabled: true,
      myLocationButtonEnabled: true,
    );
  }

  @override
  void dispose() {
    mapController?.dispose();
    super.dispose();
  }
}

解决方案：启用Hybrid Composition #

经过排查，为Google Maps组件启用Hybrid Composition可解决上述问题。该机制通过调用平台原生视图进行渲染，能修复包括此类问题在内的多种渲染异常。

以下是启用Hybrid Composition后的更新代码：

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:google_maps_flutter_platform_interface/google_maps_flutter_platform_interface.dart';
import 'package:google_maps_flutter_android/google_maps_flutter_android.dart';

class RecordMaps extends Stateful Widget {
  final LatLng initialLocation;

  RecordMaps({Key? key, required widget.initialLocation}) : super(key: key);

  @override
  _RecordMapsState createState() => _RecordMapsState();
}

class _RecordMapsState extends State<RecordMaps> {
  GoogleMapController? mapController;

  @override
  void initState() {
    super.initState();
    _initializeMapRenderer();
  }

  void _initializeMapRenderer() {
    final GoogleMapsFlutterPlatform mapsImplementation = GoogleMapsFlutterPlatform.instance;
    if (mapsImplementation is GoogleMapsFlutterAndroid) {
      mapsImplementation.useAndroidViewSurface = true;
    }
  }

  void _onMapCreated(GoogleMapController controller) {
    mapController = controller;
    _updateCamera();
  }

  void _updateCamera() {
    mapController?.animateCamera(CameraUpdate.newCameraPosition(
      CameraPosition(
        target: widget.initialLocation,
        zoom: 15.0,
      ),
    ));
  }

  @override
  void dispose() {
    mapController?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        child: GoogleMap(
          onMapCreated: _onMapCreated,
          initialCameraPosition: CameraPosition(
            target: widget.initialLocation,
            zoom: 15.0,
          ),
          myLocationEnabled: true,
          myLocationButtonEnabled: true,
          mapType: MapType.normal, // 使用普通地图类型
          zoomControlsEnabled: false, // 禁用缩放控件（按需调整）
          compassEnabled: false, // 禁用指南针（按需调整）
        ),
      ),
    );
  }
}

原理说明 #

在initState方法中新增_initializeMapRenderer函数，将useAndroidViewSurface设置为true，以此为Android平台的Google Maps组件启用Hybrid Composition，核心代码如下：

void _initializeMapRenderer() {
  final GoogleMapsFlutterPlatform mapsImplementation = GoogleMapsFlutterPlatform.instance;
  if (mapsImplementation is GoogleMapsFlutterAndroid) {
    mapsImplementation.useAndroidViewSurface = true;
  }
}

启用该设置后，updateAcquireFence和Expecting binder but got null错误得以解决，地图性能更流畅且无渲染警告。

总结 #

若你的Flutter应用中Google Maps组件出现类似渲染错误，可尝试通过设置useAndroidViewSurface启用Hybrid Composition，该操作能显著提升渲染性能并消除相关错误警告。

内容的提问来源于stack exchange，提问作者Vinicius Dreher