Flutter中如何将GoogleMapController传递给自定义组件？

解决方案 #

你遇到的是异步初始化对象的UI同步问题，有三种常用实现方式，按复杂度从低到高排序： #

方案1：setState全页刷新（最简单）

你的页面需改为StatefulWidget，控制器初始化完成后调用setState触发整页重绘即可更新传入组件的控制器实例，参考代码如下：

class MapPage extends StatefulWidget {
  const MapPage({super.key});

  @override
  State<MapPage> createState() => _MapPageState();
}

class _MapPageState extends State<MapPage> {
  // 声明可空的控制器变量
  GoogleMapController? _googleMapController;
  // 你的其他变量：userLocation、customMarkers等
  late final LatLng userLocation;
  late final List<Marker> customMarkers;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GoogleMap(
        initialCameraPosition: const CameraPosition(target: LatLng(42, 23), zoom: 11.5),
        myLocationButtonEnabled: false,
        zoomControlsEnabled: false,
        mapToolbarEnabled: false,
        onMapCreated: (controller) {
          // 赋值后调用setState触发重绘
          setState(() {
            _googleMapController = controller;
          });
        },
        markers: customMarkers.toSet(),
      ),
      // 控制器初始化完成前可显示占位，也可以直接传null让自定义组件内部判空处理
      floatingActionButton: _googleMapController != null 
          ? MyQuickDialButton(
              c: _googleMapController!,
              latitude: userLocation.latitude,
              longitude: userLocation.longitude,
            )
          : const SizedBox.shrink(),
    );
  }

  // 页面销毁时释放控制器避免内存泄漏
  @override
  void dispose() {
    _googleMapController?.dispose();
    super.dispose();
  }
}

如果你的MyQuickDialButton内部点击逻辑已经做了控制器非空判断，也可以去掉判空占位，直接传_googleMapController即可，初始化完成重绘后按钮功能会自动生效。 #

方案2：局部刷新（性能更优）

如果不想触发整页重绘，可以用ValueNotifier + ValueListenableBuilder仅更新按钮组件：

class _MapPageState extends State<MapPage> {
  // 用ValueNotifier包裹控制器
  final ValueNotifier<GoogleMapController?> _controllerNotifier = ValueNotifier(null);
  // 其他变量同上...

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GoogleMap(
        // 其他配置同上...
        onMapCreated: (controller) {
          _controllerNotifier.value = controller;
        },
      ),
      // 仅监听控制器变化更新按钮
      floatingActionButton: ValueListenableBuilder<GoogleMapController?>(
        valueListenable: _controllerNotifier,
        builder: (context, controller, child) {
          return MyQuickDialButton(
            c: controller,
            latitude: userLocation.latitude,
            longitude: userLocation.longitude,
          );
        },
      ),
    );
  }

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

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