使用FutureBuilder发起API请求时builder未触发、进度条不显示问题

1. FutureBuilder未被插入Widget树：FutureBuilder本质是一个Widget，只有被包含在当前页面的build方法返回的Widget树中，才会被框架渲染执行内部的builder逻辑。你现在点击按钮后调用buildLoginAPI返回的FutureBuilder没有被挂载到页面Widget树上，所以不会生效，加载圈自然不会显示。
2. 方法定义错误：buildLoginAPI被声明为返回Future<Widget>，但实际是同步返回FutureBuilder，多余的async修饰完全没有必要，也不符合使用规范。

调整实现逻辑，用State变量持有登录请求的Future，再将FutureBuilder嵌入到页面的Widget树中，具体步骤如下：

1. 在State类中定义持有登录请求的Future变量：

class _LoginState extends State<Login> {
  Future<LoginModel>? _loginFuture; // 新增变量

  Future<LoginModel> getLoginData(String username, String password) async {
    var loginModel = await LoginAuthentication().login('name', 'pass');
    return loginModel;
  }

2. 修改登录点击逻辑，点击时通过setState给Future变量赋值触发页面重绘：

void _loginTapped(BuildContext context) {
  setState(() {
    _loginFuture = getLoginData('你的用户名', '你的密码');
  });
}

3. 调整页面build逻辑，将FutureBuilder加入Widget树，根据_loginFuture的状态切换显示内容：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: _buildPageContent(),
  );
}

Widget _buildPageContent() {
  // 存在登录请求时，用FutureBuilder处理加载、成功、错误状态
  if (_loginFuture != null) {
    return FutureBuilder<LoginModel>(
      future: _loginFuture,
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.done) {
          if (snapshot.hasError) {
            // 登录失败显示错误提示，支持返回登录表单
            return Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    snapshot.error.toString(),
                    textAlign: TextAlign.center,
                    textScaleFactor: 1.3,
                  ),
                  const SizedBox(height: 16),
                  ElevatedButton(
                    onPressed: () => setState(() => _loginFuture = null),
                    child: const Text('返回重新登录'),
                  ),
                ],
              ),
            );
          }
          // 登录成功，执行后续逻辑（比如存token、跳首页）
          WidgetsBinding.instance.addPostFrameCallback((_) {
            // 你的登录成功处理逻辑
          });
          return const SizedBox.shrink();
        }
        // 加载中显示进度指示器
        return const Center(child: CircularProgressIndicator());
      },
    );
  }
  // 没有登录请求时显示正常的登录表单
  return Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        // 此处放置你的用户名输入框、密码输入框
        ElevatedButton(
          onPressed: () => _loginTapped(context),
          child: const Text('登录'),
        )
      ],
    ),
  );
}

• 所有需要渲染到页面的Widget都必须在build方法返回的Widget树中，单独调用构造方法返回Widget不会生效
• FutureBuilder的future参数不要每次build都重新生成，用State变量持有可以避免重复发起请求
• 更新State变量必须调用setState才能触发页面重绘

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