Flutter调用登录API获Token后无法跳转至首页问题求助

你的代码核心问题是async函数中直接返回Widget无法触发页面跳转，Flutter的页面导航必须通过Navigator组件完成，而非简单返回Widget。另外还有几处细节需要修正：

1. 页面跳转的正确方式 #

在log_inc函数中，将return Home_page();替换为导航代码，通过Navigator实现页面跳转。如果是在State类中，可直接使用当前context：

log_inc() async {
  // ... 原有请求和存储代码 ...
  
  // 替换return语句为以下导航代码
  if (!mounted) return; // 避免异步操作完成后组件已销毁的情况
  Navigator.of(context).pushReplacement(
    MaterialPageRoute(builder: (context) => Home_page()),
  );
}

• 使用pushReplacement是为了登录后无法返回登录页，符合登录流程的常规设计；如果需要保留返回栈，可改用push。
• 加上!mounted判断，防止异步请求完成后当前页面组件已被销毁，引发context错误。

2. 修正函数名不匹配问题 #

你的按钮onPressed绑定的是log_in，但实际函数名为log_inc，这会导致点击按钮无响应（如果是笔误的话），需要统一名称：

FloatingActionButton(
  onPressed: log_inc, // 修正为实际函数名
)

3. 请求头的规范修正 #

你发送的是JSON格式数据，但请求头Content-Type设置为text/html，这不符合HTTP规范，虽然当前能获取token，但后续可能引发接口兼容性问题，建议修改为：

var headers = {
  'Content-Type': 'application/json',
};

4. 完善错误处理 #

当前代码中如果请求失败会直接抛出异常，可能导致APP崩溃，建议用try-catch包裹逻辑，给用户提示：

log_inc() async {
  try {
    var headers = {
      'Content-Type': 'application/json',
    };
    var data = '{"username":"XXXXX", "password":"XXXXX"}';
    var url = Uri.parse('http://XXXXX/api/auth/get_tokens');
    var res = await http.post(url, headers: headers, body: data);
    
    if (res.statusCode != 200) {
      throw Exception('登录失败：状态码 ${res.statusCode}');
    }
    
    var data_res = jsonDecode(res.body);
    final storage = FlutterSecureStorage();
    await storage.write(key: "token", value: data_res["access_token"]);
    
    if (!mounted) return;
    Navigator.of(context).pushReplacement(
      MaterialPageRoute(builder: (context) => Home_page()),
    );
  } catch (e) {
    // 这里可以用Toast或AlertDialog提示用户登录失败
    print('登录错误：$e');
  }
}

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