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

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

Discussion

pic
Editor guide