Flutter跳转新页面时如何返回Widget？及FutureBuilder导航报错修复

1. 跳转新页面时如何正确返回Widget #

• 跳转页面的路由操作不能直接放在Widget的build方法（包括FutureBuilder的builder回调）中，因为build方法的核心职责是构建并返回当前页面的Widget，直接在其中执行Navigator跳转会打破build方法的设计规范，还可能引发页面重复重建、路由循环等问题。
• 正确的做法是将跳转逻辑放在生命周期方法（如StatefulWidget的initState）、Future的then回调，或者使用WidgetsBinding.instance.addPostFrameCallback来执行，此时build方法只需要返回当前页面的临时UI（比如加载指示器、闪屏图等）。

2. 修复FutureBuilder中Navigator操作的错误代码 #

问题原因 #

原代码中，FutureBuilder的builder回调在snapshot.hasData分支里只执行了Navigator跳转，没有返回任何Widget，违反了builder必须返回Widget的要求，因此触发报错。同时直接在builder里执行跳转操作本身就不符合Flutter的组件设计逻辑。

正确实现方案 #

将Splash1改为StatefulWidget，在initState中处理异步检查和路由跳转，build方法仅负责展示加载状态UI：

MaterialApp(
  home: const Splash1(),
);

class Splash1 extends StatefulWidget {
  const Splash1({Key? key}) : super(key: key);

  @override
  State<Splash1> createState() => _Splash1State();
}

class _Splash1State extends State<Splash1> {
  @override
  void initState() {
    super.initState();
    _checkAndNavigate();
  }

  Future<void> _checkAndNavigate() async {
    try {
      final isSeen = await checkIsSeen();
      // 确保Widget仍在组件树中，避免内存泄漏
      if (mounted) {
        Navigator.pushReplacement(
          context,
          MaterialPageRoute(
            builder: (context) => isSeen ? const HomeView() : const IntroScreen(),
          ),
        );
      }
    } catch (e) {
      // 处理异步请求错误，比如显示错误提示或跳转错误页面
      if (mounted) {
        // 示例：可根据需求替换为错误页面跳转
        // Navigator.pushReplacement(context, MaterialPageRoute(builder: (context) => ErrorPage()));
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: CircularProgressIndicator(),
      ),
    );
  }
}

说明 #

• 把异步检查和跳转逻辑移到initState中，确保只在组件初始化时执行一次，避免重复触发。
• 使用mounted判断Widget是否还在组件树中，防止在Widget已被销毁时执行路由操作导致内存泄漏。
• build方法仅返回加载状态的UI，符合Flutter组件的职责划分。

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