创建MaterialApp后如何调用方法实现登录状态检测与页面跳转

嘿，这个需求太常见啦！我给你分享两种实用的实现方式，结合你的main.dart改起来超顺手～

方法一：动态设置MaterialApp的home属性 #

思路很直接：在MaterialApp的home位置，用FutureBuilder来处理异步的登录状态校验，根据校验结果动态显示首页、登录页，或者加载中的过渡页面。

这种方式不需要额外的启动页，代码也相对紧凑，适合简单的场景。给你改好的代码示例：

void main() {
  runApp(const MyApp());
}

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

  // 这里是你的登录状态校验方法，实际项目里可以替换成从本地存储读取（比如SharedPreferences）或者接口请求
  Future<bool> _checkLoginStatus() async {
    // 模拟异步耗时（比如读本地缓存、请求接口）
    await Future.delayed(const Duration(seconds: 1));
    // 实际开发中替换成真实的校验逻辑，比如：
    // final prefs = await SharedPreferences.getInstance();
    // return prefs.getBool('isLoggedIn') ?? false;
    return false; // 这里返回true代表已登录，false代表未登录
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      // 用FutureBuilder处理异步校验过程
      home: FutureBuilder<bool>(
        future: _checkLoginStatus(),
        builder: (context, snapshot) {
          // 校验还在进行中，显示加载动画
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Scaffold(
              body: Center(child: CircularProgressIndicator()),
            );
          }
          // 校验完成，根据结果跳转对应页面
          if (snapshot.data == true) {
            return const HomePage(); // 你的首页
          } else {
            return const LoginPage(); // 你的登录页
          }
        },
      ),
    );
  }
}

// 示例登录页，你可以替换成自己的登录UI
class LoginPage extends StatelessWidget {
  const LoginPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('登录')),
      body: const Center(child: Text('请登录后继续')),
    );
  }
}

// 示例首页，替换成你的主页面
class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('首页')),
      body: const Center(child: Text('登录成功，欢迎回来！')),
    );
  }
}

方法二：用启动页+路由跳转 #

如果你的应用需要一个启动页（比如展示logo），或者希望路由管理更清晰，可以用这种方式：先显示一个启动过渡页，在页面的initState里做登录校验，完成后用Navigator.pushReplacement跳转到目标页面（这样用户无法返回启动页）。

代码示例如下：

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      initialRoute: '/splash', // 初始路由设为启动页
      routes: {
        '/splash': (context) => const SplashScreen(),
        '/login': (context) => const LoginPage(),
        '/home': (context) => const HomePage(),
      },
    );
  }
}

// 启动过渡页
class SplashScreen extends StatefulWidget {
  const SplashScreen({super.key});

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

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    super.initState();
    // 页面初始化时开始校验并跳转
    _checkLoginAndNavigate();
  }

  Future<void> _checkLoginAndNavigate() async {
    // 同样的登录校验逻辑
    await Future.delayed(const Duration(seconds: 1));
    bool isLoggedIn = false; // 替换成真实校验结果

    // 用pushReplacementNamed替换当前路由，避免返回启动页
    if (isLoggedIn) {
      Navigator.pushReplacementNamed(context, '/home');
    } else {
      Navigator.pushReplacementNamed(context, '/login');
    }
  }

  @override
  Widget build(BuildContext context) {
    // 这里可以换成你的启动页UI，比如logo+文字
    return const Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CircularProgressIndicator(),
            SizedBox(height: 20),
            Text('正在初始化...'),
          ],
        ),
      ),
    );
  }
}

// 下面是和方法一一样的LoginPage和HomePage，这里就不重复贴啦

几个关键注意点 #

• 异步校验必须处理加载状态：不管用哪种方法，都要给用户显示加载提示（比如圆形进度条），不然启动时会出现短暂的空白，体验很差。
• 登录状态持久化：实际项目里不要像示例那样硬编码返回值，建议用SharedPreferences、Hive或者SecureStorage来存储登录状态，登录成功后写入，退出时删除。
• 异常处理：如果是通过接口校验登录状态，一定要捕获网络异常，比如请求失败时默认跳转到登录页，或者给用户提示“网络异常，请稍后重试”。
• 路由跳转的坑：用pushReplacement或者pushReplacementNamed而不是普通的push，这样用户点击返回键不会回到启动页，符合正常的APP逻辑。

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