Flutter错误弹窗关闭异常：点击OK时误移除当前页面问题

问题场景 #

通过API提交医生信息到数据库，点击注册按钮时需实现：

• 显示加载弹窗等待API响应
• API请求失败时显示错误弹窗

技术实现细节 #

• 使用Provider的Consumer做状态监听，未采用FutureBuilder
• 自定义无状态加载弹窗和错误弹窗组件
• 要求实现业务层与展示层分离

遇到的异常 #

1. 点击错误弹窗的OK按钮时，会直接移除父组件/当前页面，而非仅关闭弹窗
2. HomePage的Consumer中无法调用showDialog或showSnackbar，因为Consumer的builder函数要求返回Widget，不能直接执行这类异步弹窗方法

尝试过的方案 #

用Builder包裹错误弹窗，但问题未解决

解决方案 #

1. 修复错误弹窗关闭异常 #

弹窗误删页面的核心原因是上下文使用错误，确保关闭弹窗时仅操作弹窗自身的上下文：

// 错误弹窗组件示例
class ErrorDialog extends StatelessWidget {
  final String message;
  const ErrorDialog({super.key, required this.message});

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: const Text('错误'),
      content: Text(message),
      actions: [
        TextButton(
          // 用弹窗内部的context执行pop，避免影响父页面
          onPressed: () => Navigator.of(context).pop(),
          child: const Text('确定'),
        ),
      ],
    );
  }
}

调用弹窗时传入独立的上下文：

showDialog(
  context: context,
  barrierDismissible: false,
  builder: (dialogContext) => ErrorDialog(message: '注册失败'),
);

2. 解决Consumer内无法调用弹窗的问题 #

Consumer的builder函数要求返回Widget，可通过两种方式绕过限制：

方式一：使用WidgetsBinding.instance.addPostFrameCallback

延迟执行弹窗逻辑，确保Widget构建完成后再调用：

Consumer<DoctorProvider>(
  builder: (context, provider, child) {
    if (provider.isLoading) {
      WidgetsBinding.instance.addPostFrameCallback((_) {
        showDialog(
          context: context,
          barrierDismissible: false,
          builder: (_) => const LoadingDialog(),
        );
      });
    } else if (provider.hasError) {
      WidgetsBinding.instance.addPostFrameCallback((_) {
        showDialog(
          context: context,
          builder: (dialogContext) => ErrorDialog(message: provider.errorMessage),
        );
        provider.resetError(); // 重置错误状态，避免重复弹窗
      });
    }
    return const RegisterButton();
  },
)

方式二：通过回调让UI层处理弹窗

业务层（Provider）仅管理状态和API逻辑，通过回调通知UI层执行弹窗操作：

// Provider类示例
class DoctorProvider extends ChangeNotifier {
  bool _isLoading = false;
  String? _errorMessage;
  // 定义UI回调
  Function(String)? onError;
  Function()? onLoadingStart;
  Function()? onLoadingEnd;

  Future<void> registerDoctor(DoctorInfo info) async {
    _isLoading = true;
    notifyListeners();
    onLoadingStart?.call();
    try {
      await ApiService.register(info);
      _isLoading = false;
      onLoadingEnd?.call();
    } catch (e) {
      _isLoading = false;
      _errorMessage = e.toString();
      onError?.call(_errorMessage!);
    }
    notifyListeners();
  }

  void resetError() {
    _errorMessage = null;
    notifyListeners();
  }
}

在UI层初始化时绑定回调：

@override
void initState() {
  super.initState();
  final provider = Provider.of<DoctorProvider>(context, listen: false);
  provider.onLoadingStart = () {
    showDialog(
      context: context,
      barrierDismissible: false,
      builder: (_) => const LoadingDialog(),
    );
  };
  provider.onLoadingEnd = () {
    Navigator.of(context).pop();
  };
  provider.onError = (message) {
    Navigator.of(context).pop(); // 先关闭加载弹窗
    showDialog(
      context: context,
      builder: (dialogContext) => ErrorDialog(message: message),
    );
    provider.resetError();
  };
}

3. 业务层与展示层分离优化 #

• 业务层（Provider）只负责API逻辑、状态管理，不涉及任何UI组件
• UI层通过监听状态或回调接收通知，执行弹窗、跳转等UI操作

内容的提问来源于stack exchange，提问作者Agent-Dev