Flutter动态修改Google Maps高度时地图白屏如何解决

开发过程中需要调整Google Maps组件高度，因业务需求要获取地图中心坐标，因此实现了动态调整地图高度的逻辑，但调整时出现地图区域变白的异常，效果如下图所示：

相关实现代码如下：

class mapTest2 extends StatefulWidget {
  const mapTest2({Key? key}) : super(key: key);

  @override
  State<mapTest2> createState() => _mapTest2State();
}

class _mapTest2State extends State<mapTest2> {
  bool isOpen = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(actions: [
        IconButton(
            onPressed: () {
              setState(() {
                isOpen = !isOpen;
              });
            },
            icon: Icon(Icons.padding))
      ]),
      body: Stack(
        children: [
          Positioned(
            left: 0,
            top: 0,
            right: 0,
            bottom: isOpen ? 300 : 0,
            child: Container(
              // 原代码此处存在粘贴错误，正确写法为指定灰度色值
              color: Colors.grey[100],
              child: GoogleMap(
                initialCameraPosition:
                    CameraPosition(target: LatLng(37.0, 127.0), zoom: 16),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

问题原因 #

google_maps_flutter插件基于原生平台视图（Android端AndroidView、iOS端UiKitView）渲染地图内容，Flutter层动态修改容器尺寸时，原生视图无法自动感知布局变更触发重绘，Flutter布局层和原生渲染层的尺寸信息不同步，就会出现白屏、地图显示不全的问题。

解决方案 #

• 方案1：通过Key强制地图适配新尺寸重建
  给GoogleMap组件绑定和布局状态关联的ValueKey，当isOpen状态变化、地图容器尺寸改变时，Key的变化会强制Flutter销毁旧的原生地图视图，重新创建适配新尺寸的视图实例，修改成本极低：

  GoogleMap(
    key: ValueKey(isOpen), // 绑定与尺寸联动的Key
    initialCameraPosition:
        CameraPosition(target: LatLng(37.0, 127.0), zoom: 16),
  )
  

• 方案2：保留地图状态手动触发重绘
  如果需要保留地图当前的缩放级别、已添加标记、用户操作轨迹，不想重建地图实例，可以在尺寸变更后获取GoogleMapController，调用一次空的样式设置、或者轻微移动相机后归位，强制原生渲染层重新适配布局完成重绘。

注意：不要在build方法中高频触发重绘逻辑，避免地图出现卡顿。

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