Flutter: interfaz de usuario de inicio de sesión de Google y autenticación

 En este artículo, veremos cómo hacer una hermosa pantalla de inicio de sesión de Google y autenticar la misma con Google. 

Para hacerlo, siga los siguientes pasos:

Paso 1: Primero crea el proyecto flutter en tu IDE.

Paso 2 : después de eso, simplemente elimine el código predeterminado y comience desde cero.

Paso 3: ahora solo importa la biblioteca de materiales y llama a la función runApp( ) en el nombre de la función principal como GoogleSignIn. 

 Paso 4: Ahora cree un widget con estado con el nombre ‘ GoogleSignIn ‘.

// main.dart file
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:GoogleSignIn/SignInScreen.dart';
 
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
   
  // initializing the firebase app
  await Firebase.initializeApp(); 
   
  // calling of runApp
  runApp(GoogleSignIn());  
}
 
class GoogleSignIn extends StatefulWidget {
  GoogleSignIn({Key key}) : super(key: key);
   @override
  _GoogleSignInState createState() => _GoogleSignInState();
}
 
class _GoogleSignInState extends State<GoogleSignIn> {
  @override
  Widget build(BuildContext context) {
     
    // we return the MaterialApp here ,
    // MaterialApp contain some basic ui for android ,
    return MaterialApp(   
       
      //materialApp title
      title: 'GEEKS FOR GEEKS', 
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
       
      // home property contain SignInScreen widget
      home: SignInScreen(),  
    );
  }
}

Aquí devolvemos MaterialApp() donde la propiedad del título es ‘GEEKS FOR GEEKS’, la propiedad principal es SignInScreen.

Ahora vamos a crear el widget SignInScreen() que le hemos dado a la propiedad de inicio. Ahora, antes de crear SignInScreen(), debemos crear un proyecto en firebase .

Paso 5: Ahora simplemente devuelva el andamio. En el cuerpo del andamio, tenemos un contenedor para las decoraciones de degradado como se muestra a continuación:

Paso 6: ahora hay una propiedad secundaria de tarjeta que contiene un widget de columna. En el widget de columna, tenemos un primer texto de widget que contiene ‘Geeks para Geeks’:

Paso 7: el segundo widget es un botón de material que contiene una propiedad secundaria en la que hay una Fila, la Fila tiene niños, primero hay un logotipo de Google y segundo es un texto ‘Google iniciar sesión’, al presionar llamamos a la función iniciar sesión. Vamos a crearlo.

Nuestra pantalla contiene en el centro «inicio de sesión de Google » y debajo de esto hay un botón de registro mediante el cual tenemos un registro exitoso y pasamos a la pantalla de inicio.

//SignInScreen
 
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:google_sign_in/google_sign_in.dart';
import 'package:GoogleSignIn/homepage.dart';
 
 
class SignInScreen extends StatefulWidget {
  SignInScreen({Key key}) : super(key: key);
 
  @override
  _SignInScreenState createState() => _SignInScreenState();
}
 
class _SignInScreenState extends State<SignInScreen> {
  
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: double.infinity,
        height: double.infinity,
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [
              Colors.blue,
              Colors.red,
            ],
          ),
        ),
        child: Card(
          margin: EdgeInsets.only(top: 200, bottom: 200, left: 30, right: 30),
          elevation: 20,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Text(
                "GEEKS FOR GEEKS",
                style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
              ),
              Padding(
                padding: const EdgeInsets.only(left: 20, right: 20),
                child: MaterialButton(
                  color: Colors.teal[100],
                  elevation: 10,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      Container(
                        height: 30.0,
                        width: 30.0,
                        decoration: BoxDecoration(
                          image: DecorationImage(
                              image:
                                  AssetImage('assets/images/googleimage.png'),
                              fit: BoxFit.cover),
                          shape: BoxShape.circle,
                        ),
                      ),
                      SizedBox(
                        width: 20,
                      ),
                      Text("Sign In with Google")
                    ],
                  ),
                   
                  // by onpressed we call the function signup function
                  onPressed: ()
                    signup(context); 
                  },
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

Nuestra pantalla de registro se ve bonita,

Ahora cree una función llamada registro.

Paso 8: ahora solo importe la autenticación y google_regístrese desde la biblioteca.

Paso 9: Ahora hemos creado una instancia de autenticación de tipo FirebaseAuth . Hemos realizado una solicitud de GoogleSignIn, se registra por las credenciales de usuario. Si el resultado no es Nulo, simplemente llamamos a la función pushReplacement para navegar a la pantalla de inicio.

Vea el código a continuación:

// function to implement the google signin
 
// creating firebase instance
final FirebaseAuth auth = FirebaseAuth.instance; 
 
  Future<void> signup(BuildContext context) async {
    final GoogleSignIn googleSignIn = GoogleSignIn();
    final GoogleSignInAccount googleSignInAccount = await googleSignIn.signIn();
    if (googleSignInAccount != null) {
      final GoogleSignInAuthentication googleSignInAuthentication =
          await googleSignInAccount.authentication;
      final AuthCredential authCredential = GoogleAuthProvider.credential(
          idToken: googleSignInAuthentication.idToken,
          accessToken: googleSignInAuthentication.accessToken);
       
      // Getting users credential
      UserCredential result = await auth.signInWithCredential(authCredential); 
      User user = result.user;
      
      if (result != null) {
        Navigator.pushReplacement(
            context, MaterialPageRoute(builder: (context) => HomePage()));
      }  // if result not null we simply call the MaterialpageRoute,
        // for go to the HomePage screen
    }
  }

No olvide agregar dependencias en el archivo pubspec yaml.

• base_fuego_auth: ^1.0.3
• google_sign_in: ^5.0.1

Nota: Utilice la última versión disponible del paquete.

Ahora vamos a crear la pantalla de inicio.

Paso 10: Nuestra pantalla de inicio contiene solo un texto simple «pantalla de inicio» con una barra de aplicaciones titulada ‘GEEKS FOR GEEKS’ en color verde.

// Home page screen
 
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
  HomePage({Key? key}) : super(key: key);
 
  @override
  _HomePageState createState() => _HomePageState();
}
 
class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.green,
        centerTitle: true,
         
        // on appbar text containing 'GEEKS FOR GEEKS'
        title: Text("GEEKS FOR GEEKS"), 
         
        // In body text containing 'Home page ' in center
        body: Center(child:Text('Home page'),
    );
  }
}

Así es como se verá la pantalla de inicio:

Producción :