A month of Flutter: navigate to user registration
Tags: flutter, tutorial, routing
Published: 2018-12-22 01:38:15

_Originally published on [bendyworks.com](https://bendyworks.com/blog/a-month-of-flutter-navigate-to-user-registration)._

With users now being able to [sign in with Google](https://bendyworks.com/blog/a-month-of-flutter-sign-in-with-google), I want to have them confirm their name and agree to a terms of service. To lay the groundwork I'm going to add a placeholder `RegisterPage` and [navigation to it](https://flutter.io/docs/cookbook/navigation/navigation-basics).

This will be my second page, of what I expect to be many, so I went ahead and created a `pages` directory. The existing `MyHomePage` class was renamed to `HomePage` and relocated to the `pages` directory. That's a refactor and ideally should be in its own pull request, but it's of minimal impact so I'm lumping in with today's other changes.

The new `RegisterPage` is simple and currently just displays some text. On the first implementation I did find that the `AppBar` title was no not centered.

![register page with off center title](https://thepracticaldev.s3.amazonaws.com/i/chyvtkhpgmx9jpwlcmfn.png)

This is because I was placing the text in a [`Center` widget](https://docs.flutter.io/flutter/widgets/Center-class.html). `Center` was centering the text in the space available to it but the back navigation icon was not being accounted for.

~~~dart
AppBar(
  title: Center(
    child: Text('Register'),
  ),
  elevation: 0.0,
)
~~~

A quick switch to using `centerTitle` fixes it.

~~~dart
AppBar(
  title: Text('Register'),
  centerTitle: true,
  elevation: 0.0,
)
~~~

![register page](https://thepracticaldev.s3.amazonaws.com/i/r4onnhww25a0xgi1ussl.png)

But how do users get to this new registration page? It has to happen after a user is authenticated (how else will I know if they are registered?) but before they perform any other authenticated actions. That only leaves `_handleSignIn` in `SignInFab`.

~~~dart
void _handleSignIn(BuildContext context) {
  auth.signInWithGoogle().then((FirebaseUser user) {
    if (_existingUser()) {
      _showSnackBar(context, 'Welcome ${user.displayName}');
    } else {
      _navigateToRegistration(context);
    }
  });
}
~~~

For now I've set `_existingUser` to return a hardcoded boolean. If they are an existing user they should just see the `SnackBar`, otherwise send them to the `RegisterPage`.

~~~dart
void _navigateToRegistration(BuildContext context) {
  Navigator.pushNamed(context, RegisterPage.routeName);
}
~~~

`_navigateToRegistration` uses the [`Navigator` widget](https://docs.flutter.io/flutter/widgets/Navigator-class.html) to push a new route onto the stack by name. In this case I'm defining the `routeName` in `RegisterPage` itself so if I want to change it later, I only have to change it in one place.

In `MyApp` I will now register the route with `MaterialApp`, also using the `routeName` from `RegisterPage`.

~~~dart
MaterialApp(
  home: const HomePage(title: 'Birb'),
  routes: <String, WidgetBuilder>{
    RegisterPage.routeName: (BuildContext context) => const RegisterPage(),
  },
);
~~~

## Code changes

- [#53 Add RegisterPage and route](https://github.com/abraham/birb/pull/53)