Flutter Google Login with Example

flutter-google-login-with-example

In this tutorial, we're going to learn how to implement google login with your flutter application. To do that, we need to use googlesignin 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 googlesignin 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 googlesignin 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 {
  
  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;
    });
  }

  
  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 googlesignin 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