Flutter Web初始路由异常：SplashPage未优先加载问题排查

问题根源 #

1. StatelessWidget生命周期误用：你直接在SplashPage的build方法里调用异步初始化方法initApp，但build会被Flutter框架多次触发（比如布局更新、状态变化时），这会导致初始化逻辑重复执行。Web端的渲染调度机制和Native不同，更容易因此出现时序混乱。
2. Flutter Web路由预加载特性：使用命名路由时，Web端会提前预加载路由表中的页面（包括/对应的HomePage），这就解释了为什么HomePage的build会先执行，但实际路由栈并未切换。
3. 导航时机不严谨：异步操作完成后直接调用Navigator，没有确保当前context仍然有效，也没有在正确的生命周期节点执行导航，导致路由切换失败。

解决方案 #

方案一：将SplashPage改为StatefulWidget（推荐）

利用StatefulWidget的initState生命周期方法（仅执行一次）来执行初始化逻辑，确保导航操作在正确时机触发：

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

  @override
  State<SplashPage> createState() => _SplashPageState();
}

class _SplashPageState extends State<SplashPage> {
  @override
  void initState() {
    super.initState();
    _initApp();
  }

  Future<void> _initApp() async {
    await initThis();
    await initThat();
    // 其他初始化操作

    // 先判断widget是否仍挂载，避免上下文无效导致异常
    if (!mounted) return;
    Navigator.pushReplacementNamed(context, "/");
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      // 你的启动页UI代码
    );
  }
}

方案二：禁用Web端路由预加载（可选）

如果不需要路由预加载特性，可以在MaterialApp中配置关闭预加载：

MaterialApp(
  initialRoute: '/splash',
  routes: {
    '/': (context) => const HomePage(),
    '/splash': (context) => const SplashPage(),
    '/about': (context) => const AboutPage(),
    '/list': (context) => const ListPage(),
    '/favorites': (context) => const FavoritesPage(),
  },
  routeInformationParser: NoPreloadingRouteInformationParser(),
)

注意：该方案可能影响其他路由的加载性能，仅在必要时使用。

额外提示 #

• 不要在StatelessWidget的build方法中执行异步初始化或状态变更操作，build应仅负责纯UI渲染，保持无副作用。
• 执行导航前务必检查mounted状态，避免因widget已销毁而抛出上下文无效的异常。

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