Flutter中在FutureBuilder内使用Navigator无法跳转页面的问题

问题根源 #

你当前的写法是在ElevatedButton的onPressed回调中直接实例化FutureBuilder，但这个FutureBuilder并未被挂载到Widget树中，Flutter框架无法识别并执行它的builder回调逻辑，因此无法触发Navigator页面跳转。

解决方案一：直接在回调中异步处理API请求（推荐） #

不需要使用FutureBuilder，直接在onPressed中通过async/await调用API，处理结果后执行跳转，同时可手动管理加载状态：

ElevatedButton(
  style: ElevatedButton.styleFrom(
    fixedSize: const Size.fromHeight(20),
    maximumSize: const Size.fromWidth(250),
    primary: clientSettings.getColor("login_button_color"),
    shape: const StadiumBorder(),
  ),
  onPressed: () async {
    var credentials = {
      "data[email]": _emailController.text,
      "data[password]": _passwordController.text
    };

    // 显示加载弹窗（可选）
    showDialog(
      context: context,
      barrierDismissible: false,
      builder: (context) => const Center(child: CircularProgressIndicator()),
    );

    try {
      // 调用API获取数据
      var dataFeed = await DataFeed().getDataFeed(credentials);
      var _list = dataFeed["data"]["views"].values.toList();

      // 关闭加载弹窗
      Navigator.pop(context);

      // 执行页面跳转
      Navigator.of(context).pushAndRemoveUntil(
        MaterialPageRoute(builder: (context) => AppView(selectedMenuItems: _list[0])),
        (Route<dynamic> route) => false,
      );
    } catch (e) {
      // 关闭加载弹窗并处理错误
      Navigator.pop(context);
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('登录失败：$e')),
      );
    }
  },
  child: Text(
    'Login',
    style: TextStyle(
      fontFamily: clientSettings.getLogoAsset("login_font_family"),
      fontSize: clientSettings.getNumber("login_font_size"),
      color: clientSettings.getColor("login_text_color")),
  ),
)

解决方案二：将FutureBuilder挂载到Widget树中 #

如果必须使用FutureBuilder，需要将其添加到页面的Widget树里，通过状态管理触发API请求：

1. 在State类中定义用于存储API请求的Future变量：

Future<dynamic>? _loginFuture;

2. 修改onPressed逻辑，仅触发API请求并更新状态：

onPressed: () {
  var credentials = {
    "data[email]": _emailController.text,
    "data[password]": _passwordController.text
  };
  setState(() {
    _loginFuture = DataFeed().getDataFeed(credentials);
  });
},

3. 在页面Widget树中添加FutureBuilder（示例放在Stack中实现加载遮罩）：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Stack(
      children: [
        // 原有页面内容（包括登录表单和按钮）
        // ...

        // 加载状态及跳转逻辑
        if (_loginFuture != null)
          FutureBuilder(
            future: _loginFuture,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                var dataFeed = snapshot.data;
                var _list = dataFeed["data"]["views"].values.toList();
                
                // 使用PostFrameCallback避免在build期间执行导航
                WidgetsBinding.instance.addPostFrameCallback((_) {
                  Navigator.of(context).pushAndRemoveUntil(
                    MaterialPageRoute(builder: (context) => AppView(selectedMenuItems: _list[0])),
                    (Route<dynamic> route) => false,
                  );
                  // 重置Future，防止页面重建时重复跳转
                  setState(() => _loginFuture = null);
                });
              } else if (snapshot.hasError) {
                WidgetsBinding.instance.addPostFrameCallback((_) {
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text('登录失败：${snapshot.error}')),
                  );
                  setState(() => _loginFuture = null);
                });
              }

              // 返回加载遮罩组件
              return Container(
                color: Colors.black54,
                child: const Center(child: CircularProgressIndicator()),
              );
            },
          ),
      ],
    ),
  );
}

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