Flutter登录页输入错误凭证无法显示Scaffold提示的问题求助

问题根源 #

• 非200状态码时，你仍在尝试从空或不符合预期的响应数据中读取accessToken，触发NoSuchMethodError，代码执行中断，导致后续的错误提示和加载状态更新逻辑无法运行，加载圈持续显示。
• 未对网络请求和数据解析过程做异常捕获，错误发生后没有重置加载状态。

解决步骤 #

1. 先判断状态码，再处理数据解析 #

在_login方法中，优先检查响应状态码，仅当状态码为200时才解析accessToken；非200状态直接执行错误提示逻辑，避免访问空数据。

示例代码片段：

void _login() async {
  setState(() {
    _isLoading = true; // 开启加载状态
  });

  try {
    final response = await http.post(
      Uri.parse('你的登录API地址'),
      body: {'username': _username, 'password': _password},
    );

    if (response.statusCode == 200) {
      final responseData = jsonDecode(response.body);
      final accessToken = responseData['accessToken'];
      if (accessToken != null) {
        // 保存token到SharedPreferences
        final prefs = await SharedPreferences.getInstance();
        await prefs.setString('access_token', accessToken);
        // 登录成功后的跳转或其他操作
      } else {
        _showErrorSnackBar('登录失败：未获取到有效令牌');
      }
    } else {
      // 解析API返回的错误信息（如果有），否则用默认提示
      String errorMsg = '登录失败，请检查账号密码';
      try {
        final errorData = jsonDecode(response.body);
        errorMsg = errorData['message'] ?? errorMsg;
      } catch (_) {}
      _showErrorSnackBar(errorMsg);
    }
  } catch (e) {
    // 捕获网络异常、JSON解析失败等所有可能的错误
    _showErrorSnackBar('网络异常，请稍后重试');
  } finally {
    // 无论成功失败，都重置加载状态
    setState(() {
      _isLoading = false;
    });
  }
}

2. 实现正确的Scaffold提示方法 #

确保提示方法能正确获取当前页面的ScaffoldMessenger：

void _showErrorSnackBar(String message) {
  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(content: Text(message)),
  );
}

3. 正确控制加载状态显示 #

在build方法中，根据_isLoading状态切换加载圈和登录表单：

@override
Widget build(BuildContext context) {
  return Scaffold(
    // 页面其他布局
    body: _isLoading
        ? const Center(child: CircularProgressIndicator())
        : Column(
            children: [
              // 账号输入框、密码输入框
              ElevatedButton(
                onPressed: _login,
                child: const Text('登录'),
              ),
            ],
          ),
  );
}

关键注意点 #

• 必须用try-catch包裹网络请求和数据解析逻辑，覆盖所有可能的异常场景。
• 用finally块保证加载状态一定会被重置，避免加载圈持续显示。
• 非200状态下绝对不要尝试读取accessToken，直接处理错误提示。

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