A month of Flutter: FABulous authentication

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();
   @override
  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'),
    );
  }
}

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.

ThemeData(
  brightness: Brightness.light,
  primaryColor: Colors.white,
  accentColor: Colors.white,
)

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

Code changes

• #40 Add Sign in with Google FAB