From 5853df637a9f1c44a7845a39b00fe91e70dda60c Mon Sep 17 00:00:00 2001 From: Juan Felipe Duarte <70235683+DuarteJFelipe@users.noreply.github.com> Date: Tue, 28 Mar 2023 11:42:48 -0500 Subject: [PATCH] Screens actualizadas --- lib/main.dart | 4 +- lib/src/screens/code_validation.dart | 161 +++++++++++++++ lib/src/screens/login.dart | 52 ++++- lib/src/screens/login_email.dart | 69 ++++--- lib/src/screens/register.dart | 288 +++++++++++++++++++++++++++ 5 files changed, 533 insertions(+), 41 deletions(-) create mode 100644 lib/src/screens/code_validation.dart create mode 100644 lib/src/screens/register.dart diff --git a/lib/main.dart b/lib/main.dart index 719efe7..675e337 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -2,7 +2,6 @@ import 'package:flutter/material.dart'; import 'package:prosappco/src/provider/google_sign.dart'; import 'package:prosappco/src/screens/login.dart'; import 'package:firebase_core/firebase_core.dart'; -import 'package:prosappco/src/screens/login_email.dart'; import 'package:provider/provider.dart'; void main() async { @@ -20,7 +19,6 @@ class MyApp extends StatelessWidget { theme: ThemeData(fontFamily: 'Poppins'), debugShowCheckedModeBanner: false, title: 'ProsApp', - // home: LoginScreen(), - home: LoginEmailScreen(), + home: LoginScreen(), )); } diff --git a/lib/src/screens/code_validation.dart b/lib/src/screens/code_validation.dart new file mode 100644 index 0000000..9ad294f --- /dev/null +++ b/lib/src/screens/code_validation.dart @@ -0,0 +1,161 @@ +import 'package:flutter/material.dart'; + +class CodeValidationScreen extends StatefulWidget { + const CodeValidationScreen({super.key}); + + @override + State createState() => _CodeValidationScreenState(); +} + +class _CodeValidationScreenState extends State { + @override + Widget build(BuildContext context) { + return SafeArea( + child: Scaffold( + resizeToAvoidBottomInset: false, + backgroundColor: Color(0xFFD6F4FF), + body: Stack( + children: [ + Container( + margin: const EdgeInsets.only(top: 280), + width: double.infinity, + height: 600, + decoration: const BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.only( + topRight: Radius.circular(50), + topLeft: Radius.circular(50))), + ), + Container( + margin: const EdgeInsets.only(top: 120, left: 70, right: 70), + child: const Image(image: AssetImage('images/logo_prosapp.png')), + ), + Container( + padding: const EdgeInsets.symmetric(horizontal: 0, vertical: 20), + margin: const EdgeInsets.only(top: 280, left: 25), + child: Row( + children: [ + IconButton( + icon: Icon( + Icons.arrow_back, + size: 30, + ), + onPressed: () { + Navigator.pop(context); + }, + ), + Text( + 'Validar código', + style: TextStyle( + color: Color(0xFF262626), + fontSize: 38.0, + fontWeight: FontWeight.bold, + ), + textAlign: TextAlign.right, + ), + ], + ), + ), + Container( + padding: const EdgeInsets.symmetric(horizontal: 0, vertical: 20), + margin: const EdgeInsets.only(top: 350, left: 50, right: 50), + child: Column(children: [ + const Padding( + padding: EdgeInsets.only(bottom: 5), + child: Align( + alignment: Alignment.topLeft, + child: Text('Numero de celular', + style: TextStyle( + fontSize: 18.0, color: Color(0xFF65676B))), + )), + Padding( + padding: EdgeInsets.only(bottom: 20), + child: Row( + children: [ + Expanded( + child: TextField( + decoration: InputDecoration( + border: InputBorder.none, + hintText: '3102589636', + suffixIcon: Icon(Icons.edit), + ), + ), + ), + TextButton( + onPressed: () { + // Acción a realizar cuando se hace clic en el texto + }, + child: Text('Reenviar código'), + ), + ], + ), + ), + Align( + alignment: Alignment.topLeft, + child: Padding( + padding: const EdgeInsets.only(bottom: 5), + child: Text('Codigo', + textAlign: TextAlign.left, + style: + TextStyle(fontSize: 18.0, color: Color(0xFF65676B))), + ), + ), + Padding( + padding: EdgeInsets.only(bottom: 20), + child: TextField( + maxLength: 4, + keyboardType: TextInputType.number, + decoration: InputDecoration( + enabledBorder: OutlineInputBorder( + borderSide: BorderSide(color: Color(0xFFECECEC)), + borderRadius: BorderRadius.all( + Radius.circular(50), + ), + ), + focusedBorder: OutlineInputBorder( + borderSide: BorderSide(color: Color(0xFFECECEC)), + borderRadius: BorderRadius.all( + Radius.circular(50), + ), + ), + hintText: '_ _ _ _', + fillColor: Color.fromARGB(255, 239, 239, 239), + filled: true, + ), + textAlign: TextAlign.center, + style: TextStyle( + letterSpacing: 12.0, + ), + ), + ), + Padding( + padding: EdgeInsets.only(bottom: 40), + child: Center( + child: ElevatedButton( + onPressed: () {}, + child: Text( + 'Validar código', + style: TextStyle( + color: Colors.white, + fontWeight: FontWeight.bold, + fontSize: 18, + ), + ), + style: ElevatedButton.styleFrom( + primary: Color(0xFF2BA4EC), // Color del botón + shape: RoundedRectangleBorder( + borderRadius: + BorderRadius.circular(50), // Bordes redondeados + ), + elevation: 0, + minimumSize: Size(230, 60), // Tamaño mínimo del botón + ), + )), + ), + ]), + ), + ], + ), + )); + } +} diff --git a/lib/src/screens/login.dart b/lib/src/screens/login.dart index 14b57ee..fba6ffe 100644 --- a/lib/src/screens/login.dart +++ b/lib/src/screens/login.dart @@ -1,7 +1,12 @@ +import 'package:flutter/gestures.dart'; import 'package:flutter/material.dart'; import 'package:font_awesome_flutter/font_awesome_flutter.dart'; import 'package:prosappco/src/provider/google_sign.dart'; +import 'package:prosappco/src/screens/code_validation.dart'; +import 'package:prosappco/src/screens/login_email.dart'; +import 'package:prosappco/src/screens/register.dart'; import 'package:provider/provider.dart'; +import 'package:flutter/gestures.dart'; class LoginScreen extends StatefulWidget { const LoginScreen({super.key}); @@ -92,7 +97,13 @@ class _LoginScreenState extends State { padding: EdgeInsets.only(bottom: 40), child: Center( child: ElevatedButton( - onPressed: () {}, + onPressed: () { + Navigator.push( + context, + MaterialPageRoute( + builder: (context) => CodeValidationScreen()), + ); + }, child: Text( 'Enviar código', style: TextStyle( @@ -115,7 +126,13 @@ class _LoginScreenState extends State { Padding( padding: EdgeInsets.only(bottom: 27), child: GestureDetector( - onTap: () {}, + onTap: () { + Navigator.push( + context, + MaterialPageRoute( + builder: (context) => LoginEmailScreen()), + ); + }, child: Text( 'Entrar con correo electronico', style: TextStyle( @@ -126,18 +143,33 @@ class _LoginScreenState extends State { ), ), RichText( - text: const TextSpan( + text: TextSpan( style: TextStyle( - fontSize: 16.0, - color: Color(0xFF65676B), - fontFamily: 'Poppins'), + fontSize: 16.0, + color: Color(0xFF65676B), + fontFamily: 'Poppins', + ), children: [ TextSpan(text: 'No estas registrado? '), - TextSpan( - text: 'Registrarse', - style: TextStyle( + WidgetSpan( + child: GestureDetector( + onTap: () { + Navigator.push( + context, + MaterialPageRoute( + builder: (context) => RegisterScreen()), + ); + }, + child: Text( + 'Registrarse', + style: TextStyle( + fontSize: 16.0, color: Color(0xFF2BA4EC), - fontWeight: FontWeight.w600)), + fontWeight: FontWeight.w600, + ), + ), + ), + ), ], ), ) diff --git a/lib/src/screens/login_email.dart b/lib/src/screens/login_email.dart index cbd632d..5af65f1 100644 --- a/lib/src/screens/login_email.dart +++ b/lib/src/screens/login_email.dart @@ -1,10 +1,9 @@ import 'package:flutter/material.dart'; import 'package:font_awesome_flutter/font_awesome_flutter.dart'; import 'package:prosappco/src/provider/google_sign.dart'; +import 'package:prosappco/src/screens/login.dart'; import 'package:provider/provider.dart'; -// import 'package:font_awesome_flutter/font_awesome_flutter.dart'; -// import 'package:prosappco/src/provider/google_sign.dart'; -// import 'package:provider/provider.dart'; +import 'package:prosappco/src/screens/register.dart'; class LoginEmailScreen extends StatefulWidget { const LoginEmailScreen({super.key}); @@ -25,7 +24,7 @@ class _LoginEmailScreenState extends State { body: Stack( children: [ Container( - margin: const EdgeInsets.only(top: 170), + margin: const EdgeInsets.only(top: 130), width: double.infinity, height: 800, decoration: const BoxDecoration( @@ -35,18 +34,17 @@ class _LoginEmailScreenState extends State { topLeft: Radius.circular(50))), ), Container( - margin: const EdgeInsets.only(top: 40, left: 30), + margin: const EdgeInsets.only(top: 20, left: 30), child: const Image( image: AssetImage('images/logo_prosapp.png'), width: 180, height: 100, - // width: MediaQuery.of(context).size.width / 2, ), ), Container( padding: const EdgeInsets.symmetric(horizontal: 0, vertical: 20), margin: const EdgeInsets.only( - top: 180, + top: 125, left: 25, ), child: Row( @@ -56,7 +54,9 @@ class _LoginEmailScreenState extends State { Icons.arrow_back, size: 30, ), - onPressed: () {}, + onPressed: () { + Navigator.pop(context); + }, ), Text( 'Iniciar sesión', @@ -72,7 +72,7 @@ class _LoginEmailScreenState extends State { ), Container( padding: const EdgeInsets.symmetric(horizontal: 0, vertical: 20), - margin: const EdgeInsets.only(top: 270, left: 50, right: 50), + margin: const EdgeInsets.only(top: 210, left: 50, right: 50), child: Column(children: [ Padding( padding: EdgeInsets.only(bottom: 20), @@ -83,18 +83,17 @@ class _LoginEmailScreenState extends State { provider.googleLogin(); }, style: ElevatedButton.styleFrom( - primary: Color(0xFF2BA4EC), // Color del botón + primary: Color(0xFF2BA4EC), shape: RoundedRectangleBorder( - borderRadius: - BorderRadius.circular(50), // Bordes redondeados + borderRadius: BorderRadius.circular(50), ), elevation: 0, - minimumSize: Size(230, 60), // Tamaño mínimo del botón + minimumSize: Size(230, 60), ), child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ - SizedBox(width: 5), // Espacio entre el icono y el texto + SizedBox(width: 5), Text( 'Entrar con Google ', style: TextStyle( @@ -102,8 +101,8 @@ class _LoginEmailScreenState extends State { fontWeight: FontWeight.bold, fontSize: 18, ), - ), // Texto del botón - FaIcon(FontAwesomeIcons.google), // Icono del botón + ), + FaIcon(FontAwesomeIcons.google), ], )), ), @@ -213,29 +212,43 @@ class _LoginEmailScreenState extends State { ), ), style: ElevatedButton.styleFrom( - primary: Color(0xFF2BA4EC), // Color del botón + primary: Color(0xFF2BA4EC), shape: RoundedRectangleBorder( - borderRadius: - BorderRadius.circular(50), // Bordes redondeados + borderRadius: BorderRadius.circular(50), ), elevation: 0, - minimumSize: Size(230, 60), // Tamaño mínimo del botón + minimumSize: Size(230, 60), ), )), ), RichText( - text: const TextSpan( + text: TextSpan( style: TextStyle( - fontSize: 16.0, - color: Color(0xFF65676B), - fontFamily: 'Poppins'), + fontSize: 16.0, + color: Color(0xFF65676B), + fontFamily: 'Poppins', + ), children: [ TextSpan(text: 'No estas registrado? '), - TextSpan( - text: 'Registrarse', - style: TextStyle( + WidgetSpan( + child: GestureDetector( + onTap: () { + Navigator.push( + context, + MaterialPageRoute( + builder: (context) => RegisterScreen()), + ); + }, + child: Text( + 'Registrarse', + style: TextStyle( + fontSize: 16.0, color: Color(0xFF2BA4EC), - fontWeight: FontWeight.w600)), + fontWeight: FontWeight.w600, + ), + ), + ), + ), ], ), ) diff --git a/lib/src/screens/register.dart b/lib/src/screens/register.dart new file mode 100644 index 0000000..2255065 --- /dev/null +++ b/lib/src/screens/register.dart @@ -0,0 +1,288 @@ +import 'package:flutter/material.dart'; +import 'package:font_awesome_flutter/font_awesome_flutter.dart'; +import 'package:prosappco/src/provider/google_sign.dart'; +import 'package:prosappco/src/screens/login.dart'; +import 'package:provider/provider.dart'; + +class RegisterScreen extends StatefulWidget { + const RegisterScreen({super.key}); + + @override + State createState() => _RegisterScreenState(); +} + +class _RegisterScreenState extends State { + bool _obscureText = true; + + @override + Widget build(BuildContext context) { + return SafeArea( + child: Scaffold( + resizeToAvoidBottomInset: false, + backgroundColor: Color(0xFFD6F4FF), + body: Stack( + children: [ + Container( + margin: const EdgeInsets.only(top: 130), + width: double.infinity, + height: 800, + decoration: const BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.only( + topRight: Radius.circular(50), + topLeft: Radius.circular(50))), + ), + Container( + margin: const EdgeInsets.only(top: 20, left: 30), + child: const Image( + image: AssetImage('images/logo_prosapp.png'), + width: 180, + height: 100, + ), + ), + Container( + padding: const EdgeInsets.symmetric(horizontal: 0, vertical: 20), + margin: const EdgeInsets.only( + top: 125, + left: 25, + ), + child: Row( + children: [ + IconButton( + icon: Icon( + Icons.arrow_back, + size: 30, + ), + onPressed: () { + Navigator.pop(context); + }, + ), + Text( + 'Registro', + style: TextStyle( + color: Color(0xFF262626), + fontSize: 38.0, + fontWeight: FontWeight.bold, + ), + textAlign: TextAlign.right, + ), + ], + ), + ), + Container( + padding: const EdgeInsets.symmetric(horizontal: 0, vertical: 20), + margin: const EdgeInsets.only(top: 190, left: 50, right: 50), + child: Column(children: [ + Padding( + padding: EdgeInsets.only(bottom: 20), + child: ElevatedButton( + onPressed: () { + final provider = Provider.of(context, + listen: false); + provider.googleLogin(); + }, + style: ElevatedButton.styleFrom( + primary: Color(0xFF2BA4EC), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(50), + ), + elevation: 0, + minimumSize: Size(230, 60), + ), + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + SizedBox(width: 5), + Text( + 'Entrar con Google ', + style: TextStyle( + color: Colors.white, + fontWeight: FontWeight.bold, + fontSize: 18, + ), + ), + FaIcon(FontAwesomeIcons.google), + ], + )), + ), + Padding( + padding: EdgeInsets.symmetric(vertical: 0), + child: Row( + children: [ + Expanded( + child: Divider( + color: Colors.black38, + thickness: 1, + ), + ), + Padding( + padding: EdgeInsets.symmetric(horizontal: 10), + child: Text("ó"), + ), + Expanded( + child: Divider( + color: Colors.black38, + thickness: 1, + ), + ), + ], + ), + ), + const Padding( + padding: EdgeInsets.only(bottom: 5), + child: Align( + alignment: Alignment.topLeft, + child: Text('Nombre', + style: TextStyle( + fontSize: 18.0, color: Color(0xFF65676B))), + )), + const Padding( + padding: EdgeInsets.only(bottom: 18), + child: TextField( + decoration: InputDecoration( + enabledBorder: OutlineInputBorder( + borderSide: BorderSide(color: Color(0xFFECECEC)), + borderRadius: BorderRadius.all( + Radius.circular(50), + )), + focusedBorder: OutlineInputBorder( + borderSide: BorderSide(color: Color(0xFFECECEC)), + borderRadius: BorderRadius.all( + Radius.circular(50), + )), + hintText: 'Nombre Apellido', + fillColor: Color.fromARGB(255, 239, 239, 239), + filled: true, + prefixIcon: Icon(Icons.person_outline)), + ), + ), + const Padding( + padding: EdgeInsets.only(bottom: 5), + child: Align( + alignment: Alignment.topLeft, + child: Text('Email', + style: TextStyle( + fontSize: 18.0, color: Color(0xFF65676B))), + )), + const Padding( + padding: EdgeInsets.only(bottom: 18), + child: TextField( + decoration: InputDecoration( + enabledBorder: OutlineInputBorder( + borderSide: BorderSide(color: Color(0xFFECECEC)), + borderRadius: BorderRadius.all( + Radius.circular(50), + )), + focusedBorder: OutlineInputBorder( + borderSide: BorderSide(color: Color(0xFFECECEC)), + borderRadius: BorderRadius.all( + Radius.circular(50), + )), + hintText: 'Hello@gmail.com', + fillColor: Color.fromARGB(255, 239, 239, 239), + filled: true, + prefixIcon: Icon(Icons.email_outlined)), + ), + ), + const Padding( + padding: EdgeInsets.only(bottom: 5), + child: Align( + alignment: Alignment.topLeft, + child: Text('Password', + style: TextStyle( + fontSize: 18.0, color: Color(0xFF65676B))), + )), + Padding( + padding: EdgeInsets.only(bottom: 25), + child: TextField( + obscureText: _obscureText, + decoration: InputDecoration( + enabledBorder: OutlineInputBorder( + borderSide: BorderSide(color: Color(0xFFECECEC)), + borderRadius: BorderRadius.all( + Radius.circular(50), + )), + focusedBorder: OutlineInputBorder( + borderSide: BorderSide(color: Color(0xFFECECEC)), + borderRadius: BorderRadius.all( + Radius.circular(50), + )), + hintText: 'Contraseña', + fillColor: Color.fromARGB(255, 239, 239, 239), + filled: true, + prefixIcon: Icon(Icons.lock_outline), + suffixIcon: IconButton( + icon: Icon( + _obscureText ? Icons.visibility_off : Icons.visibility, + color: Colors.grey, + ), + onPressed: () { + setState(() { + _obscureText = !_obscureText; + }); + }, + ), + ), + ), + ), + Padding( + padding: const EdgeInsets.only(bottom: 25), + child: Center( + child: ElevatedButton( + onPressed: () {}, + child: Text( + 'Registrarme', + style: TextStyle( + color: Colors.white, + fontWeight: FontWeight.bold, + fontSize: 18, + ), + ), + style: ElevatedButton.styleFrom( + primary: Color(0xFF2BA4EC), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(50), + ), + elevation: 0, + minimumSize: Size(230, 60), + ), + )), + ), + RichText( + text: TextSpan( + style: TextStyle( + fontSize: 16.0, + color: Color(0xFF65676B), + fontFamily: 'Poppins', + ), + children: [ + TextSpan(text: 'Ya estas registrado? '), + WidgetSpan( + child: GestureDetector( + onTap: () { + Navigator.push( + context, + MaterialPageRoute( + builder: (context) => LoginScreen()), + ); + }, + child: Text( + 'Iniciar Sesión', + style: TextStyle( + fontSize: 16.0, + color: Color(0xFF2BA4EC), + fontWeight: FontWeight.w600, + ), + ), + ), + ), + ], + ), + ) + ]), + ), + ], + ), + )); + } +}