Flutter中MaterialButton点击后页面导航失效问题排查

调用API后得到如下响应：

{"token":"eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJ2YWlzaG5hdmkuYXRkb2NodWJAZ21haWwuY29tIiwiaXNzIjoidGVjaC10cmFpbCIsImlhdCI6MTY3MjEyMjc2NiwiZXhwIjoxMjYwODgxMjI3NjZ9.a7Lq9v0fzMfwk5xCXuIfY4sh9Dls2Q0WksXtloui3OsoDwZBQX1qR6yJMz8nUS634POFETNxisHXTu6ObosEow"}

在下方Flutter代码中，我判断响应非空时跳转至homePageAdmin页面，但点击MaterialButton后导航功能失效，请问是否是响应类型存在问题？

Center(
                            child: MaterialButton(
                                height:
                                    MediaQuery.of(context).size.height * 0.06,
                                child: AutoSizeText("Login",
                                    textAlign: TextAlign.center,
                                    style: style.copyWith(
                                      color: Colors.white,
                                      fontWeight: FontWeight.bold,
                                      fontSize: multiplier * unitHeightValue,
                                    )),
                                minWidth:
                                    MediaQuery.of(context).size.width * 0.5,
                                elevation: 3.0,
                                shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.all(
                                        Radius.circular(30.0))),
                                color: Color.fromARGB(255, 253, 153, 33),
                                onPressed: () async {
                                  // _formKey.currentState?.validate();
                                  // final isValidForm =
                                  //     _formKey.currentState!.validate();
                                  // if (isValidForm) {
                                  final String email = emailController.text;

                                  final String pass = pwController.text;
                                  String pid = this.playerid;
                                  print(
                                      'The player id from login............${pid}');
                                  List<UserLogin> res =
                                      await LoginController.login(
                                          email, pass, pid);
                                  SharedPreferences prefs =
                                      await SharedPreferences.getInstance();
                                  prefs.setString(
                                      'email', emailController.text);
                                  prefs.setString('authToken', res[0].token);
                                  // UserLogin resp = UserLogin.fromJson(
                                  //     jsonDecode(res[0].token));
                                  print(
                                      'Auth Token.............${res[0].token}');
                                  // prefs.setString('username', res[0].userName);
                                  // this.uname = res[0].userName;
                                  // final String username = this.uname;

                                  String authToken = jsonEncode(res[0]);

                                  // ignore: unnecessary_null_comparison
                                  if (authToken != null) {
                                    Navigator.of(context)
                                        .push(MaterialPageRoute(
                                            builder: (_) => homePageAdmin(
                                                  this.playerid,
                                                  'Vaishnavi',
                                                )));
                                  }

                                  print(
                                      'Auth Token from login..... ${authToken}');

                                  // role == res[0].role;
                                  // print(res[0].role);

                                  // }
                                }),
                          )

导航失效和响应类型本身无关，核心是代码逻辑存在问题，具体排查和修复方向如下：

• 无效的判断条件：jsonEncode(res[0])永远不会返回null，哪怕res[0]字段为空，也会生成合法的JSON字符串（比如{}），所以这个判断完全起不到校验作用，还可能掩盖真正的问题。

• 关键问题排查点：

  1. 登录请求是否抛出异常：如果LoginController.login在请求过程中遇到网络错误、API返回异常等情况，await会中断后续代码，导航逻辑根本没机会执行。必须加try-catch捕获异常，排查错误：

     try {
       List<UserLogin> res = await LoginController.login(email, pass, pid);
       // 后续存储token、导航逻辑
     } catch(e) {
       print('登录请求出错：$e');
     }
     

  2. 响应有效性校验缺失：你直接取res[0].token，但没判断res是否为空，也没校验token本身是否为空字符串。如果API返回空列表，这里会直接报错，中断导航。
  3. 页面构造是否有问题：检查homePageAdmin的构造函数参数是否匹配，比如playerid类型是否正确，若参数不匹配会导致页面无法构建，导航失败。

• 修复后的核心代码：

onPressed: () async {
  final String email = emailController.text;
  final String pass = pwController.text;
  String pid = this.playerid;
  print('The player id from login............${pid}');
  
  try {
    List<UserLogin> res = await LoginController.login(email, pass, pid);
    // 校验响应和token有效性
    if (res.isNotEmpty && res[0].token != null && res[0].token.isNotEmpty) {
      SharedPreferences prefs = await SharedPreferences.getInstance();
      prefs.setString('email', emailController.text);
      prefs.setString('authToken', res[0].token);
      print('Auth Token.............${res[0].token}');
      
      // 执行导航
      Navigator.of(context).push(MaterialPageRoute(
        builder: (_) => homePageAdmin(
          this.playerid,
          'Vaishnavi',
        )));
    } else {
      print('登录响应无效，未获取到有效token');
    }
  } catch(e) {
    print('登录失败：$e');
  }
}

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