Flutter 2.5+ Web端Navigation2.0命名路由跳转顶部出现加载条问题求助

开发者阿泽

2026-10-3

问题原因

Flutter 2.5版本对Web端的路由能力做了升级，命名路由Navigator.pushNamed跳转默认会同步更新浏览器地址栏、同步浏览历史记录，该操作会触发Chrome的默认加载进度条控件显示。

可用解决方案

方案1：直接隐藏浏览器加载进度条（保留命名路由和地址栏同步能力）
打开项目web目录下的index.html文件，在<head>标签内添加如下CSS样式即可：

<style>
  /* 隐藏Flutter Web默认加载进度条 */
  #loading {
    display: none !important;
  }
  /* 隐藏Chrome原生导航进度条 */
  body > progress {
    display: none !important;
  }
  ::-webkit-progress-bar {
    display: none !important;
  }
</style>

方案2：自定义路由跳转避免触发浏览器加载检测（不需要地址栏同步时选用）
把原有pushNamed的命名路由跳转改为自定义PageRoute跳转，不会触发地址栏更新，自然不会唤起加载条，示例代码如下：

ElevatedButton(
  onPressed: () => Navigator.push(
    context,
    PageRouteBuilder(
      pageBuilder: (context, animation, secondaryAnimation) => AddFoodPage(),
      // 可根据需求自定义过渡动画，不需要动画直接返回child即可
      transitionsBuilder: (context, animation, secondaryAnimation, child) => child,
    ),
  ),
  child: Text('I Have Food')
)

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

相关产品推荐

方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)，限时 9.9 元起

产品介绍相关文档

火山引擎最新活动