Flutter中如何在StreamBuilder内使用Navigator跳转页面？

方案一：在initState中监听Auth状态流（推荐） #

这种方式将状态监听与UI构建分离，避免在build过程中触发路由操作，逻辑更简洁稳定：

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

  @override
  State<AuthChecker> createState() => _AuthCheckerState();
}

class _AuthCheckerState extends State<AuthChecker> {
  @override
  void initState() {
    super.initState();
    // 监听Firebase Auth状态变化
    FirebaseAuth.instance.authStateChanges().listen((User? user) {
      if (user != null) {
        // 已登录：判断当前是否不在Profile页面，避免重复跳转
        if (ModalRoute.of(context)?.settings.name != '/profile') {
          Navigator.pushReplacementNamed(context, '/profile');
        }
      } else {
        // 未登录：判断当前是否不在SignUp页面，避免重复跳转
        if (ModalRoute.of(context)?.settings.name != '/signup') {
          Navigator.pushReplacementNamed(context, '/signup');
        }
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    // 初始状态仅显示加载指示器
    return const Scaffold(
      body: Center(child: CircularProgressIndicator()),
    );
  }
}

方案二：在StreamBuilder中处理跳转 #

如果想保留原有的StreamBuilder结构，可以通过addPostFrameCallback延迟执行跳转，避免在build过程中修改路由的错误：

body: StreamBuilder<User?>(
  stream: FirebaseAuth.instance.authStateChanges(),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return const Center(child: CircularProgressIndicator());
    } else if (snapshot.hasError) {
      return const Center(child: Text("Something went wrong"));
    } else {
      // 等待当前build完成后执行跳转逻辑
      WidgetsBinding.instance.addPostFrameCallback((_) {
        final currentRoute = ModalRoute.of(context)?.settings.name;
        if (snapshot.hasData) {
          if (currentRoute != '/profile') {
            Navigator.pushReplacementNamed(context, '/profile');
          }
        } else {
          if (currentRoute != '/signup') {
            Navigator.pushReplacementNamed(context, '/signup');
          }
        }
      });
      // 跳转期间显示空组件或加载状态
      return const SizedBox.shrink();
    }
  },
),

关键注意事项 #

• 使用pushReplacementNamed：替换当前页面栈中的状态检查页，避免用户返回时回到检查页面，符合正常导航逻辑。
• 路由判断：必须检查当前页面路由，否则Auth状态变化时会反复触发跳转，导致路由栈异常。
• 提前配置路由：需要在MaterialApp中定义对应页面的路由映射：

MaterialApp(
  initialRoute: '/',
  routes: {
    '/': (context) => const AuthChecker(),
    '/profile': (context) => const ProfileScreen(),
    '/signup': (context) => const SignUpScreen(),
  },
);

是否需要替换StreamBuilder？ #

不需要。StreamBuilder本身就是监听authStateChanges()这类实时流的最佳组件之一，只需将原有的返回组件逻辑改为路由跳转逻辑即可。如果选择initState监听流的方式，甚至可以完全不用StreamBuilder，两种方案均可行，可根据个人习惯选择。

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