Flutter — Firebase Google Sign In

Hi Flutter Lovers 🥳

In this article, I will show how to implement Google sign-in using Firebase authentication for Flutter.

Let’s start 🥳

1 — Setup Firebase Project

From the video you can see how the Firebase project is created.

2 — Let’s review the library

firebase_core | Flutter Package

firebase_auth | Flutter Package

google_sign_in | Flutter Package

3 — add a line like this to your package’s pubspec.yaml

firebase_core: ^2.4.0
firebase_auth: ^4.2.1
google_sign_in: ^5.4.2

4— and run an flutter pub get

Open the Android Studio Terminal and run flutter pub get

5 — We will use Figma for Application UI

We will use the design that I prepared for free in Figma. You can customize it according to your own design.

Figma

We create folder: assets/icons. We put our Google icon and application logo.

We make the necessary configurations in the pubspec.yaml file. And then we run flutter pub get

assets:
 - assets/
 - assets/icons/

6 — We create lib/utilities folder and constant.dart file.

7 — We create authentication.dart file inside utilities folder. We define the signInWithGoogle and signOut methods in here.

8- We create lib/screens folder and login_screen.dart file. Here we will code the design of the login page. We will login using the signInWithGoogle method in authentication.

9 — We create profile_screen.dart file. We will show the profile photo, name and e-mail information of the logged in user on the profile page.

Our awesome application is ready. 🤓🤠

You can access the project from my Github Account. 👩🏽‍💻