Flutter中SplashScreen使用Navigator.pushReplacement时出现路由跳转异常问题

错误原因分析 #

从你提供的错误日志来看，核心问题是：当Future.delayed的回调触发时，你的SplashScreen widget已经从组件树中被移除（状态已失效），这时候再用它的context去调用Navigator.of(context)，就会触发"Looking up a deactivated widget's ancestor is unsafe"的异常。

为什么用push没问题？因为push只是在当前页面栈顶添加新页面，原SplashScreen还在栈中，其context暂时还处于有效状态，但这其实是一个潜在隐患，并非正确的实现方式。而pushReplacement会直接替换当前页面，导致SplashScreen被快速销毁，当延迟回调执行时，对应的context已经失效，错误就暴露出来了。

另外你提到错误仅在重新渲染页面时出现，这是因为StatelessWidget的build方法会在页面重新渲染时被多次调用，每次都会创建一个新的延迟任务，旧任务的回调执行时，对应的context早已失效。

解决方案 #

下面提供两种可靠的修复方式，你可以根据需求选择：

方案1：将SplashScreen改为StatefulWidget，在initState中处理跳转

这是最推荐的方式，因为initState只会在widget初始化时执行一次，且此时context是稳定有效的，同时我们可以通过mounted判断widget是否还存活，避免在组件销毁后执行导航操作。

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

  @override
  State<SplashScreen> createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  final backgroundColor = 0xffF6F6F6;

  @override
  void initState() {
    super.initState();
    // 初始化时启动跳转逻辑
    _navigateToNextPage();
  }

  void _navigateToNextPage() async {
    await Future.delayed(const Duration(seconds: 3));
    // 先判断组件是否还挂载，避免在已销毁的context上执行操作
    if (!mounted) return;
    Navigator.of(context).pushReplacement(
      MaterialPageRoute(
        builder: (context) => const Wrapper(),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
      builder: () => MaterialApp(
        // 保留你原来的MaterialApp配置
      ),
    );
  }
}

方案2：使用全局NavigatorKey导航（无需依赖widget context）

如果你想保持StatelessWidget的结构，可以通过全局NavigatorKey来实现导航，这样完全不用依赖widget的context，从根源避免context失效的问题。

首先在全局范围定义一个NavigatorKey：

final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

然后在你的MaterialApp中配置这个key：

MaterialApp(
  navigatorKey: navigatorKey,
  // 其他配置：home、theme等
)

最后修改SplashScreen中的跳转逻辑：

class SplashScreen extends StatelessWidget {
  final backgroundColor = 0xffF6F6F6;
  @override
  Widget build(BuildContext context) {
    Future.delayed(const Duration(seconds: 3), () {
      // 使用全局key获取Navigator状态，安全执行跳转
      navigatorKey.currentState?.pushReplacement(
        MaterialPageRoute(
          builder: (context) => const Wrapper(),
        ),
      );
    });
    return ScreenUtilInit(
      builder: () => MaterialApp(...),
    );
  }
}

额外提示 #

• 尽量避免在build方法中创建异步任务，因为build会被频繁调用，可能导致重复创建任务，引发不必要的问题。
• 任何异步操作执行UI更新或导航前，都建议先通过mounted（StatefulWidget）或判断全局key的currentState是否存在，确保操作的安全性。

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