Conditionally loading Flutter App's first screen with AutoRoute and Navigator 2.0
Tags: flutter, dart, firstpost
Published: 2021-06-15 21:08:12

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](https://pub.dev/packages/auto_route).

#### Introduction
I'm assuming you already have auto router setup. If not, check [this link](https://pub.dev/packages/auto_route#installation) 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:

```dart
 @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:
```dart
final _appRouter = AppRouter();
```
* I also have some booleans being fetched from hive at run-time, in the `initState` method:
```dart
late bool isSignedIn, isVerified, isTnCAccepted;
```

The code-snippet of importance is this:
```dart
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`
```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`
```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.