Implementación de la Pantalla Registro

Lección 41 del Curso Flutter y Laravel Tienda Delivery

Para programar una Pantalla Registro debemos agregar dos widgets tipo Textfield más un Button, la función es enviar datos por la API y devolver data.

Implementación de la Pantalla Registro

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

La pantalla de registro es muy similar a la de el Login con una ligera modificación en el diseño y la dinámica. Donde enviamos una lista de datos en formato JSON:

  • Nombre
  • Email
  • Password
  • Celular
  • Dirección

DISEÑO

Veamos algunos aspecto

  1. Debe instanciarse  minimamente 05 widgets TextField
  2. Un botón para lanzar el evento click 

DINÁMICA

  1. El usuario llega del login si no tiene una cuenta
  2. Ingresa sus datos en los campos de texto correspondientes y presiona en el botón de registro
  3. Este botón levante el evento click y envia la data al servidor mediante el Servicio API, 
  4. Laravel la recibe y procesa la información; si todo esta correcto crea un nuevo usuario y resuelve en true, token y la data del usuario; caso contrario resuelve en false.
  5. Flutter recibe la data, dependiente de la evaluación si es true redirige el flujo al la pantalla Categoría caso contrario si es false muestra un mensaje que no se pudo procesar el registro.

CÓDIGO DART

import 'dart:convert';

import 'package:arequipalocal/api/Api.dart';
import 'package:arequipalocal/pantalla/PantallaCategoria.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

import 'package:shared_preferences/shared_preferences.dart';

class PantallaRegistro extends StatefulWidget {
  @override
  _PantallaRegistroState createState() => _PantallaRegistroState();
}

class _PantallaRegistroState extends State<PantallaRegistro> {
  final GlobalKey<ScaffoldState> _globalKey = new GlobalKey<ScaffoldState>();




  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _globalKey,
      appBar: AppBar(title:Text("REGISTRO")),
      backgroundColor: Colors.orangeAccent,
      body: Container(
        padding: EdgeInsets.all(20),
        child: Column(
          children: <Widget>[
            TextField(
              controller: _nombre,
              style: TextStyle( color: Colors.black),
              decoration: InputDecoration(
                  prefixIcon: Icon(Icons.people, color: Colors.white,),
                  hintText: "NOMBRE",
                  hintStyle: TextStyle(
                      color: Colors.white54
                  )
              ),

            ),
            SizedBox( height: 25,),
            TextField(
              controller: _direccion,
              style: TextStyle( color: Colors.black),
              decoration: InputDecoration(
                  prefixIcon: Icon(Icons.map, color: Colors.white,),
                  hintText: "DIRECCIÓN",
                  hintStyle: TextStyle(
                      color: Colors.white54
                  )
              ),

            ),
            SizedBox( height: 25,),
            TextField(
              controller: _celular,
              style: TextStyle( color: Colors.black),
              decoration: InputDecoration(
                  prefixIcon: Icon(Icons.phone, color: Colors.white,),
                  hintText: "CELULAR",
                  hintStyle: TextStyle(
                      color: Colors.white54
                  )
              ),

            ),
            SizedBox( height: 25,),
            TextField(
              controller: _email,
              style: TextStyle( color: Colors.black),
              decoration: InputDecoration(
                  prefixIcon: Icon(Icons.email, color: Colors.white,),
                  hintText: "EMAIL",
                  hintStyle: TextStyle(
                      color: Colors.white54
                  )
              ),

            ),
            ....
            SizedBox( height: 25,),
            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: (){
                _procesoRegistro();
              },
            ),
          ],
        ),
      ),
    );

  }

  void _procesoRegistro() async{
    if(_nombre.text.isEmpty){
     ....
    }else{
      var data ={
        "name":_nombre.text,
        "direccion":_direccion.text,
        "celular":_celular.text,
        "email":_email.text,
        .....
      };

      ....
      if(body['success']){
       ...
      }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

14 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