Flutter应用从后台恢复时Google Maps显示空白如何解决

这个白屏问题是google_maps_flutter插件在Android平台的典型生命周期兼容缺陷，触发逻辑如下：

• 应用切至后台时，Android系统会回收占用显存的Surface渲染视图，Google Maps原生层依赖的渲染Surface被系统主动释放
• 应用切回前台时，插件未自动触发地图渲染层的重建流程，Flutter层持有的GoogleMapController与原生渲染层的绑定已经失效，最终显示空白
• 你贴出的代码中存在多次重复给不同controller变量赋值的冗余逻辑，但该问题不会直接导致白屏。

1. 监听生命周期强制重建地图（通用有效方案） #

给地图所在的页面State混入WidgetsBindingObserver，监听应用前后台切换状态，切回前台时通过更新GlobalKey强制触发地图组件重建，重新绑定渲染层与控制器。
完整代码示例：

// 首先给State混入生命周期观察者
class _YourMapPageState extends State<YourMapPage> with WidgetsBindingObserver {
  // 保留你原有定义的initialCameraPosition、markers、_mapController等变量
  final Completer<GoogleMapController> _conntroller = Completer();
  // 定义用于触发地图重建的全局key
  GlobalKey _googleMapKey = GlobalKey();

  @override
  void initState() {
    super.initState();
    // 注册生命周期监听
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    // 移除监听避免内存泄漏
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    super.didChangeAppLifecycleState(state);
    // 监听到应用切回前台时，更新key强制重建地图组件
    if (state == AppLifecycleState.resumed) {
      setState(() {
        _googleMapKey = GlobalKey();
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Stack(
        children: <Widget>[
          GoogleMap(
            key: _googleMapKey, // 给地图组件绑定key
            zoomControlsEnabled: true,
            initialCameraPosition: initialCameraPosition,
            mapType: MapType.normal,
            markers: markers,
            onMapCreated: (GoogleMapController controller){
              // 清理原有重复赋值的冗余代码，仅保留实际需要的赋值逻辑
              _mapController = controller;
              _conntroller.complete(controller);
            },
          ),
          // 其余Stack子组件保持不变
        ],
      ),
    );
  }
}

2. 原生配置优化 #

打开Android端清单文件android/app/src/main/AndroidManifest.xml，给MainActivity开启硬件加速，减少Surface回收异常概率：

<activity
  android:name=".MainActivity"
  android:hardwareAccelerated="true"
  <!-- 其余原有配置项保持不变 -->
>

额外提示：如果当前使用的google_maps_flutter版本低于2.5.0，建议先升级到最新稳定版，旧版本本身存在多个未修复的生命周期渲染bug。

内容的提问来源于stack exchange，提问作者Ahmed Gayed