A month of Flutter: delicious welcome snackbar
Tags: flutter, materialdesign, tutorial
Published: 2018-12-21 04:24:08

_Originally published on [bendyworks.com](https://bendyworks.com/blog/a-month-of-flutter-delicious-welcome-snackbar)._

When a user goes to sign in, they should be told if it was successful. I'm going to do that with a [`SnackBar` widget](https://docs.flutter.io/flutter/material/SnackBar-class.html). Note that the Flutter `SnackBar` style is [out of date](https://github.com/flutter/flutter/issues/19841) with the current [Material Design spec](https://material.io/design/components/snackbars.html).

The code changes are not major but include a couple of interesting aspects. One is that the `SnackBar` API requires a reference to the parent `Scaffold` widget. This is because the positioning of a `SnackBar` is very specific. If you just display it without regard it'll overlay things like `BottomAppBar`s or `FloatingActionButton`s. `Scaffold` controls the positioning of those widgets so it can make sure `SnackBar`s don't interfere with them. The new `_showSnackBar` method will handle showing the `SnackBar`.

~~~dart
void _showSnackBar(BuildContext context, String msg) {
  final SnackBar snackBar = SnackBar(content: Text(msg));

  Scaffold.of(context).showSnackBar(snackBar);
}
~~~

`_handleSignIn` has been updated to trigger a `SnackBar` with a message and it will pass through the [current `BuildContext`](https://docs.flutter.io/flutter/widgets/BuildContext-class.html).

~~~dart
void _handleSignIn(BuildContext context) {
  auth.signInWithGoogle().then((FirebaseUser user) =>
      _showSnackBar(context, 'Welcome ${user.displayName}'));
}
~~~

The `SignInFab` tests will have to get wrapped in a `Scaffold` widget to render properly. I've also taken the time to split the existing test in two, one for the rendering of the FAB and one for triggering the sign in flow.

A new test will assert there is not already a `SnackBar`, trigger a tap on the FAB, pause to let the widgets render, and then make sure the `SnackBar` is rendered as expected.

~~~dart
testWidgets('Displays welcome SnackBar', (WidgetTester tester) async {
  // Build our app and trigger a frame.
  await tester.pumpWidget(app);

  expect(find.byType(SnackBar), findsNothing);

  await tester.tap(find.byType(FloatingActionButton));
  await tester.pump(Duration.zero);

  expect(find.byType(SnackBar), findsOneWidget);
  expect(find.text('Welcome ${userMock.displayName}'), findsOneWidget);
});
~~~

There is now a nice notification when a user finishes signing in.

![Welcome notification](https://thepracticaldev.s3.amazonaws.com/i/9ygi7olbv0j1rotk1tip.png)

While working on this I've noticed there is a bug in bottom navigation icon colors. They switch to white on black while the authentication flow is happening but then the icons never switch back to black. I've [filed a bug](https://github.com/abraham/birb/issues/51) to look into a fix.

I also experimented with a light theme `SnackBar` but it doesn't provide enough contrast for my taste.

![Experimental light themed welcome notification](https://thepracticaldev.s3.amazonaws.com/i/wrf2agnzgkgvir1ygo8u.png)

## Code changes

- [#50 Show welcome message](https://github.com/abraham/birb/pull/50)