Flutter user roles that lead to different screens (firebase)

Question

I am new to developing in flutter, and I am trying to make an app that will redirect the user to a different screen depending on what role they are as a user. I technically need to implement this in two places, in my the build of my main, and when the log in button is pressed.

What I have been trying to do right now is in the main, check if the user is logged in, then get his user uid, then use that uid to query the database for his role. It seems like a very crude solution as the application feels very choppy + its crashing and it takes it a while at boot to redirect to the right page and I'm unsure if I should be using real time database instead of the normal one for this. Any pointers on how to optimize this would be greatly appreciated.

class MyApp extends StatelessWidget {

  late String userRole;
  late String path;
  @override
  Widget build(BuildContext context) {

    String userUid = FirebaseAuth.instance.currentUser!.uid;

    userRole = "uprav";
    path = "";
    if(FirebaseAuth.instance.currentUser!.uid.isNotEmpty)
      {
        Database.setUserUid(userUid);
        Database.getRole().then((value) {
          userRole = value;
        });

          switch(userRole) {
            case "uprav":
              path = "/repair-flow";
              break;

            case "majs":
              path = "/majstor-flow";
              break;

            case "pred":
              path = "/repair-flow";
              break;
          }


      }

    print(userRole + " this is .then");




    return ScreenUtilInit(
      designSize: Size(375, 812),
      builder: () => MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Majstor',
        theme: ThemeData(
          primaryColor: Constants.primaryColor,
          scaffoldBackgroundColor: Color.fromRGBO(255, 255, 255, 1),
          visualDensity: VisualDensity.adaptivePlatformDensity,
          textTheme: GoogleFonts.openSansTextTheme(),
        ),
        initialRoute: FirebaseAuth.instance.currentUser == null ? "/" : path,
        onGenerateRoute: _onGenerateRoute,
      ),
    );
  }
}

Route<dynamic> _onGenerateRoute(RouteSettings settings) {
  switch (settings.name) {
    case "/":
      return MaterialPageRoute(builder: (BuildContext context) {

        return Home();
      });
    case "/repair-flow":
      return MaterialPageRoute(builder: (BuildContext context) {
        return RequestServiceFlow();
      });
    case "/majstor-flow":
        return MaterialPageRoute(builder: (BuildContext context){
          return MajstorServiceFlow();
        });
    default:
      return MaterialPageRoute(builder: (BuildContext context) {
        return Home();
      });
  }
}

Solution

In flutter, we use need to manage the states of screens. In your case,

State 1: Loading data - Show loading widget
State 2: Loaded data, you need to update layout - Show the screen based on the role.

There are many ways to do so:

• Future builder (https://api.flutter.dev/flutter/widgets/FutureBuilder-class.html)
  
• BLOC(this is a bit hard for beginner but worth in the future development).

Comments

[Admin]

I feel like I should be using await or something to make sure the data is first pulled before doing anything else; unsure how to go about this.

[Kin Cheng]

Yes, you are right!