Flutter对接Firebase实现登录功能卡顿跳转报错如何解决？

1 登录响应慢优化 #

• 给Firebase登录请求加超时配置，避免无限制等待，超时后直接提示用户检查网络
• 显式开启Firebase离线持久化，减少重复网络请求开销，国内使用可切换Firebase中国区服务降低网络延迟
• 登录过程中增加加载态提示，避免用户误以为页面卡顿

2 报错问题修复 #

报错核心原因是异步操作回调时，当前页面Widget已经被销毁，context失效，同时存在不必要的setState包裹逻辑，修正方案如下：

1. 所有异步回调中使用context前，先判断mounted属性，确认当前页面仍在组件树中再执行后续操作
2. showDialog不需要包裹在setState中，移除多余的状态更新调用
3. 登录请求前弹出加载弹窗，请求结束后先关闭加载弹窗再执行后续逻辑，避免页面状态混乱

修正后代码示例 #

ReusableButton(
  title: "Login",
  color: Colors.white,
  onPress: () async {
    // 展示登录加载弹窗
    showDialog(
      context: context,
      barrierDismissible: false,
      builder: (context) => const Center(child: CircularProgressIndicator()),
    );
    try {
      // 给登录请求加10秒超时
      final user = await _auth.signInWithEmailAndPassword(
        email: myEmailController.text,
        password: myPasswordController.text,
      ).timeout(const Duration(seconds: 10));
      // 关闭加载弹窗，先判断页面是否还存在
      if (mounted) Navigator.pop(context);
      if (user != null && mounted) {
        await Navigator.pushNamed(context, AllTasks.id);
      }
    } catch (e) {
      if (mounted) Navigator.pop(context);
      String newString = e.toString().split("]").removeLast();
      // 弹错误提示前先判断页面状态
      if (mounted) {
        showDialog(
          context: context,
          builder: (value) => AlertDialog(
            title: Text(
              "Wrong Information",
              style: kNormalTextStyle,
            ),
            content: Text(newString),
            actions: [
              FlatButton(
                onPressed: () => Navigator.of(value).pop(),
                child: Text(
                  "Close",
                  style: kNormalTextStyle,
                )
              )
            ],
          )
        );
      }
    }
  },
),

3 热重载后恢复正常的问题处理 #

该现象是因为第一次登录跳转时，AllTasks页面初始化时还未拿到完整的用户登录态就触发了Firestore数据请求，热重载时用户登录态已经缓存在本地，所以请求正常。你可以在AllTasks页面的初始化逻辑中增加用户态判断，等拿到用户UID后再执行任务数据拉取逻辑，避免首次加载报错。

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