在FutureBuilder内用GoRouter导航失败，求正确使用方法

你这段代码的核心问题是把FutureBuilder当成普通函数在按钮点击回调里执行——FutureBuilder是Flutter的Widget，必须作为Widget树的一部分渲染，不能直接在onPressed里创建它。另外你代码末尾的context.go('/Home')会不管登录是否成功都强制跳转，这也是错误的根源之一。

正确实现步骤 #

1. 将登录请求的Future抽为State类的变量，通过setState触发FutureBuilder的UI更新
2. 把FutureBuilder放在Widget树中，而非按钮回调里
3. 导航操作要避开Widget构建阶段，用addPostFrameCallback确保在UI渲染完成后执行
4. 错误处理后重置Future变量，允许用户重新发起登录请求

修正后的完整代码示例 #

class LoginPage extends StatefulWidget {
  const LoginPage({super.key});

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final _mobileKey = GlobalKey<FormState>();
  final mobileController = TextEditingController();
  final passwordController = TextEditingController();
  // 声明登录请求的Future变量，用于控制FutureBuilder的状态
  Future<Loginuser>? _loginFuture;

  @override
  void dispose() {
    mobileController.dispose();
    passwordController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Form(
        key: _mobileKey,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 手机号输入框（示例）
            TextFormField(
              controller: mobileController,
              validator: (value) => value?.isEmpty ?? true ? '请输入手机号' : null,
              decoration: const InputDecoration(hintText: '手机号'),
            ),
            // 密码输入框（示例）
            TextFormField(
              controller: passwordController,
              obscureText: true,
              validator: (value) => value?.isEmpty ?? true ? '请输入密码' : null,
              decoration: const InputDecoration(hintText: '密码'),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                if (_mobileKey.currentState!.validate()) {
                  // 触发登录请求，更新Future变量并刷新UI
                  setState(() {
                    _loginFuture = loginuser(
                      mobileController.text.toString(),
                      passwordController.text.toString(),
                    );
                  });
                }
              },
              child: const Text('Submit'),
            ),
            // 将FutureBuilder放在Widget树中，根据登录状态渲染UI
            if (_loginFuture != null)
              Padding(
                padding: const EdgeInsets.only(top: 16),
                child: FutureBuilder<Loginuser>(
                  future: _loginFuture,
                  builder: (context, snapshot) {
                    if (snapshot.connectionState == ConnectionState.waiting) {
                      return const CircularProgressIndicator();
                    } else if (snapshot.hasData) {
                      // 确保当前UI帧渲染完成后再执行导航，避免状态异常
                      WidgetsBinding.instance.addPostFrameCallback((_) {
                        context.go('/Home');
                      });
                      return Text(snapshot.data!.message);
                    } else if (snapshot.hasError) {
                      // 登录失败后重置Future，允许用户重新尝试
                      setState(() {
                        _loginFuture = null;
                      });
                      return Text('登录失败：${snapshot.error}');
                    }
                    return const SizedBox.shrink();
                  },
                ),
              ),
          ],
        ),
      ),
    );
  }
}

关键注意点 #

• FutureBuilder的定位：它是用来根据Future状态动态渲染UI的Widget，必须嵌入Widget树，不能在回调中直接调用。
• Future的状态管理：用State变量保存登录请求的Future，通过setState更新，确保FutureBuilder能感知状态变化。
• 导航时机：禁止在build方法中直接执行导航操作，否则会触发Flutter的状态异常，addPostFrameCallback是安全的做法。
• 错误处理：登录失败后重置Future变量，避免用户再次点击按钮时复用之前的失败请求。

内容的提问来源于stack exchange，提问作者Hari .S