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. Note that the Flutter SnackBar style is out of date with the current Material Design spec.

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 BottomAppBars or FloatingActionButtons. Scaffold controls the positioning of those widgets so it can make sure SnackBars don't interfere with them. The new _showSnackBar method will handle showing the SnackBar.

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.

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.

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

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 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

Code changes

Posts in this series

  • A month of Flutter
  • A month of Flutter: create the app
  • A month of Flutter: configuring continuous integration
  • A month of Flutter: continuous linting
  • A month of Flutter: upgrading to 1.0
  • A month of Flutter: initial theme
  • A month of Flutter: no content widget
  • A month of Flutter: a list of posts
  • A month of Flutter: extract post item widget
  • A month of Flutter: post model and mock data
  • A month of Flutter: rendering a ListView with StreamBuilder
  • A month of Flutter: Stream transforms and failing tests
  • A month of Flutter: real faker data
  • A month of Flutter: rendering network images
  • A month of Flutter: FABulous authentication
  • A month of Flutter: configure Firebase Auth for Sign in with Google on Android
  • A month of Flutter: configure Firebase Auth for Sign in with Google on iOS
  • A month of Flutter: Sign in with Google
  • A month of Flutter: mocking Firebase Auth in tests
  • A month of Flutter: delicious welcome snackbar
  • A month of Flutter: navigate to user registration
  • A month of Flutter: user registration form
  • A month of Flutter: testing forms
  • A month of Flutter: setting up Firebase Firestore
  • A month of Flutter: awesome adaptive icons
  • A month of Flutter: set up Firestore rules tests
  • A month of Flutter: Firestore create user rules and tests
  • A month of Flutter: WIP save users to Firestore
  • A month of Flutter: user registration refactor with reactive scoped model
  • A month of Flutter: the real hero animation
  • A month of Flutter: a look back