A month of Flutter: FABulous authentication

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.

Screenshot of page with sign in with Google button

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

  • Category: Development