Implementación de la Pantalla Login

Lección 40 del Curso Flutter y Laravel Tienda Delivery

DESCRIPCIÓN DE LA LECCIÓN

Vamos a diseñar y programar la pantalla de login es de decir el acceso para los usuarios de la aplicación en Flutter.

DISEÑO

Básicamente disponemos Tres widgets: dos TextField y un Botón

1. TextField para introducir el correo electrónico
2. TextFiel para el password
3. FlatButton
4. Además agregamos un text para enlazar a la pantalla de registro y el usuario aún no tiene una cuenta.

INTERACTIVIDAD

• La dinámica es que el usuario llene los campos presione en el botón 
• La información es enviada mediante el Servicio Web API al servidor 
• La Api Rest entrega la data al servidor este la evalua y retorna un valor verdadero si lo hizo ok más el token y la data del usuario, caso contrario false si fallola autenticación. 
• Una vez recepcionada la data en Flutter este crea variables almacenando el token y los datos del usuario, para luego redirigir a la pantalla Categoria. Caso contrario muestra un mensaje que la autenticación falló.

import 'dart:convert';

import 'package:arequipalocal/api/Api.dart';
import 'package:arequipalocal/pantalla/PantallaRegistro.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
class PantallaLogin extends StatefulWidget {
  @override
  _PantallaLoginState createState() => _PantallaLoginState();
}

class _PantallaLoginState extends State<PantallaLogin> {
  final GlobalKey<ScaffoldState> _globalKey = new GlobalKey<ScaffoldState>();
  ...

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _globalKey,
      appBar: AppBar(
        title: Text("LOGIN"),
      ),
      backgroundColor: Colors.orangeAccent,
      body: Container(
        padding: EdgeInsets.all(20),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextField(
              controller: _email,
              ...

            ),
            SizedBox( height: 25,),
            TextField(
              controller: _password,
              ...
            ),
            SizedBox( height: 50,),
            FlatButton(
              ....
              onPressed: (){
                _procesoLogin();
              },
            ),

            SizedBox( height: 50,),
            InkWell(
              child: Text("¿Primera vez?, CREA UNA CUENTA", textAlign: TextAlign.center,),
              onTap: (){
                Navigator.of(context).push(MaterialPageRoute(
                    builder: (BuildContext) =>PantallaRegistro()
                ));
              },
            )


          ],
        ),
      ),
    );
  }

  void _procesoLogin() async{
    if(_email.text.isEmpty){
      _globalKey.currentState.showSnackBar( SnackBar(
      ....
      ),);
    }else if(_password.text.isEmpty){
      _globalKey.currentState.showSnackBar( SnackBar(
      ...
      ),);
    }else{
     ....
      if(body['success']){
        ....
        login.setString("token", body['token']);
        login.setString("user", json.encode(body['user']));

        ...
      }else{
        _globalKey.currentState.showSnackBar( SnackBar(
            content: Text(body['message']),  duration: Duration(seconds: 3)
        ),);
      }

    }
  }
}

Otros cursos que pueden interesarte

Curso Android PHP MYSQL Lector QR

Curso Flutter App Restaurant con Carrito

Curso Laravel 8 Página Web 100% Administrable

Curso Diseño Web con Bootstrap 4.5

117 visitas