Flutter如何动态设置启动Widget？实现登录校验后跳转对应页面

要实现启动前完成校验并跳转对应页面，核心是在_MyAppState中完成异步校验逻辑，根据结果动态设置首页。下面是具体修改步骤和代码：

1. 添加状态变量 #

在_MyAppState里新增三个变量：

• _isLoading：记录校验过程的加载状态，避免校验完成前显示空白
• _initialPage：存储最终要跳转的首页Widget
• 借助SharedPreferences存储引导页是否已完成的标记

2. 异步校验逻辑 #

在组件初始化时，依次完成：

• 通过Firebase Auth检查用户登录状态
• 通过SharedPreferences检查是否已看过引导页
• 根据校验结果确定启动页面

3. 动态配置首页 #

根据校验结果设置MaterialApp的home属性，加载过程中显示加载指示器。

修改后的完整代码 #

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(const MyApp());
}

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final ThemeStuff appValueNotifier = ThemeStuff.instance;
  bool _isLoading = true;
  Widget? _initialPage;

  @override
  void initState() {
    super.initState();
    _checkAuthAndOnboarding();
  }

  // 异步校验登录状态和引导页
  Future<void> _checkAuthAndOnboarding() async {
    // 1. 检查Firebase登录状态
    final user = FirebaseAuth.instance.currentUser;
    bool isLoggedIn = user != null;

    // 2. 检查是否已完成引导页（用SharedPreferences存储标记）
    final prefs = await SharedPreferences.getInstance();
    bool hasCompletedOnboarding = prefs.getBool('has_completed_onboarding') ?? false;

    // 3. 确定启动页面
    if (!hasCompletedOnboarding) {
      _initialPage = const Onboarding();
    } else if (!isLoggedIn) {
      _initialPage = const Login();
    } else {
      _initialPage = const Home();
    }

    // 结束加载，更新UI
    setState(() {
      _isLoading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder(
      valueListenable: appValueNotifier.theme,
      builder: (context, value, child) {
        // 加载过程显示加载圈
        if (_isLoading) {
          return MaterialApp(
            theme: value,
            home: const Scaffold(
              body: Center(child: CircularProgressIndicator()),
            ),
          );
        }

        return MaterialApp(
          title: 'Handball Tippspiel',
          theme: value,
          home: _initialPage,
          debugShowCheckedModeBanner: false,
          routes: {
            '/login': (context) => const Login(),
            '/register': (context) => const Register(),
            '/home': (context) => const Home(),
            '/onboarding': (context) => const Onboarding(),
          },
        );
      },
    );
  }
}

补充说明 #

• 需要在pubspec.yaml中添加依赖：shared_preferences: ^2.2.2（版本号可根据最新稳定版调整）
• 在引导页Onboarding的完成按钮点击事件中，记得保存完成标记：

  final prefs = await SharedPreferences.getInstance();
  await prefs.setBool('has_completed_onboarding', true);
  

• Firebase Auth会自动维护用户登录状态，登录成功后下次启动会直接进入首页
• 加载状态的处理能避免校验过程中页面空白，提升用户体验

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