Implementación de la Pantalla Login | 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.

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/PantallaCategoria.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>();
  TextEditingController _email = TextEditingController();
  TextEditingController _password = TextEditingController();

  @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,
              style: TextStyle( color: Colors.black),
              decoration: InputDecoration(
                prefixIcon: Icon(Icons.email, color: Colors.white,),
                hintText: "Email",
                hintStyle: TextStyle(
                  color: Colors.grey
                )
              ),

            ),
            SizedBox( height: 25,),
            TextField(
              controller: _password,
              style: TextStyle( color: Colors.black),
              decoration: InputDecoration(
                  prefixIcon: Icon(Icons.vpn_key, color: Colors.white,),
                  hintText: "Password",
                  hintStyle: TextStyle(
                      color: Colors.grey
                  )
              ),
            ),
            SizedBox( height: 50,),
            FlatButton(
              color: Colors.red,
              shape: new RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20.0)
              ),
              child: Padding(
                padding: EdgeInsets.only(top: 8,bottom: 8,left: 10,right: 10),

                child: Text("LOGIN", style: TextStyle(color: Colors.white),),

              ),
              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(
        content: Text("Por favor llene su email"),  duration: Duration(seconds: 3)
      ),);
    }else if(_password.text.isEmpty){
      _globalKey.currentState.showSnackBar( SnackBar(
          content: Text("Por favor llene su paswword"),  duration: Duration(seconds: 3)
      ),);
    }else{
      var data ={"email":_email.text, "password":_password.text};

      var respuesta = await ServicioApi().postData(data, "login");
      var body = json.decode(respuesta.body);
      if(body['success']){
        SharedPreferences login = await SharedPreferences.getInstance();
        login.setString("token", body['token']);
        login.setString("user", json.encode(body['user']));

        Navigator.of(context).pushAndRemoveUntil(
          MaterialPageRoute(
            builder: (context) =>PantallaCategoria()
          ),(Route<dynamic> route) =>false);

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

    }
  }
}