Conditionally loading Flutter App's first screen with AutoRoute and Navigator 2.0

This is just a small blog (or bloglet, if that's a word), to help you understand how easy it is to navigate to a different page on app launch with auto-route.

Introduction

I'm assuming you already have auto router setup. If not, check this link to see how to set it up with navigator 2.0 in Flutter.

If you have setup everything, your root widget's build method would look something like this:

 @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
        title: 'App Bane',
        theme: lightThemeData,
        routerDelegate: _appRouter.delegate(
          initialRoutes: [
            if (!isSignedIn) LandingScreen(),
            if (isSignedIn && !isTnCAccepted) PledgeScreen(),
            if (isSignedIn && isTnCAccepted) DashboardScreen(),
          ],
        ),
        routeInformationParser:
            _appRouter.defaultRouteParser(includePrefixMatches: true),
    );
  }

For context:

• Here _appRouter is initialised before the initState function:

final _appRouter = AppRouter();

• I also have some booleans being fetched from hive at run-time, in the initState method:

late bool isSignedIn, isVerified, isTnCAccepted;

The code-snippet of importance is this:

routerDelegate: _appRouter.delegate(
     initialRoutes: [
          if (!isSignedIn) LandingScreen(),
          if (isSignedIn && !isTnCAccepted) PledgeScreen(),
          if (isSignedIn && isTnCAccepted) DashboardScreen(),
     ],
),

So, basically we can provide any screens/routes conditionally to the initialRoutes prop in _appRouter.delegate, which is used to setup the routerDelegate for our MaterialApp.

Explanation

In my case, if the user is not signed in, it returns LandingScreen. If the user is signed in and has not accepted the terms, it takes them to the PledgeScreen, else, it takes them to the DashboardScreen.

Full Code example

main.dart

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends AppState<MyApp> {
  final _appRouter = AppRouter();

  late bool isSignedIn, isVerified, isTnCAccepted;

  @override
  void initState() {
    super.initState();
    //initialise bools
    isSignedIn = false;
    isVerified = true;
    isTnCAccepted = false;
  }


  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
        title: 'My App',
        theme: lightThemeData,
        routerDelegate: _appRouter.delegate(
          initialRoutes: [
            if (!isSignedIn) LandingScreen(),
            if (isSignedIn && !isTnCAccepted) PledgeScreen(),
            if (isSignedIn && isTnCAccepted) DashboardScreen(),
          ],
        ),
        routeInformationParser:
            _appRouter.defaultRouteParser(includePrefixMatches: true),
    );
  }
}

Here PledgeScreen and LandingScreen come from the file of routes generated by auto_router (router.gr.dart, check auto_router documentation for reference) .

router.dart

@MaterialAutoRouter(
  replaceInRouteName: 'Page,Route',
  routes: <AutoRoute>[
    AutoRoute(page: LandingScreen),
    AutoRoute(page: PledgeScreen, path: "/signup/complete"),
    AutoRoute(page: DashboardScreen, path: "/dashboard"),
  ],
)
class $AppRouter {}

Conclusion

This is how easy it was to use AutoRouter with Navigator2.0 where you have to conditionally open a page in the app. In addition to this, AutoRouter also simplifies deeplinks etc, opening the correct page on launch with dynamic links. Will be covering that soon! Hope you liked my first blog here :). Would love to hear suggestions to improve.