Cover image for A month of Flutter: FABulous authentication

A month of Flutter: FABulous authentication

abraham profile image Abraham Williams Originally published at bendyworks.com ・2 min read

Originally published on bendyworks.com.

Wouldn't it be FABulous if users could sign in to the app? I agree. I'm planning on using Firebase Authentication via the firebase_auth package but today is all about that FAB.

This implementation is pretty simple. I'm going to create a new StatelessWidget that uses an extended FAB with a G logo and text. onPressed will kick off the authentication flow in the future, but for now it just prints that the FAB was tapped.

class SignInFab extends StatelessWidget {
  const SignInFab();
  Widget build(BuildContext context) {
    return FloatingActionButton.extended(
      onPressed: () => print('Tapped on sign in'),
      icon: Image.asset('assets/google_g_logo.png', height: 24.0),
      label: const Text('Sign in with Google'),
Enter fullscreen mode Exit fullscreen mode

The tests for SignInFab simply check that the expected elements are still there.

In addition to adding floatingActionButton to the Scaffold in _MyHomePageState, I'm also adding accentColor to the theme. The accentColor is usually complementary to the primaryColor but I want them both to be white for now. accentColor will be used as the default background of FABs.

  brightness: Brightness.light,
  primaryColor: Colors.white,
  accentColor: Colors.white,
Enter fullscreen mode Exit fullscreen mode

And there it is, a nice Sign in with Google extended FAB.

Screenshot of page with sign in with Google button

Code changes


Editor guide