diff --git a/lib/src/components/primary_btn.dart b/lib/src/components/primary_btn.dart index 6c4d890..7197924 100644 --- a/lib/src/components/primary_btn.dart +++ b/lib/src/components/primary_btn.dart @@ -3,26 +3,40 @@ import 'package:flutter/material.dart'; class PrimaryButtom extends StatelessWidget { final VoidCallback onPressed; final String label; + final bool + isEnabled; // Nuevo parámetro para indicar si el botón está habilitado - const PrimaryButtom( - {super.key, required this.onPressed, required this.label}); + const PrimaryButtom({ + Key? key, + required this.onPressed, + required this.label, + this.isEnabled = true, // Valor predeterminado: habilitado + }) : super(key: key); @override Widget build(BuildContext context) { return ElevatedButton( - onPressed: onPressed, + onPressed: isEnabled + ? onPressed + : null, // Habilita/deshabilita el botón según isEnabled style: ElevatedButton.styleFrom( - backgroundColor: const Color(0xFF2BA4EC), + backgroundColor: isEnabled + ? const Color(0xFF2BA4EC) + : Colors.grey, // Cambia el color de fondo shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(50), ), - elevation: 0, + elevation: isEnabled + ? 0 + : 0, // Cambia la elevación para dar una sensación de clickeabilidad minimumSize: const Size(230, 60), ), child: Text( label, - style: const TextStyle( - color: Colors.white, + style: TextStyle( + color: isEnabled + ? Colors.white + : Colors.black, // Cambia el color del texto fontWeight: FontWeight.bold, fontSize: 18, ), diff --git a/lib/src/screens/login.dart b/lib/src/screens/login.dart index 5266a71..802696f 100644 --- a/lib/src/screens/login.dart +++ b/lib/src/screens/login.dart @@ -19,6 +19,7 @@ class _LoginScreenState extends State { final controller = Get.put(PhoneAuthController()); final _formKey = GlobalKey(); String completePhoneNumber = ''; + bool _isChecked = false; @override Widget build(BuildContext context) { @@ -98,7 +99,30 @@ class _LoginScreenState extends State { color: Color(0xFF65676B), ), ), - const SizedBox(height: 20), + Padding( + padding: const EdgeInsets.symmetric(vertical: 20), + child: Row( + mainAxisAlignment: + MainAxisAlignment.center, // Centra horizontalmente + children: [ + Checkbox( + value: _isChecked, + onChanged: (value) { + setState(() { + _isChecked = value!; + }); + }, + ), + const Text( + 'Acepto los términos y condiciones.', + style: TextStyle( + fontSize: 13.0, + color: Color(0xFF65676B), + ), + ), + ], + ), + ), PrimaryButtom( onPressed: () { if (_formKey.currentState!.validate()) { @@ -112,6 +136,7 @@ class _LoginScreenState extends State { ); } }, + isEnabled: _isChecked, label: 'Enviar código', ), const SizedBox(height: 20), @@ -223,7 +248,30 @@ class _LoginScreenState extends State { color: Color(0xFF65676B), ), ), - const SizedBox(height: 20), + Padding( + padding: const EdgeInsets.symmetric(vertical: 20), + child: Row( + mainAxisAlignment: + MainAxisAlignment.center, // Centra horizontalmente + children: [ + Checkbox( + value: _isChecked, + onChanged: (value) { + setState(() { + _isChecked = value!; + }); + }, + ), + const Text( + 'Acepto los términos y condiciones.', + style: TextStyle( + fontSize: 13.0, + color: Color(0xFF65676B), + ), + ), + ], + ), + ), PrimaryButtom( onPressed: () { if (_formKey.currentState!.validate()) { @@ -237,6 +285,7 @@ class _LoginScreenState extends State { ); } }, + isEnabled: _isChecked, label: 'Enviar código', ), const SizedBox(height: 20), diff --git a/lib/src/screens/register.dart b/lib/src/screens/register.dart index deb2158..91d7e10 100644 --- a/lib/src/screens/register.dart +++ b/lib/src/screens/register.dart @@ -21,6 +21,7 @@ class _RegisterScreenState extends State { bool _obscureText = true; final controller = Get.put(RegisterController()); final _formKey = GlobalKey(); + bool _isChecked = false; @override Widget build(BuildContext context) { @@ -157,138 +158,162 @@ class _RegisterScreenState extends State { ) : const SizedBox(), Form( - key: _formKey, - child: Column( - children: [ - const Padding( - padding: EdgeInsets.only(bottom: 5), - child: Align( - alignment: Alignment.topLeft, - child: Text('Email', - style: TextStyle( - fontSize: 18.0, - color: Color(0xFF65676B))), - )), - Padding( - padding: const EdgeInsets.only(bottom: 18), - child: TextFormField( - controller: controller.email, - validator: (String? value) { - if (value == null || value.isEmpty) { - return 'Por favor ingrese un email'; - } - final RegExp emailRegExp = RegExp( - r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$'); - if (!emailRegExp.hasMatch(value)) { - return 'Por favor ingrese un email válido'; - } - return null; - }, - decoration: const InputDecoration( - border: OutlineInputBorder( - borderSide: BorderSide( - color: Color(0xFFECECEC)), - borderRadius: BorderRadius.all( - Radius.circular(50), - )), - 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), - )), - errorBorder: OutlineInputBorder( - borderSide: BorderSide( - color: Color.fromARGB( - 255, 184, 0, 0)), - 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: const EdgeInsets.only(bottom: 25), - child: TextFormField( - controller: controller.password, - obscureText: _obscureText, - validator: (value) { - if (value == null || value.isEmpty) { - return 'Por favor ingrese una contraseña'; - } - if (value.length <= 6) { - return 'Contraseña muy corta'; - } - return null; - }, - decoration: InputDecoration( - errorBorder: const OutlineInputBorder( + key: _formKey, + child: Column( + children: [ + const Padding( + padding: EdgeInsets.only(bottom: 5), + child: Align( + alignment: Alignment.topLeft, + child: Text('Email', + style: TextStyle( + fontSize: 18.0, + color: Color(0xFF65676B))), + )), + Padding( + padding: const EdgeInsets.only(bottom: 18), + child: TextFormField( + controller: controller.email, + validator: (String? value) { + if (value == null || value.isEmpty) { + return 'Por favor ingrese un email'; + } + final RegExp emailRegExp = RegExp( + r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$'); + if (!emailRegExp.hasMatch(value)) { + return 'Por favor ingrese un email válido'; + } + return null; + }, + decoration: const InputDecoration( + border: OutlineInputBorder( + borderSide: BorderSide( + color: Color(0xFFECECEC)), + borderRadius: BorderRadius.all( + Radius.circular(50), + )), + 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), + )), + errorBorder: OutlineInputBorder( borderSide: BorderSide( color: Color.fromARGB(255, 184, 0, 0)), borderRadius: BorderRadius.all( Radius.circular(50), )), - enabledBorder: const OutlineInputBorder( - borderSide: BorderSide( - color: Color(0xFFECECEC)), - borderRadius: BorderRadius.all( - Radius.circular(50), - )), - border: const OutlineInputBorder( - borderSide: BorderSide( - color: Color(0xFFECECEC)), - borderRadius: BorderRadius.all( - Radius.circular(50), - )), - focusedBorder: const OutlineInputBorder( - borderSide: BorderSide( - color: Color(0xFFECECEC)), - borderRadius: BorderRadius.all( - Radius.circular(50), - )), - hintText: 'Contraseña', - fillColor: const Color.fromARGB( - 255, 239, 239, 239), + hintText: 'Hello@gmail.com', + fillColor: + Color.fromARGB(255, 239, 239, 239), filled: true, - prefixIcon: const Icon(Icons.lock_outline), - suffixIcon: IconButton( - icon: Icon( - _obscureText - ? Icons.visibility - : Icons.visibility_off, - color: Colors.grey, - ), - onPressed: () { - setState(() { - _obscureText = !_obscureText; - }); - }, + 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: const EdgeInsets.only(bottom: 25), + child: TextFormField( + controller: controller.password, + obscureText: _obscureText, + validator: (value) { + if (value == null || value.isEmpty) { + return 'Por favor ingrese una contraseña'; + } + if (value.length <= 6) { + return 'Contraseña muy corta'; + } + return null; + }, + decoration: InputDecoration( + errorBorder: const OutlineInputBorder( + borderSide: BorderSide( + color: + Color.fromARGB(255, 184, 0, 0)), + borderRadius: BorderRadius.all( + Radius.circular(50), + )), + enabledBorder: const OutlineInputBorder( + borderSide: + BorderSide(color: Color(0xFFECECEC)), + borderRadius: BorderRadius.all( + Radius.circular(50), + )), + border: const OutlineInputBorder( + borderSide: + BorderSide(color: Color(0xFFECECEC)), + borderRadius: BorderRadius.all( + Radius.circular(50), + )), + focusedBorder: const OutlineInputBorder( + borderSide: + BorderSide(color: Color(0xFFECECEC)), + borderRadius: BorderRadius.all( + Radius.circular(50), + )), + hintText: 'Contraseña', + fillColor: + const Color.fromARGB(255, 239, 239, 239), + filled: true, + prefixIcon: const Icon(Icons.lock_outline), + suffixIcon: IconButton( + icon: Icon( + _obscureText + ? Icons.visibility + : Icons.visibility_off, + color: Colors.grey, ), + onPressed: () { + setState(() { + _obscureText = !_obscureText; + }); + }, ), ), ), - ], - )), + ), + ], + ), + ), + Padding( + padding: const EdgeInsets.symmetric(vertical: 20), + child: Row( + mainAxisAlignment: MainAxisAlignment + .center, // Centra horizontalmente + children: [ + Checkbox( + value: _isChecked, + onChanged: (value) { + setState(() { + _isChecked = value!; + }); + }, + ), + const Text( + 'Acepto los términos y condiciones.', + style: TextStyle( + color: Color(0xFF65676B), + ), + ), + ], + ), + ), Padding( padding: const EdgeInsets.only(bottom: 25), child: Center( @@ -302,6 +327,7 @@ class _RegisterScreenState extends State { } }, label: 'Registrarme', + isEnabled: _isChecked, ), ), ), @@ -407,195 +433,164 @@ class _RegisterScreenState extends State { horizontal: 0, vertical: 20), child: Column( children: [ - // Padding( - // padding: const EdgeInsets.only(bottom: 20), - // child: ElevatedButton( - // onPressed: () async { - // await AuthenticationRepository.instance - // .signInWithGoogle(); - // }, - // style: ElevatedButton.styleFrom( - // backgroundColor: const Color(0xFF2BA4EC), - // shape: RoundedRectangleBorder( - // borderRadius: BorderRadius.circular(50), - // ), - // elevation: 0, - // minimumSize: const Size(230, 60), - // ), - // child: const Row( - // mainAxisAlignment: MainAxisAlignment.center, - // children: [ - // Text( - // 'Entrar con Google ', - // style: TextStyle( - // color: Colors.white, - // fontWeight: FontWeight.bold, - // fontSize: 18, - // ), - // ), - // SizedBox(width: 5), - // FaIcon(FontAwesomeIcons.google), - // ], - // )), - // ), - // const 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, - // ), - // ), - // ], - // ), - // ), Form( - key: _formKey, - child: Column( - children: [ - const Padding( - padding: EdgeInsets.only(bottom: 5), - child: Align( - alignment: Alignment.topLeft, - child: Text('Email', - style: TextStyle( - fontSize: 18.0, - color: Color(0xFF65676B))), - )), - Padding( - padding: const EdgeInsets.only(bottom: 18), - child: TextFormField( - controller: controller.email, - validator: (String? value) { - if (value == null || value.isEmpty) { - return 'Por favor ingrese un email'; - } - final RegExp emailRegExp = RegExp( - r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$'); - if (!emailRegExp.hasMatch(value)) { - return 'Por favor ingrese un email válido'; - } - return null; - }, - decoration: const InputDecoration( - border: OutlineInputBorder( - borderSide: BorderSide( - color: Color(0xFFECECEC)), - borderRadius: BorderRadius.all( - Radius.circular(50), - )), - 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), - )), - errorBorder: OutlineInputBorder( - borderSide: BorderSide( - color: Color.fromARGB( - 255, 184, 0, 0)), - 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: const EdgeInsets.only(bottom: 25), - child: TextFormField( - controller: controller.password, - obscureText: _obscureText, - validator: (value) { - if (value == null || value.isEmpty) { - return 'Por favor ingrese una contraseña'; - } - if (value.length <= 6) { - return 'Contraseña muy corta'; - } - return null; - }, - decoration: InputDecoration( - errorBorder: const OutlineInputBorder( + key: _formKey, + child: Column( + children: [ + const Padding( + padding: EdgeInsets.only(bottom: 5), + child: Align( + alignment: Alignment.topLeft, + child: Text('Email', + style: TextStyle( + fontSize: 18.0, + color: Color(0xFF65676B))), + )), + Padding( + padding: const EdgeInsets.only(bottom: 18), + child: TextFormField( + controller: controller.email, + validator: (String? value) { + if (value == null || value.isEmpty) { + return 'Por favor ingrese un email'; + } + final RegExp emailRegExp = RegExp( + r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$'); + if (!emailRegExp.hasMatch(value)) { + return 'Por favor ingrese un email válido'; + } + return null; + }, + decoration: const InputDecoration( + border: OutlineInputBorder( + borderSide: BorderSide( + color: Color(0xFFECECEC)), + borderRadius: BorderRadius.all( + Radius.circular(50), + )), + 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), + )), + errorBorder: OutlineInputBorder( borderSide: BorderSide( color: Color.fromARGB( 255, 184, 0, 0)), borderRadius: BorderRadius.all( Radius.circular(50), )), - enabledBorder: const OutlineInputBorder( - borderSide: BorderSide( - color: Color(0xFFECECEC)), - borderRadius: BorderRadius.all( - Radius.circular(50), - )), - border: const OutlineInputBorder( - borderSide: BorderSide( - color: Color(0xFFECECEC)), - borderRadius: BorderRadius.all( - Radius.circular(50), - )), - focusedBorder: const OutlineInputBorder( - borderSide: BorderSide( - color: Color(0xFFECECEC)), - borderRadius: BorderRadius.all( - Radius.circular(50), - )), - hintText: 'Contraseña', - fillColor: const Color.fromARGB( - 255, 239, 239, 239), + hintText: 'Hello@gmail.com', + fillColor: + Color.fromARGB(255, 239, 239, 239), filled: true, - prefixIcon: - const Icon(Icons.lock_outline), - suffixIcon: IconButton( - icon: Icon( - _obscureText - ? Icons.visibility - : Icons.visibility_off, - color: Colors.grey, - ), - onPressed: () { - setState(() { - _obscureText = !_obscureText; - }); - }, + 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: const EdgeInsets.only(bottom: 25), + child: TextFormField( + controller: controller.password, + obscureText: _obscureText, + validator: (value) { + if (value == null || value.isEmpty) { + return 'Por favor ingrese una contraseña'; + } + if (value.length <= 6) { + return 'Contraseña muy corta'; + } + return null; + }, + decoration: InputDecoration( + errorBorder: const OutlineInputBorder( + borderSide: BorderSide( + color: Color.fromARGB( + 255, 184, 0, 0)), + borderRadius: BorderRadius.all( + Radius.circular(50), + )), + enabledBorder: const OutlineInputBorder( + borderSide: BorderSide( + color: Color(0xFFECECEC)), + borderRadius: BorderRadius.all( + Radius.circular(50), + )), + border: const OutlineInputBorder( + borderSide: BorderSide( + color: Color(0xFFECECEC)), + borderRadius: BorderRadius.all( + Radius.circular(50), + )), + focusedBorder: const OutlineInputBorder( + borderSide: BorderSide( + color: Color(0xFFECECEC)), + borderRadius: BorderRadius.all( + Radius.circular(50), + )), + hintText: 'Contraseña', + fillColor: const Color.fromARGB( + 255, 239, 239, 239), + filled: true, + prefixIcon: + const Icon(Icons.lock_outline), + suffixIcon: IconButton( + icon: Icon( + _obscureText + ? Icons.visibility + : Icons.visibility_off, + color: Colors.grey, ), + onPressed: () { + setState(() { + _obscureText = !_obscureText; + }); + }, ), ), ), - ], - )), + ), + ], + ), + ), + Padding( + padding: const EdgeInsets.symmetric(vertical: 20), + child: Row( + mainAxisAlignment: MainAxisAlignment + .center, // Centra horizontalmente + children: [ + Checkbox( + value: _isChecked, + onChanged: (value) { + setState(() { + _isChecked = value!; + }); + }, + ), + const Text( + 'Acepto los términos y condiciones.', + style: TextStyle( + color: Color(0xFF65676B), + ), + ), + ], + ), + ), Padding( padding: const EdgeInsets.only(bottom: 25), child: Center( @@ -608,6 +603,7 @@ class _RegisterScreenState extends State { ); } }, + isEnabled: _isChecked, label: 'Registrarme', ), ),