Proper way to have Login screen & Home screen ?

[dimzeta]

I am pretty new to Flutter, and I want to check if the user is logged in when it starts the app. If he does, he goes automatically to his Dashboard screen with the bottom bar, if not then he goes to Login screen, without bottom bar.

So this is what I did:

main.dart:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'My App',
        home: context.watch<AuthProvider>().isLoggued ? MainMenu() : LoginPage(),
    );
  }
}

main_menu.dart:

class MainMenu extends StatefulWidget {
  @override
  _MainMenuState createState() => _MainMenuState();
}

class _MainMenuState extends State<MainMenu> {
  PersistentTabController _controller = PersistentTabController(initialIndex: 0);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PersistentTabView(
        context,
        controller: _controller,
        screens: _buildScreens(),
        items: _navBarsItems(),
        ...
      ),
    );
  }

  List<Widget> _buildScreens() {
    return [
      DashboardPage(),
      MessagesPage(),
      ProfilePage(),
    ];
  }

  List<PersistentBottomNavBarItem> _navBarsItems() {
    return [
      PersistentBottomNavBarItem(
        icon: Icon(CupertinoIcons.home),
        activeColorPrimary: Theme.of(context).primaryColor,
        inactiveColorPrimary: CustomColors.backgroundPrimaryGray,
        routeAndNavigatorSettings: RouteAndNavigatorSettings(
          initialRoute: DashboardPage.routeName,
          routes: {
            LoginPage.routeName: (ctx) => LoginPage(),
            DashboardPage.routeName: (ctx) => DashboardPage(),
          },
        ),
      ),
      PersistentBottomNavBarItem(
        icon: Icon(CupertinoIcons.bubble_left),
        activeColorPrimary: Theme.of(context).primaryColor,
        inactiveColorPrimary: CustomColors.backgroundPrimaryGray,
      ),
      PersistentBottomNavBarItem(
        icon: Icon(CupertinoIcons.person),
        activeColorPrimary: Theme.of(context).primaryColor,
        inactiveColorPrimary: CustomColors.backgroundPrimaryGray,
      ),
    ];
  }
}

My first issue is that context.watch works only in one way (when I logout). If I log in, my screen is not refreshed, but it does when I log out. Secondly, when I log out and the login screen appears, I have no animation between the screens. I can use AnimatedSwitcher but I'm wondering if I do this stuff properly, especially the routing part. Maybe there is a better way to do that (switch between login screen and dashboard screen when the user is loggued in or not).

Any help is welcome. Thank you!

[Ashhas]

To fix your first issue, I would research how to make your widgets listen to state changes. I'm guessing you're using the provider package?

On the Flutter website they show a way how you could do it: https://flutter.dev/docs/development/data-and-backend/state-mgmt/simple

For the second issue, this package has a pushNewScreen() method to which you can pass an PageTransitionAnimation to have a pagetransition.

Hope it helps!

[Achudh]

Hey, When I try to logout the user and go back to login screen i am seeing bottom nav. I've tried pushNewScreen() method but I want to replace the screen instead of just pushing. @BilalShahid13 @BilalShahid96 you need to have a pushAndReplaceNewScreen() function. please implement it.

[Ashhas]

@Achudh Having such a method would be nice. But in the description of the package, you can see that for more complex navigation you should use the normal Navigator. methods. Even if you would want to "pop" the screen, you still need to use Navigator.pop to achieve that.

As for your problem. I'm not sure how you implemented your PersistentTabView, but to get the interaction that you want I would make sure that your Login UI isn't part of PersistentTabView. This way your don't have to control the visibility of the navbar when navigating between your Login UI and the other screens. And you can still use a combination of Navigator.pushReplacement() and pushNewScreen() if you would want to use them.

[Achudh]

@Ashhas I used hideNavBar property with provider it worked! thanks

[Shreyam-Saha]

@Achudh Hi , I am also facing the same issue with my Project. Can you share me a peice of code how you resolved the issue ? Thanks a bunch in advance