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

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

    }
  }
}

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

117 visitas

Lecciones del curso

VER MÁS CURSOS
Logo Codea App

Develop your code

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

You Fb Tik Pin

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