Learn App Making
with Ionic, Cordova & Flutter.

Start Here Buy Themes

Flutter Google Authentication Tutorial

In this tutorial, we’re going to learn how to implement google login with your flutter application. To do that, we need to use google_sign_in package. If you’re new to flutter, please visit flutter tutorial

Flutter Google Login Steps

  • Create a Firebase App
  • Configuring Android App Credentials
  • Enable Google SignIn on Firebase
  • Integrate google_sign_in packages with our app
  • Implementing login & logout functionalities
  • Retrieve user’s profile information such as name, email, and profile picture.

Working with Firebase side

  • Log in to your firebase (https://console.firebase.google.com) account & create a new project or choose an existing project
  • Navigate to Authentication -> Sign In Method -> Enable Google Authentication
  • Navigate to Project Settings -> Add Android App
  • Fill your App name, package ID, SHA-1 Key & click Add App (Please Refer video)
  • Download google-services.json file
  • Choose Your Support Email Address

Working with Flutter Google Login

  • Open your pubspec.yaml file & add google_sign_in package & execute flutter pub get
  • Import required package on your main.dart
  • Add Proper code

main.dart looks like this (Explanation mentioned below the code)

import 'package:flutter/material.dart';
import 'package:google_sign_in/google_sign_in.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _MyAppState();
  }
}

class _MyAppState extends State<MyApp> {
  bool _isLoggedIn = false;

  GoogleSignIn _googleSignIn = GoogleSignIn(scopes: ['email']);

  _login() async{
    try{
      await _googleSignIn.signIn();
      setState(() {
        _isLoggedIn = true;
      });
    } catch (err){
      print(err);
    }
  }

  _logout(){
    _googleSignIn.signOut();
    setState(() {
      _isLoggedIn = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        body: Center(
            child: _isLoggedIn
                ? Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Image.network(_googleSignIn.currentUser.photoUrl, height: 50.0, width: 50.0,),
                      Text(_googleSignIn.currentUser.displayName),
                      OutlineButton( child: Text("Logout"), onPressed: (){
                        _logout();
                      },)
                    ],
                  )
                : Center(
                    child: OutlineButton(
                      child: Text("Login with Google"),
                      onPressed: () {
                        _login();
                      },
                    ),
                  )),
      ),
    );
  }
}

Code Explanation:

  1. We have imported google_sign_in package in order to implement google authentication with your flutter app
  2. We have created _googleSignIn variable based on GoogleSignIn Instance
  3. We’re getting the scope of email, but you can get any scope
  4. (Optional) Please refer: https://developers.google.com/identity/protocols/googlescopes for additional scopes. If you’re adding any additional scopes apart from email, make sure you’ve to enable required google API
  5. Then we created login & logout functionalities using _googleSignIn.signIn() & _googleSignIn.signOut()
  6. If the user is loggedin we’re fetching profile picture & display name using _googleSignIn.currentUser