absensi_sas_flutter/lib/screen/login/login_screen.dart

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:google_sign_in/google_sign_in.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';

import '../../app/constant.dart';
import '../../provider/google_login_provider.dart';

class LoginScreen extends HookConsumerWidget {
  const LoginScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    
    // inisialisasi
    // ref.watch itu sama spt memantau state terus menerus
    // ref.read itu memantau namun hny 1x saja
    GoogleSignInAccount? currentUser = ref.watch(currentUserProvider);
    final googleSignIn = ref.watch(googleSignInProvider);

    useEffect(() {
      googleSignIn.onCurrentUserChanged.listen((account) {
        // untuk update value ke provider google_login_provider yaitu currentUserProvider
        ref.read(currentUserProvider.notifier).update((state) => account);
      });
      googleSignIn.signInSilently();
      return (){};
    }, const []);

    // fungsi untuk sync ke google mail
    Future<void> handleSignIn() async {
      try {
        await googleSignIn.signIn();
      } catch (error) {
        if (kDebugMode) {
          print(error);
        }
      }
    }

    return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          child: Column(
            children: [
              SizedBox(
                height: Constant.getActualYPhone(context: context, y: 100),
              ),
              (currentUser != null) 
                  ? Container(
                      child: ListTile(
                        leading: GoogleUserCircleAvatar(
                          identity: currentUser,
                        ),
                        title: Text(
                          currentUser.displayName ?? "",
                        ),
                        subtitle: Text(
                          currentUser.email,
                        ),
                        trailing: IconButton(
                          icon: Icon(Icons.logout_outlined),
                          onPressed: () async {
                            await googleSignIn.disconnect();
                          },
                        ),
                      ),
                    )
                  :
                  // Logo Landscape
                  Padding(
                      padding: EdgeInsets.only(
                        top: Constant.getActualYPhone(context: context, y: 120),
                        left: Constant.getActualXPhone(context: context, x: 91),
                        right:
                            Constant.getActualXPhone(context: context, x: 90),
                        // bottom: Constant.getActualYPhone(context: context, y: y)
                      ),
                      child: Container(
                        width:
                            Constant.getActualXPhone(context: context, x: 209),
                        height:
                            Constant.getActualYPhone(context: context, y: 70),
                        decoration: BoxDecoration(
                          // color: Colors.green,
                          image: DecorationImage(
                            // fit: BoxFit.contain,
                            image: AssetImage(
                                'images/logo_sismedika_landscape.png'),
                          ),
                        ),
                      ),
                    ),

              SizedBox(
                height: Constant.getActualYPhone(context: context, y: 100),
              ),

              // title
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    'Selamat Datang',
                    style: Constant.titleH1_700(context: context)
                        .copyWith(color: Constant.textBlack),
                  ),
                  Container(
                    width: Constant.getActualXPhone(context: context, x: 24),
                    height: Constant.getActualYPhone(context: context, y: 24),
                    // color: Colors.redAccent,
                    decoration: BoxDecoration(
                      // color: Colors.green,
                      image: DecorationImage(
                        // fit: BoxFit.contain,
                        image: AssetImage('images/emoji_handshake.png'),
                      ),
                    ),
                  ),
                ],
              ),

              SizedBox(
                height: Constant.getActualYPhone(context: context, y: 7),
              ),

              // title grey
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    'Silahkan masuk untuk mengakses akun Anda',
                    style: Constant.titleH2_600(context: context).copyWith(
                      color: Constant.textLightGrey,
                    ),
                  ),
                ],
              ),

              SizedBox(
                height: Constant.getActualYPhone(context: context, y: 64),
              ),

              // button login
              Padding(
                padding: EdgeInsets.only(
                  left: Constant.getActualXPhone(context: context, x: 23),
                  right: Constant.getActualXPhone(context: context, x: 23),
                ),
                child: SizedBox(
                  width: Constant.getActualXPhone(context: context, x: 344),
                  height: Constant.getActualYPhone(context: context, y: 48),
                  child: ElevatedButton(
                    onPressed: () async {
                      await handleSignIn();
                    },
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Container(
                          width:
                              Constant.getActualXPhone(context: context, x: 24),
                          height:
                              Constant.getActualYPhone(context: context, y: 24),
                          decoration: BoxDecoration(
                            // color: Colors.green,
                            image: DecorationImage(
                              // fit: BoxFit.contain,
                              image: AssetImage('images/icon_google.png'),
                            ),
                          ),
                        ),
                        SizedBox(
                          width:
                              Constant.getActualXPhone(context: context, x: 2),
                        ),
                        Text(
                          'Continue with Google',
                          style: Constant.logintitle_700(context: context)
                              .copyWith(
                            color: Constant.textBlack,
                          ),
                        ),
                      ],
                    ),
                    style: ButtonStyle(
                      backgroundColor: MaterialStateColor.resolveWith(
                        (st) => Colors.white,
                      ),
                      shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                        RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(24),
                          side: BorderSide(
                            color: Color.fromRGBO(145, 158, 171, 0.32),
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}