Flutter接口返回200时跳转首页 调用Navigator报context未定义如何解决

问题根因 #

• 第一个Undefined name 'context'报错是因为signIn异步方法未接收BuildContext参数，方法内部无法访问到页面的上下文对象
• 第二个无论接口返回什么都跳转的问题，是因为signIn是异步方法，原代码没有等待异步请求返回结果就直接执行了跳转逻辑，跳转逻辑和接口返回状态完全无关

修复步骤 #

1. 改造signIn方法 #

新增BuildContext入参，同时将方法改为返回bool类型标识登录是否成功：

// 新增BuildContext参数，方法返回Future<bool>标识登录结果
Future<bool> signIn(BuildContext context, String username, String password) async {
  // 保留原有接口请求逻辑
  //////
  if(response.statusCode == 200) {
    var jsonResponse = json.decode(response.body);
    if(jsonResponse != null) {
      // 此处也可以直接执行跳转，更推荐跳转逻辑放在UI层、方法仅返回结果，耦合度更低
      return true;
    }
  }
  // 所有非成功场景统一返回false
  return false;
}

2. 改造onPressed回调 #

使用async/await等待登录接口请求结果，判断登录成功后再执行跳转：

onPressed: () async {
  // 等待异步登录方法执行完成，拿到登录结果
  bool isLoginSuccess = await signIn(context, username.text, password.text);
  if(isLoginSuccess) {
    // 只有登录成功才执行跳转
    if(mounted) { // StatefulWidget中建议加这个判断，避免请求过程中页面销毁后跳转报错
      Navigator.pushNamed(context, '/HomePage');
    }
  } else {
    // 可以在此处补充登录失败的提示逻辑，比如弹出错误提示
    ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text("用户名或密码错误")));
  }
},

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