Implementación de la Pantalla Login

Lección 40 del Curso Flutter y Laravel Tienda Delivery

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

Implementación de la Pantalla Login

COMPRA ESTE CURSO

Y accede a todos los recursos y videos, explicación, scripts y descarga del código fuente disponible con la compra del curso

COMPRAR

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)
        ),);
      }

    }
  }
}

COMPRA ESTE CURSO

Y accede a todos los recursos y videos, explicación, scripts y descarga del código fuente disponible con la compra del curso

COMPRAR

17 visitas

Lecciones del curso

27. Autenticación con JWT
28. Enviar Productos en JSON
29. Recibir pedidos en Laravel
VER MÁS CURSOS
Logo Codea App

© Todos los derechos reservados CODEA APP | Cursos de programación avanzados con proyectos reales | 2020