Flutter中点击Google Maps Marker时如何显示flutter_spinkit加载组件？

我明白你的困惑啦——你现在只是创建了ShowLoadingKit的Widget实例，但并没有把它添加到Flutter的Widget树中，所以自然不会在页面上显示出来。咱们来一步步解决这个问题：

核心问题分析 #

Flutter的Widget必须被挂载到Widget树中才能被渲染显示。你直接调用ShowLoadingKit()只是生成了一个Widget对象，但没有告诉Flutter要把它放到哪里去，所以它不会出现在界面上。

解决方案1：使用showDialog（最常用的弹窗式加载） #

这是实现全局加载弹窗最简单的方式，它会自动把加载组件插入到当前导航栈中，还自带遮罩效果：

修改调用方法 #

void _showLoadingSpinCircle(String lat, String lng) {
  // 调用showDialog将加载组件作为弹窗显示
  showDialog(
    context: context,
    barrierDismissible: false, // 禁止点击遮罩关闭加载框（可选，根据需求调整）
    builder: (BuildContext context) {
      return ShowLoadingKit();
    },
  );
}

优化ShowLoadingKit组件 #

原来的Scaffold可以去掉，因为showDialog已经提供了弹窗的上下文，直接返回加载组件即可，还可以添加半透明背景提升视觉效果：

class ShowLoadingKit extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        decoration: BoxDecoration(
          color: Colors.black54,
          borderRadius: BorderRadius.circular(12),
        ),
        padding: const EdgeInsets.all(24),
        child: SpinKitCircle(
          color: Colors.white,
          size: 150.0,
        ),
      ),
    );
  }
}

关闭加载框 #

当加载完成后，调用以下代码关闭弹窗：

Navigator.of(context).pop();

解决方案2：使用Overlay（非阻塞式局部加载） #

如果你希望加载组件只在Google Maps上方显示，不阻塞整个页面的其他交互，可以用Overlay来实现：

实现步骤 #

1. 先获取当前页面的OverlayState（可以在initState中获取，或者直接在调用时获取）
2. 创建并插入OverlayEntry

OverlayEntry? _loadingOverlay;

void _showLoadingSpinCircle(String lat, String lng) {
  final overlayState = Overlay.of(context);
  _loadingOverlay = OverlayEntry(
    builder: (context) => ShowLoadingKit(),
  );
  overlayState.insert(_loadingOverlay!);
}

3. 关闭加载组件时移除OverlayEntry

void _hideLoading() {
  _loadingOverlay?.remove();
  _loadingOverlay = null;
}

为什么你的原代码不生效？ #

再次强调：ShowLoadingKit()只是创建了一个Widget实例，但没有将它挂载到Widget树中。Flutter的渲染系统只会处理Widget树中的元素，所以必须通过showDialog、Overlay或者导航路由这类方式，把Widget加入到树里才能显示。

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