Flutter中Navigator.of(context).push跳转UpdateApp页面失效问题

问题根源分析 #

1. proceedToUpdate方法未返回Widget
   MaterialApp的home参数要求传入有效Widget，但proceedToUpdate仅执行导航操作，无任何Widget返回。当buildNumber ==1时，home会接收到null，导致页面空白，即便导航逻辑执行，也会因原页面Widget缺失引发异常。

2. 在build方法中执行导航操作
   build方法会被Flutter框架多次触发（状态更新、屏幕旋转等），在此处直接调用Navigator.push会导致重复导航，甚至引发上下文无效的错误。

3. 异步初始化时序问题
   getBuild是异步方法，初始buildNumber为0，第一次build会加载WebView页面；等getBuild完成后更新buildNumber为1，触发二次build才会执行导航，导致用户短暂看到WebView后再跳转，不符合预期。

修复方案 #

1. 将导航逻辑移至异步初始化完成后 #

修改getBuild方法，在获取到buildNumber后直接判断跳转条件，确保只执行一次导航：

getBuild() async {
  PackageInfo packageInfo = await PackageInfo.fromPlatform();
  packageName = packageInfo.packageName;
  buildNumber = int.parse(packageInfo.buildNumber);
  print("build number is $buildNumber");

  // 确保Widget已挂载，避免上下文无效
  if (buildNumber == 1 && mounted) {
    WidgetsBinding.instance.addPostFrameCallback((_) {
      // 使用pushReplacement替换当前页面，避免返回原WebView
      Navigator.of(context).pushReplacement(
        MaterialPageRoute(builder: (context) => UpdateApp())
      );
    });
  }
}

2. 简化build方法的home逻辑 #

此时build只需正常返回WebView页面，跳转逻辑已在异步初始化中处理：

@override
Widget build(BuildContext context) {
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
      systemNavigationBarColor: Colors.white,
      systemNavigationBarIconBrightness: Brightness.dark));

  return MaterialApp(
    home: SafeArea(
      child: Scaffold(
        body: WillPopScope(
            onWillPop: () async {
              if (await flutterWebViewPlugin.canGoBack()) {
                flutterWebViewPlugin.goBack();
                return false;
              } else {
                SystemNavigator.pop();
                return true;
              }
            },
            child: Stack(
              children: [
                Positioned.fill(
                  child: Column(
                    children: [
                      webProgress < 1
                          ? SizedBox(
                              height: 5,
                              child: LinearProgressIndicator(
                                value: webProgress,
                                color: Colors.blue,
                                backgroundColor: Colors.white,
                              ),
                            )
                          : SizedBox(),
                      Expanded(
                        child: WebviewScaffold(
                          url: "https://google.com",
                          mediaPlaybackRequiresUserGesture: false,
                          withLocalStorage: true,
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            )),
      ),
    ),
  );
}

3. 移除无用方法 #

删除原proceedToUpdate方法，因为导航逻辑已迁移至getBuild中。

额外优化建议 #

• 添加初始化加载状态
  在buildNumber未初始化完成前，显示加载页面，避免用户看到短暂的WebView：

  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
        systemNavigationBarColor: Colors.white,
        systemNavigationBarIconBrightness: Brightness.dark));
  
    // 显示加载中直到buildNumber初始化完成
    if (buildNumber == 0) {
      return MaterialApp(
        home: Scaffold(
          body: Center(child: CircularProgressIndicator()),
        ),
      );
    }
  
    return MaterialApp(
      home: SafeArea(
        // 原WebView代码
      ),
    );
  }
  

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