Flutter로 Google Login 구현해보기(개발 테스트편) part2_with GetX.

https://jaemoi8.tistory.com/3

 

지난 시간 flutter로 구글 로그인 구현을 위한 셋팅을 마쳤다면 이번 편에서는 flutter에서 로그인을 구현하는 코드를 공유하겠습니다. 

 

https://pub.dev/packages/google_sign_in

google_sign_in | Flutter package

 

플러그인을 설치해주시면 됩니다.

 

pubspec.yaml 파일에 이렇게 등록해주시고 pub get.

dependencies:
  google_sign_in:

 

바인딩

part of google;

class GoogleLoginBinding extends Bindings {
  @override
  void dependencies() {
    Get.lazyPut(() => GoogleLoginController());
  }
}

 

컨트롤러

 

part of google;


class GoogleLoginController extends GetxController{
  final GoogleSignIn _googleSignIn = GoogleSignIn(); // GoogleSignIn 인스턴스 생성

  // 상태 관리 변수
  var isLoggedIn = false.obs; // 로그인 상태
  var userName = ''.obs; // 사용자 이름
  var userEmail = ''.obs; // 사용자 이메일
  var userPhoto = ''.obs; // 사용자 프로필 사진

  // Google 로그인
  Future<void> signInWithGoogle() async {
    try {
      final GoogleSignInAccount? account = await _googleSignIn.signIn();

      if (account != null) {
        // 사용자 정보 업데이트
        userName.value = account.displayName ?? 'No Name';
        userEmail.value = account.email;
        userPhoto.value = account.photoUrl ?? '';
        isLoggedIn.value = true;

        Get.snackbar('Success', 'Logged in as ${account.displayName}');
      } else {
        Get.snackbar('Cancelled', 'Google sign-in was cancelled');
      }
    } catch (e) {
      Get.snackbar('Error', 'Failed to log in with Google: $e');
    }
  }

  // Google 로그아웃
  Future<void> signOutFromGoogle() async {
    await _googleSignIn.signOut();
    isLoggedIn.value = false;
    userName.value = '';
    userEmail.value = '';
    userPhoto.value = '';

    Get.snackbar('Success', 'Logged out from Google');
  }
}

 

스크린

 

library google;

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

part '../controller/google_login_binding.dart';
part '../controller/google_login_controller.dart';

class GoogleLoginScreen extends GetView<GoogleLoginController> {
  const GoogleLoginScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Google Login')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Obx(() {
              if (controller.isLoggedIn.value) {
                // 로그인 상태일 때
                return Column(
                  children: [
                    CircleAvatar(
                      backgroundImage: NetworkImage(controller.userPhoto.value),
                      radius: 40,
                    ),
                    SizedBox(height: 10),
                    Text(
                      'Welcome, ${controller.userName.value}',
                      style: TextStyle(fontSize: 18),
                    ),
                    Text(
                      'Email: ${controller.userEmail.value}',
                      style: TextStyle(fontSize: 16),
                    ),
                    SizedBox(height: 20),
                    ElevatedButton(
                      onPressed: controller.signOutFromGoogle,
                      child: Text('Sign out'),
                    ),
                  ],
                );
              } else {
                // 로그아웃 상태일 때
                return ElevatedButton(
                  onPressed: controller.signInWithGoogle,
                  child: Text('Sign in with Google'),
                );
              }
            }),
          ],
        ),
      ),
    );
  }
}

 

샘플 테스트 코드입니다.

 

 

이렇게 간단하게 구현해보았습니다. 감사합니다.