Curso Flutter y Laravel Tienda Delivery

Implementación de la Pantalla Login

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

Lección 40 del Curso Flutter y Laravel Tienda Delivery

Implementación de la Pantalla Login

POR LA COMPRA DEL CURSO COMPLETO

  • MIRA TODOS LOS VIDEOS SIN RESTRICCIÓN
  • TEN ACCESO AL CURSO DE POR VIDA
  • DESCARGA TODO CÓDIGO FUENTE DEL PROYECTO
  • ACCESO A CURSOS Y RECURSOS GRATIS

Flutter y Laravel Tienda Delivery

¿Cómo programar un login en Flutter usando Web Services y Tokens

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

    }
  }
}

1096 visitas

Lecciones del curso

2. Planteamiento
4. Base de datos
6. Módulo Usuarios
7. Módulo Categorías
8. Módulo Subcategorías
9. Módulo Productos
10. Módulo Pedidos
11. Módulo Detalle
12. Carrucel de imágenes
13. Blog para SEO
14. Roles de usuario
16. Menú de navegación dinámico
17. Carrusel de imágenes dinámico
18. Productos en la Portada
19. Arquitectura de urls en Laravel
20. Mostrar categorías y subcategorías
21. Mostrar Producto
22. Blog en Laravel
24. Procesar el Pedido
25. Historial del Pedido
26. Integrar Json Web Tokens
27. Autenticación con JWT
28. Enviar Productos en JSON
29. Recibir pedidos en Laravel
31. Creación del Proyecto Flutter
32. Estructura de Archivos
33. Implementación del Servicio Web (API)
34. Modelos Categoria, Subcategoria y Producto
35. Creación de la Base de Datos Sqflite
36. Métodos para gestionar la DB DbHelper
37. Modelo Carrito
38. Métodos para la gestión del Carrito
39. Implementación de la Pantalla Inicio
40. Implementación de la Pantalla Login
41. Implementación de la Pantalla Registro
42. Uso de la API para sincronizar la BD
43. Implementación Pantalla Categoria con Sqflite
44. Implementación de la pantalla Productos
45. Implementación Pantalla Producto
46. Logout de la App Delivery
47. Integrar ChangeNotifierProvider
48. Integrar Notificaciones en la AppBar
49. Botón Agregar al Carrito
50. Resumen Carrito de Compra
51. Envío del Pedido Delivery
52. Confirmación del Pedido Delivery
53. SEO Onpage en Laravel
54. Maquetación FrontEnd
55. Diseño en Flutter
VER MÁS CURSOS
Logo Codea App

Codea App FullStack

Perú, México, Colombia, España, Venezuela, Argentina, Bolivia

You Fb Tik Pin

© Todos los derechos reservados Codea App FullStack | Cursos de programación avanzados | 2020 - 2021