Flutter - 根据登录状态使用不同的路由启动应用程序 [英] Flutter - Start app with different routes depending on login state

问题描述

我正在寻找一种在应用启动时根据登录状态显示不同屏幕的方法.例如，我定义了以下路线:

I'm searching for a way to show a different screens on app startup depending on login state. For example, I have the following routes defined:

• /家
• /登录
• /设置

当然，我会检查用户是否已经在 main() 方法中登录，然后将 MaterialApp 的 initialRoute 设置为/login 或/home.成功登录后，我可以调用 Navigator.pushReplacement 导航到/home 并从堆栈中删除登录屏幕.不幸的是，我总是必须为 / 定义路由或设置 MaterialApp 的 home 属性.因此，如果我将 / 设置为空白 Container()，则此 Container 将位于导航堆栈上，用户可以返回此空白屏幕.

Naturally, I would check if the user has already logged in within the main() method and then set the initialRoute of my MaterialApp to either /login or /home. After successful login, I can call Navigator.pushReplacement to navigate to /home and the login screen is removed from the stack. Unfortunately, I always have to either define a route for / or set the home property of MaterialApp. So if I set / to a blank Container(), this Container will be on the navigation stack and the user can go back to this blank screen.

我想出了两个选择:

• 将 MaterialApp 的 home 属性设置为 HomeScreen 或 LoginScreen
• 如果用户尚未登录，则在 HomeScreen 的 build() 方法中返回一个 LoginScreen

• Setting the home property of MaterialApp to either HomeScreen or LoginScreen
• Return a LoginScreen within HomeScreen's build() method, if the user has not logged in yet

这两个选项都是可行的，但是我必须想出一些重新加载逻辑并重新设置状态才能更新 home 属性或 HomeScreen.

Both options are feasible, but then I have to come up with some reload logic and re-set the state in order to update the home property or HomeScreen.

任何想法在 Flutter 中处理此类情况的正确方法是什么?

Any ideas what is the proper way in Flutter to deal with such cases?

推荐答案

也许，你可以这样做.想象一下，你有一个带有异步方法 isLogged 的类 Auth.

Maybe, you could do this. Imagine you have a class Auth with an async method isLogged.

class Auth {
  final FirebaseAuth _firebaseAuth = FirebaseAuth.instance;

  Future<bool> isLogged() async {
    try {
      final FirebaseUser user = await _firebaseAuth.currentUser();
      return user != null;
    } catch (e) {
      return false;
    }
  }
}

您可以使用 myApp 构造函数来传递 initialRoute，并根据登录状态决定初始路由.然后，您可以将 myApp 的实例传递给 runApp:

You could use the myApp constructor to pass the initialRoute, and decide the initial route depending on the login state. Then, you can pass the instance of myApp to runApp:

警告:如果出现错误，请在 void main() async { 之前添加 WidgetsFlutterBinding.ensureInitialized();.检查这个问题 #40253.

Warning: In case of error, add WidgetsFlutterBinding.ensureInitialized(); just before void main() async {. Check this issue #40253.

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final Auth _auth = Auth();
  final bool isLogged = await _auth.isLogged();
  final MyApp myApp = MyApp(
    initialRoute: isLogged ? '/home' : '/',
  );
  runApp(myApp);
}

之后，你必须修改 myApp 类以在构造函数中传递初始路由:

After that, you have to modify the myApp class to pass the initial route in the constructor:

class MyApp extends StatelessWidget {
  final String initialRoute;

  MyApp({this.initialRoute});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Dynamic Route Demo',
      initialRoute: initialRoute,
      routes: {
        '/': (context) => LoginPage(),
        '/home': (context) => HomePage(),
        '/settings': (context) => SettingsPage(),
      },
    );
  }
}

希望这会有所帮助.

这篇关于Flutter - 根据登录状态使用不同的路由启动应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！