Flutter：如何使用just_the_tooltip包同时显示多个tooltip？

一、实现多个tooltip同时显示 #

just_the_tooltip默认会共享全局状态，导致打开新tooltip时自动关闭旧的。解决核心是给每个tooltip分配独立的JustTheController，避免全局状态干扰。

具体实现 #

• 为每个地图标记创建专属的JustTheController实例
• 点击标记时仅控制当前tooltip的显示/隐藏，不影响其他实例
• 确保每个JustTheTooltip绑定自身的控制器

代码示例 #

// 地图标记数据模型，内置独立控制器
class MapMarkerData {
  final String id;
  final LatLng position;
  final String tooltipText;
  final JustTheController controller = JustTheController();

  MapMarkerData({required this.id, required this.position, required this.tooltipText});
}

// 带多tooltip的地图组件
class MapWithMultiTooltips extends StatefulWidget {
  @override
  State<MapWithMultiTooltips> createState() => _MapWithMultiTooltipsState();
}

class _MapWithMultiTooltipsState extends State<MapWithMultiTooltips> {
  final List<MapMarkerData> markers = [
    MapMarkerData(id: '1', position: LatLng(37.7749, -122.4194), tooltipText: '旧金山'),
    MapMarkerData(id: '2', position: LatLng(34.0522, -118.2437), tooltipText: '洛杉矶'),
    // 添加更多标记...
  ];

  @override
  Widget build(BuildContext context) {
    return FlutterMap(
      options: MapOptions(initialCenter: LatLng(37.7749, -122.4194), initialZoom: 10),
      children: [
        TileLayer(
          urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
          subdomains: const ['a', 'b', 'c'],
        ),
        MarkerLayer(
          markers: markers.map((markerData) {
            return Marker(
              point: markerData.position,
              width: 40,
              height: 40,
              child: JustTheTooltip(
                controller: markerData.controller,
                content: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text(markerData.tooltipText),
                ),
                child: GestureDetector(
                  onTap: () {
                    // 切换当前tooltip状态，不影响其他
                    markerData.controller.isOpen
                        ? markerData.controller.closeTooltip()
                        : markerData.controller.openTooltip();
                  },
                  child: const Icon(Icons.location_on, color: Colors.red),
                ),
              ),
            );
          }).toList(),
        ),
      ],
    );
  }
}

二、确保tooltip随地图移动同步位置 #

要让tooltip跟随地图平移/缩放同步更新位置，只需将JustTheTooltip作为Marker的直接子组件。这样当地图移动时，Marker的位置自动更新，tooltip会锚定Marker同步移动。

注意事项 #

• 不要将tooltip放在地图组件外部层级，否则无法跟随Marker位置变化
• 确保tooltip的锚点是Marker的子Widget，而非独立定位元素

批量关闭所有tooltip（可选） #

如果需要一次性关闭所有tooltip，可遍历所有控制器执行关闭操作：

void closeAllTooltips() {
  for (var marker in markers) {
    marker.controller.closeTooltip();
  }
}

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