Flutter FutureBuilder中使用自定义弹窗未自动关闭问题求助

问题根源 #

直接在FutureBuilder的ConnectionState.waiting分支里调用showDialog会踩两个坑：

1. FutureBuilder的build方法会反复执行（比如组件重建、状态更新），导致弹窗被多次弹出，后续Navigator.pop只能关掉最上层的，底层弹窗还留在界面上。
2. 弹窗的上下文（context）和当前页面的上下文层级可能不匹配，或者弹窗弹出后FutureBuilder的上下文已经变化，导致Navigator.pop(context)找不到对应的弹窗路由。

靠谱的解决办法 #

办法1：用状态变量控制弹窗，只弹一次 #

别在build方法里直接弹弹窗，通过StatefulWidget的状态变量来控制，确保弹窗只弹出一次：

class _YourPageState extends State<YourPage> {
  bool _isLoading = false;
  late Future _fetchFuture;

  @override
  void initState() {
    super.initState();
    _fetchFuture = _fetchData();
  }

  Future _fetchData() async {
    setState(() => _isLoading = true);
    try {
      // 这里写你的服务器请求逻辑
      final response = await http.get(Uri.parse('你的API地址'));
      return response.body;
    } finally {
      setState(() => _isLoading = false);
      // 确保弹窗能被关闭，哪怕请求异常
      if (mounted) {
        Navigator.of(context, rootNavigator: true).popUntil((route) => !route.isDialog);
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    // 利用postFrameCallback确保在build完成后再弹弹窗，避免重复触发
    WidgetsBinding.instance.addPostFrameCallback((_) {
      if (_isLoading && mounted) {
        showDialog(
          context: context,
          barrierDismissible: false,
          builder: (context) => CustomLoadingDialog(), // 你的自定义弹窗
        );
      }
    });

    return FutureBuilder(
      future: _fetchFuture,
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.done) {
          // 请求完成后展示的UI
          return Text('请求结果：${snapshot.data}');
        } else {
          // 这里返回空容器或者占位UI，别在这里弹弹窗
          return SizedBox.shrink();
        }
      },
    );
  }
}

办法2：用GlobalKey精准管理弹窗上下文 #

如果一定要在FutureBuilder里处理，用GlobalKey来获取弹窗的上下文，避免找不到路由的问题：

class _YourPageState extends State<YourPage> {
  final GlobalKey<NavigatorState> _dialogKey = GlobalKey<NavigatorState>();
  late Future _fetchFuture;

  @override
  void initState() {
    super.initState();
    _fetchFuture = _fetchData();
  }

  Future _fetchData() async {
    // 服务器请求逻辑
    return await http.get(Uri.parse('你的API地址'));
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: _fetchFuture,
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          // 用postFrameCallback避免重复弹弹窗
          WidgetsBinding.instance.addPostFrameCallback((_) {
            if (_dialogKey.currentState?.mounted ?? false) return;
            showDialog(
              context: _dialogKey.currentContext ?? context,
              barrierDismissible: false,
              builder: (context) => CustomLoadingDialog(),
            );
          });
          return SizedBox.shrink();
        } else if (snapshot.connectionState == ConnectionState.done) {
          // 一次性关闭所有弹窗
          Navigator.of(context, rootNavigator: true).popUntil((route) => !route.isDialog);
          // 请求完成的UI
          return Text('请求结果：${snapshot.data}');
        } else {
          return SizedBox.shrink();
        }
      },
    );
  }
}

必须注意的点 #

• 绝对不要在build方法里直接调用showDialog，build会被多次触发，弹窗会叠层。
• 关闭弹窗时，加上rootNavigator: true，确保能定位到最上层的弹窗路由；或者用popUntil直接清空所有弹窗路由。
• 操作Navigator前检查mounted状态，防止组件已经销毁时调用导致崩溃。

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