flutter-google-login-with-example
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 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