Creating Google Login in Flutter with Firebase

Hello everyone, welcome back at porkaone. On this occasion we will learn how to create a Google login in Flutter. How do you do it? Let's follow the discussion below.

Creating a Login Feature with Google Login in Flutter

1. Create a new flutter project. Use flutter version 3 or newer version of flutter.

2. Connect the firebase project with your flutter project. You can follow the tutorial at the following link. https://www.porkaone.com/2023/12/tutorial-on-how-to-set-up-firebase-and.html. You must follow this link so that the data can be saved to Firebase.

3. Open cmd or terminal then go to the android folder and type .\gradlew SigInReport then the SHA-1 key will appear as below. Copy and save the code.

SHA-1 Key

4. Next we will add the SHA-1 key. Go back to the Firebase project, then click the gear icon, then select project settings

SHA-1 Key

5. Scroll to the bottom of the page then click the add fingerprint button to add the SHA-1 key. Copy the SHA-1 key that was obtained previously and click save to save.

SHA-1 Key

6. Click the build menu --> Authentication --> then select the sign-in method tab --> then under additional providers select Google

Add Google Providers

7. Click or switch enable then scroll down and click save --> then click done. At this point, all matters with Google Firebase are complete. Next, we start coding!

8. Go back to the flutter project. Open the pubspec.yaml file then add the firebase_core: ^2.19.0 package and google_sign_in: as shown below. Then save the file to download the package

9. Open the main.dart file then add the script below.

// ignore_for_file: prefer_const_constructors, avoid_print, unused_local_variable, prefer_const_literals_to_create_immutables, sized_box_for_whitespace, unused_field, invalid_return_type_for_catch_error

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';
import 'home.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Google Login',
      home: Scaffold(
        appBar: AppBar(
          title: Center(
            child: Text('Google Login in Flutter'),
          ),
        ),
        body: Container(
          alignment: Alignment.center,
          child: Home(),
        ),
      ),
    );
  }
}

10. Create a new file with the name home.dart in the lib folder. Then replace the script below

// Import library untuk menggunakan Flutter dan Google Sign-In
import 'package:flutter/material.dart';
import 'package:google_sign_in/google_sign_in.dart';

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  final GoogleSignIn _googleSignIn = GoogleSignIn();
  GoogleSignInAccount? _currentUser;

  Future<void> signIn() async {
    try {
      final auth = await _googleSignIn.signIn();
      if (auth == null) {
        SnackBar(content: Text('User Tidak Memilih Akun. Klik tombol login '));
      } else {
        setState(() {
          _currentUser = auth;
        });
      }
    } catch (e) {
      print('Error signing in: $e');
    }
  }

  void signOut() async {
    final auth = await _googleSignIn.disconnect();

    setState(() {
      _currentUser = auth;
    });
  }

  @override
  Widget build(BuildContext context) {
    return _buildWidget();
  }

  Widget _buildWidget() {
    GoogleSignInAccount? user = _currentUser;
    
    if (user != null) {
      return Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            'Signed in successfully',
            style: TextStyle(fontSize: 20),
          ),
          SizedBox(
            height: 10,
          ),
          Container(
            width: 175,
            height: 175,
            child: ClipRRect(
              borderRadius: BorderRadius.circular(200),
              child: Image.network(
                user.photoUrl ??
                    'https://cdn.pixabay.com/photo/2016/04/24/20/52/laundry-1350593_1280.jpg',
                fit: BoxFit.cover,
              ),
            ),
          ),
          SizedBox(
            height: 10,
          ),
          Text(
            user.displayName!,
            style: TextStyle(fontSize: 20),
          ),
          SizedBox(
            height: 5,
          ),
          Text(
            user.email,
            style: TextStyle(fontSize: 20),
          ),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 40, vertical: 10),
            child: ElevatedButton(
                onPressed: signOut,
                child: Padding(
                  padding: const EdgeInsets.symmetric(vertical: 10),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Icon(
                        Icons.lock,
                        size: 30,
                      ),
                      SizedBox(
                        width: 5,
                      ),
                      Text('Keluar', style: TextStyle(fontSize: 30))
                    ],
                  ),
                )),
          ),
        ],
      );
    } else {
      return Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          FlutterLogo(
            size: 250,
          ),
          SizedBox(
            height: 20,
          ),
          Text(
            'Anda belum masuk',
            style: TextStyle(fontSize: 20),
          ),
          SizedBox(
            height: 10,
          ),
          Padding(
            padding: EdgeInsets.symmetric(horizontal: 40, vertical: 10),
            child: ElevatedButton(
              onPressed: signIn,
              child: Padding(
                padding: EdgeInsets.symmetric(vertical: 10),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Icon(
                      Icons.lock,
                      size: 30,
                    ),
                    SizedBox(
                      width: 5,
                    ),
                    Text('Masuk dengan Google', style: TextStyle(fontSize: 20))
                  ],
                ),
              ),
            ),
          ),
        ],
      );
    }
  }
}

11. All stages have been completed, now we can carry out trials. If the results are like the image below, it means you have succeeded

That's the tutorial on creating a Google login in Flutter. I hope it's useful. If you have any questions, please ask directly in the comments column below. That is all and thank you.