➜ Implementación de la Pantalla Login

¿Cómo programar un login en Flutter usando Web Services y Tokens | Vamos a diseñar y programar la pantalla de login es de decir el acceso para los usuarios de la aplicación en Flutter.

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

TextField para introducir el correo electrónico
TextFiel para el password
FlatButton
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)
        ),);
      }

    }
  }
}

5923 visitas

Capítulo 41 – Implementación de la Pantalla Registro »

{ Curso Flutter y Laravel Tienda Delivery }

Compartir link con tus amigos

Descarga el código del proyecto

Descarga el código fuente del proyecto adquiriendo el curso completo

Comprar

➜ Implementación de la Pantalla Login

DISEÑO

INTERACTIVIDAD

Descarga el código del proyecto

¡Qué aprenderás?