In this tutorial, we’re going to learn how to implement google login with your flutter application. To do that, we need to use the google_sign_in package. If you’re new to flutter, please visit the 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 (http://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 in 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
Add package in pubspec.yaml
dependencies:
flutter:
sdk: flutter
google_sign_in: ^5.0.1
home.dart
looks like this (Explanation mentioned below the code)
import 'package:flutter/material.dart';
import 'package:google_sign_in/google_sign_in.dart';
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
bool _isLoggedIn = false;
GoogleSignInAccount _userObj;
GoogleSignIn _googleSignIn = GoogleSignIn();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Codesundar")),
body: Container(
child: _isLoggedIn
? Column(
children: [
Image.network(_userObj.photoUrl),
Text(_userObj.displayName),
Text(_userObj.email),
TextButton(
onPressed: () {
_googleSignIn.signOut().then((value) {
setState(() {
_isLoggedIn = false;
});
}).catchError((e) {});
},
child: Text("Logout"))
],
)
: Center(
child: ElevatedButton(
child: Text("Login with Google"),
onPressed: () {
_googleSignIn.signIn().then((userData) {
setState(() {
_isLoggedIn = true;
_userObj = userData;
});
}).catchError((e) {
print(e);
});
},
),
),
),
);
}
}
Code Explanation:
- We have imported google_sign_in package in order to implement google authentication with your flutter app
- We have created _googleSignIn variable based on GoogleSignIn Instance
- We’re getting the scope of email, but you can get any scope
- (Optional) Please refer: http://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
- Then we created login & logout functionalities using _googleSignIn.signIn() & _googleSignIn.signOut()
- If the user is loggedin we’re fetching profile picture & display name using _googleSignIn.currentUser