Lección 41: Implementación de la Pantalla Registro
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
- Password
- Celular
- Dirección
DISEÑO
Veamos algunos aspecto
- Debe instanciarse minimamente 05 widgets TextField
- Un botón para lanzar el evento click
DINÁMICA
- El usuario llega del login si no tiene una cuenta
- Ingresa sus datos en los campos de texto correspondientes y presiona en el botón de registro
- Este botón levante el evento click y envia la data al servidor mediante el Servicio API,
- 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.
- 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>();
TextEditingController _nombre = TextEditingController();
TextEditingController _direccion = TextEditingController();
TextEditingController _celular = TextEditingController();
TextEditingController _email = TextEditingController();
TextEditingController _password = TextEditingController();
@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,),
TextField(
controller: _password,
style: TextStyle( color: Colors.black),
decoration: InputDecoration(
prefixIcon: Icon(Icons.vpn_key, color: Colors.white,),
hintText: "PASSWORD",
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){
_globalKey.currentState.showSnackBar( SnackBar(
content: Text("Por favor llene su nombre"), duration: Duration(seconds: 3)
),);
}else if(_direccion.text.isEmpty){
_globalKey.currentState.showSnackBar( SnackBar(
content: Text("Por favor llene su dirección"), duration: Duration(seconds: 3)
),);
}else if(_celular.text.isEmpty){
_globalKey.currentState.showSnackBar( SnackBar(
content: Text("Por favor llene su celular"), duration: Duration(seconds: 3)
),);
}else 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 ={
"name":_nombre.text,
"direccion":_direccion.text,
"celular":_celular.text,
"email":_email.text,
"password":_password.text
};
var respuesta = await ServicioApi().postData(data, "register");
var body = json.decode(respuesta.body);
if(body['success']){
SharedPreferences registro = await SharedPreferences.getInstance();
registro.setString("token", body['token']);
registro.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)
),);
}
}
}
}
2164 visitas