usite-sas-bic/prosappweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: formularios de auth con card blanca y colores con contraste correcto

Browse Source 
- PhoneLoginView y LoginView: form envuelto en Card con sombra (blanca en claro, oscura en noche)
- Títulos: Color(0xFF0F172A) en claro, blanco en noche - siempre visible
- Subtítulos: Color(0xFF64748B) en claro (contraste 4.5:1+) vs Colors.grey anterior
- Inputs: fillColor, textColor y borderColor explícitos por tema
- AuthLayout desktop: fondo usa scaffoldBackgroundColor del tema

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Lizandro Guarnizo
2026-06-27 18:37:14 -05:00
co-authored by Claude Sonnet 4.6
parent 35599276ed
commit dd3053d3b3
2 changed files with 235 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/ui/views/login_view.dart
+143 -119
View File
@@ -12,144 +12,168 @@ class LoginView extends StatelessWidget {
Widget build(BuildContext context) { Widget build(BuildContext context) {
final authProvider = Provider.of<AuthProvider>(context); final authProvider = Provider.of<AuthProvider>(context);
final isDark = Theme.of(context).brightness == Brightness.dark; final isDark = Theme.of(context).brightness == Brightness.dark;
final titleColor = isDark ? Colors.white : const Color(0xFF1E293B); final cardColor = isDark ? const Color(0xFF1E293B) : Colors.white;
final subtitleColor = isDark ? Colors.white54 : Colors.grey; final titleColor = isDark ? Colors.white : const Color(0xFF0F172A);
final inputFill = isDark ? const Color(0xFF1E293B) : const Color(0xFFF5F8FF); final subtitleColor = isDark ? const Color(0xFF94A3B8) : const Color(0xFF64748B);
final inputBorder = isDark ? const Color(0xFF334155) : const Color(0xFFE0E7FF); final inputFill = isDark ? const Color(0xFF0F172A) : const Color(0xFFF8FAFF);
final inputBorder = isDark ? const Color(0xFF334155) : const Color(0xFFCDD5F0);
final inputTextColor = isDark ? Colors.white : const Color(0xFF0F172A);
InputDecoration inputDecoration(String label, String hint, IconData icon) {
return InputDecoration(
labelText: label,
labelStyle: TextStyle(color: subtitleColor),
hintText: hint,
hintStyle: TextStyle(color: subtitleColor),
prefixIcon: Icon(icon, color: const Color(0xFF42A4EF)),
filled: true,
fillColor: inputFill,
border: OutlineInputBorder(borderRadius: BorderRadius.circular(10), borderSide: BorderSide.none),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide(color: inputBorder)),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(color: Color(0xFF42A4EF), width: 2)),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(color: Colors.red)),
focusedErrorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(color: Colors.red, width: 2)),
);
}
return ChangeNotifierProvider( return ChangeNotifierProvider(
create: (_) => LoginFormProvider(), create: (_) => LoginFormProvider(),
child: Builder(builder: (context) { child: Builder(builder: (context) {
final loginFormProvider = Provider.of<LoginFormProvider>(context, listen: false); final loginFormProvider = Provider.of<LoginFormProvider>(context, listen: false);
InputDecoration inputDecoration(String label, String hint, IconData icon) {
return InputDecoration(
labelText: label,
hintText: hint,
prefixIcon: const Icon(Icons.email_outlined, color: Color(0xFF42A4EF)),
filled: true,
fillColor: inputFill,
border: OutlineInputBorder(borderRadius: BorderRadius.circular(10), borderSide: BorderSide.none),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide(color: inputBorder)),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(color: Color(0xFF42A4EF), width: 2)),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(color: Colors.red)),
focusedErrorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(color: Colors.red, width: 2)),
);
}
return Center( return Center(
child: ConstrainedBox( child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 400), constraints: const BoxConstraints(maxWidth: 400),
child: SingleChildScrollView( child: SingleChildScrollView(
padding: const EdgeInsets.symmetric(horizontal: 28, vertical: 16), padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 32),
child: Form( child: Container(
autovalidateMode: AutovalidateMode.onUserInteraction, decoration: BoxDecoration(
key: loginFormProvider.formKey, color: cardColor,
child: Column( borderRadius: BorderRadius.circular(16),
crossAxisAlignment: CrossAxisAlignment.start, boxShadow: [
children: [ BoxShadow(
Text('Iniciar sesión', color: Colors.black.withOpacity(isDark ? 0.3 : 0.08),
style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold, color: titleColor)), blurRadius: 24,
const SizedBox(height: 4), offset: const Offset(0, 4),
Text('Ingresa con tu cuenta de email',
style: TextStyle(color: subtitleColor, fontSize: 13)),
const SizedBox(height: 28),
TextFormField(
keyboardType: TextInputType.emailAddress,
onFieldSubmitted: (_) => _submit(loginFormProvider, authProvider),
validator: (v) => EmailValidator.validate(v ?? '') ? null : 'Email no válido',
onChanged: (v) => loginFormProvider.email = v,
style: TextStyle(color: titleColor),
decoration: inputDecoration('Email', 'correo@ejemplo.com', Icons.email_outlined),
), ),
const SizedBox(height: 16), ],
),
TextFormField( padding: const EdgeInsets.all(28),
obscureText: true, child: Form(
onFieldSubmitted: (_) => _submit(loginFormProvider, authProvider), autovalidateMode: AutovalidateMode.onUserInteraction,
validator: (v) { key: loginFormProvider.formKey,
if (v == null || v.isEmpty) return 'Ingresa tu contraseña'; child: Column(
if (v.length < 6) return 'Mínimo 6 caracteres'; crossAxisAlignment: CrossAxisAlignment.start,
return null; children: [
}, Text(
onChanged: (v) => loginFormProvider.password = v, 'Iniciar sesión',
style: TextStyle(color: titleColor), style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold, color: titleColor),
decoration: inputDecoration('Contraseña', '••••••••', Icons.lock_outline),
),
const SizedBox(height: 24),
SizedBox(
width: double.infinity,
child: ElevatedButton(
onPressed: () => _submit(loginFormProvider, authProvider),
style: ElevatedButton.styleFrom(
backgroundColor: const Color(0xFF42A4EF),
foregroundColor: Colors.white,
padding: const EdgeInsets.symmetric(vertical: 16),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
elevation: 0,
),
child: const Text('Ingresar',
style: TextStyle(fontSize: 15, fontWeight: FontWeight.w600)),
), ),
), const SizedBox(height: 4),
const SizedBox(height: 24), Text(
'Ingresa con tu cuenta de email',
style: TextStyle(color: subtitleColor, fontSize: 13),
),
const SizedBox(height: 28),
Row(children: [ TextFormField(
const Expanded(child: Divider()), keyboardType: TextInputType.emailAddress,
Padding( onFieldSubmitted: (_) => _submit(loginFormProvider, authProvider),
validator: (v) => EmailValidator.validate(v ?? '') ? null : 'Email no válido',
onChanged: (v) => loginFormProvider.email = v,
style: TextStyle(color: inputTextColor),
decoration: inputDecoration('Email', 'correo@ejemplo.com', Icons.email_outlined),
),
const SizedBox(height: 16),
TextFormField(
obscureText: true,
onFieldSubmitted: (_) => _submit(loginFormProvider, authProvider),
validator: (v) {
if (v == null || v.isEmpty) return 'Ingresa tu contraseña';
if (v.length < 6) return 'Mínimo 6 caracteres';
return null;
},
onChanged: (v) => loginFormProvider.password = v,
style: TextStyle(color: inputTextColor),
decoration: inputDecoration('Contraseña', '••••••••', Icons.lock_outline),
),
const SizedBox(height: 24),
SizedBox(
width: double.infinity,
child: ElevatedButton(
onPressed: () => _submit(loginFormProvider, authProvider),
style: ElevatedButton.styleFrom(
backgroundColor: const Color(0xFF42A4EF),
foregroundColor: Colors.white,
padding: const EdgeInsets.symmetric(vertical: 16),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
elevation: 0,
),
child: const Text('Ingresar',
style: TextStyle(fontSize: 15, fontWeight: FontWeight.w600)),
),
),
const SizedBox(height: 24),
Row(children: [
const Expanded(child: Divider()),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 12), padding: const EdgeInsets.symmetric(horizontal: 12),
child: Text('o', style: TextStyle(color: subtitleColor))), child: Text('o', style: TextStyle(color: subtitleColor)),
const Expanded(child: Divider()),
]),
const SizedBox(height: 16),
SizedBox(
width: double.infinity,
child: OutlinedButton.icon(
onPressed: () =>
Navigator.pushReplacementNamed(context, Flurorouter.phoneLoginRoute),
icon: const Icon(Icons.phone_android, color: Color(0xFF42A4EF)),
label: const Text('Ingresar con celular',
style: TextStyle(color: Color(0xFF42A4EF), fontWeight: FontWeight.w600)),
style: OutlinedButton.styleFrom(
padding: const EdgeInsets.symmetric(vertical: 14),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
side: const BorderSide(color: Color(0xFF42A4EF)),
), ),
), const Expanded(child: Divider()),
), ]),
const SizedBox(height: 12), const SizedBox(height: 16),
Center( SizedBox(
child: TextButton( width: double.infinity,
onPressed: () => child: OutlinedButton.icon(
Navigator.pushReplacementNamed(context, Flurorouter.registerRoute), onPressed: () => Navigator.pushReplacementNamed(
child: RichText( context, Flurorouter.phoneLoginRoute),
text: TextSpan( icon: const Icon(Icons.phone_android, color: Color(0xFF42A4EF)),
style: TextStyle(color: subtitleColor, fontSize: 13), label: const Text('Ingresar con celular',
children: const [ style: TextStyle(
TextSpan(text: '¿No tienes cuenta? '), color: Color(0xFF42A4EF), fontWeight: FontWeight.w600)),
TextSpan( style: OutlinedButton.styleFrom(
text: 'Regístrate', padding: const EdgeInsets.symmetric(vertical: 14),
style: TextStyle( shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
color: Color(0xFF42A4EF), fontWeight: FontWeight.w600), side: const BorderSide(color: Color(0xFF42A4EF)),
),
],
), ),
), ),
), ),
), const SizedBox(height: 12),
],
Center(
child: TextButton(
onPressed: () => Navigator.pushReplacementNamed(
context, Flurorouter.registerRoute),
child: RichText(
text: TextSpan(
style: TextStyle(color: subtitleColor, fontSize: 13),
children: const [
TextSpan(text: '¿No tienes cuenta? '),
TextSpan(
text: 'Regístrate',
style: TextStyle(
color: Color(0xFF42A4EF), fontWeight: FontWeight.w600),
),
],
),
),
),
),
],
),
), ),
), ),
), ),
lib/ui/views/phone_login_view.dart
+92 -36
View File
@@ -52,7 +52,7 @@ class _PhoneLoginViewState extends State<PhoneLoginView> {
setState(() => _loading = true); setState(() => _loading = true);
try { try {
await Provider.of<AuthProvider>(context, listen: false).verifyPhoneNumber(_phone); await Provider.of<AuthProvider>(context, listen: false).verifyPhoneNumber(_phone);
setState(() { _codeSent = true; }); setState(() => _codeSent = true);
_startResendTimer(); _startResendTimer();
} catch (_) { } catch (_) {
ScaffoldMessenger.of(context).showSnackBar( ScaffoldMessenger.of(context).showSnackBar(
@@ -78,38 +78,70 @@ class _PhoneLoginViewState extends State<PhoneLoginView> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final isDark = Theme.of(context).brightness == Brightness.dark;
final cardColor = isDark ? const Color(0xFF1E293B) : Colors.white;
final titleColor = isDark ? Colors.white : const Color(0xFF0F172A);
final subtitleColor = isDark ? const Color(0xFF94A3B8) : const Color(0xFF64748B);
final inputFill = isDark ? const Color(0xFF0F172A) : const Color(0xFFF8FAFF);
final inputBorder = isDark ? const Color(0xFF334155) : const Color(0xFFCDD5F0);
final inputTextColor = isDark ? Colors.white : const Color(0xFF0F172A);
final prefixFill = isDark ? const Color(0xFF0F172A) : const Color(0xFFEEF0FF);
final prefixBorder = isDark ? const Color(0xFF334155) : const Color(0xFFCDD5F0);
return Center( return Center(
child: ConstrainedBox( child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 420), constraints: const BoxConstraints(maxWidth: 420),
child: SingleChildScrollView( child: SingleChildScrollView(
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 32), padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 32),
child: Column( child: Container(
crossAxisAlignment: CrossAxisAlignment.center, decoration: BoxDecoration(
children: [ color: cardColor,
if (!_codeSent) _buildPhoneForm() else _buildOtpForm(), borderRadius: BorderRadius.circular(16),
], boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(isDark ? 0.3 : 0.08),
blurRadius: 24,
offset: const Offset(0, 4),
),
],
),
padding: const EdgeInsets.all(28),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
if (!_codeSent)
_buildPhoneForm(titleColor, subtitleColor, inputFill, inputBorder, inputTextColor, prefixFill, prefixBorder)
else
_buildOtpForm(titleColor, subtitleColor, inputFill, inputBorder, inputTextColor),
],
),
), ),
), ),
), ),
); );
} }
Widget _buildPhoneForm() { Widget _buildPhoneForm(
final isDark = Theme.of(context).brightness == Brightness.dark; Color titleColor,
final titleColor = isDark ? Colors.white : const Color(0xFF1E293B); Color subtitleColor,
final subtitleColor = isDark ? Colors.white54 : Colors.grey; Color inputFill,
final inputFill = isDark ? const Color(0xFF1E293B) : const Color(0xFFF5F8FF); Color inputBorder,
final inputBorder = isDark ? const Color(0xFF334155) : const Color(0xFFE0E7FF); Color inputTextColor,
final prefixFill = isDark ? const Color(0xFF0F172A) : const Color(0xFFF5F5F5); Color prefixFill,
final prefixBorder = isDark ? const Color(0xFF334155) : const Color(0xFFE0E0E0); Color prefixBorder,
final prefixText = isDark ? Colors.white : Colors.black87; ) {
return Column( return Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Text('Iniciar sesión', style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold, color: titleColor)), Text(
'Iniciar sesión',
style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold, color: titleColor),
),
const SizedBox(height: 4), const SizedBox(height: 4),
Text('Te enviaremos un código de 6 dígitos', style: TextStyle(color: subtitleColor, fontSize: 13)), Text(
'Te enviaremos un código de 6 dígitos',
style: TextStyle(color: subtitleColor, fontSize: 13),
),
const SizedBox(height: 24), const SizedBox(height: 24),
Row( Row(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
@@ -121,14 +153,17 @@ class _PhoneLoginViewState extends State<PhoneLoginView> {
borderRadius: BorderRadius.circular(10), borderRadius: BorderRadius.circular(10),
border: Border.all(color: prefixBorder), border: Border.all(color: prefixBorder),
), ),
child: Text('+57', style: TextStyle(fontSize: 15, fontWeight: FontWeight.w600, color: prefixText)), child: Text(
'+57',
style: TextStyle(fontSize: 15, fontWeight: FontWeight.w600, color: titleColor),
),
), ),
const SizedBox(width: 10), const SizedBox(width: 10),
Expanded( Expanded(
child: TextField( child: TextField(
controller: _phoneController, controller: _phoneController,
keyboardType: TextInputType.phone, keyboardType: TextInputType.phone,
style: TextStyle(color: titleColor), style: TextStyle(color: inputTextColor, fontSize: 15),
decoration: InputDecoration( decoration: InputDecoration(
hintText: '300 123 4567', hintText: '300 123 4567',
hintStyle: TextStyle(color: subtitleColor), hintStyle: TextStyle(color: subtitleColor),
@@ -187,7 +222,10 @@ class _PhoneLoginViewState extends State<PhoneLoginView> {
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)), shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
side: const BorderSide(color: Color(0xFF42A4EF)), side: const BorderSide(color: Color(0xFF42A4EF)),
), ),
child: const Text('Iniciar sesión con email', style: TextStyle(color: Color(0xFF42A4EF), fontWeight: FontWeight.w600)), child: const Text(
'Iniciar sesión con email',
style: TextStyle(color: Color(0xFF42A4EF), fontWeight: FontWeight.w600),
),
), ),
), ),
const SizedBox(height: 12), const SizedBox(height: 12),
@@ -199,7 +237,10 @@ class _PhoneLoginViewState extends State<PhoneLoginView> {
style: TextStyle(color: subtitleColor, fontSize: 13), style: TextStyle(color: subtitleColor, fontSize: 13),
children: const [ children: const [
TextSpan(text: '¿No tienes cuenta? '), TextSpan(text: '¿No tienes cuenta? '),
TextSpan(text: 'Regístrate', style: TextStyle(color: Color(0xFF42A4EF), fontWeight: FontWeight.w600)), TextSpan(
text: 'Regístrate',
style: TextStyle(color: Color(0xFF42A4EF), fontWeight: FontWeight.w600),
),
], ],
), ),
), ),
@@ -209,19 +250,22 @@ class _PhoneLoginViewState extends State<PhoneLoginView> {
); );
} }
Widget _buildOtpForm() { Widget _buildOtpForm(
final isDark = Theme.of(context).brightness == Brightness.dark; Color titleColor,
final titleColor = isDark ? Colors.white : const Color(0xFF1E293B); Color subtitleColor,
final subtitleColor = isDark ? Colors.white54 : Colors.grey; Color inputFill,
final inputFill = isDark ? const Color(0xFF1E293B) : const Color(0xFFF5F8FF); Color inputBorder,
final inputBorder = isDark ? const Color(0xFF334155) : const Color(0xFFE0E7FF); Color inputTextColor,
) {
return Column( return Column(
crossAxisAlignment: CrossAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center,
children: [ children: [
const Icon(Icons.sms_outlined, size: 52, color: Color(0xFF42A4EF)), const Icon(Icons.sms_outlined, size: 52, color: Color(0xFF42A4EF)),
const SizedBox(height: 12), const SizedBox(height: 12),
Text('Código de verificación', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: titleColor)), Text(
'Código de verificación',
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: titleColor),
),
const SizedBox(height: 8), const SizedBox(height: 8),
Text( Text(
'Enviamos un SMS a $_phone', 'Enviamos un SMS a $_phone',
@@ -234,7 +278,12 @@ class _PhoneLoginViewState extends State<PhoneLoginView> {
keyboardType: TextInputType.number, keyboardType: TextInputType.number,
textAlign: TextAlign.center, textAlign: TextAlign.center,
maxLength: 6, maxLength: 6,
style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold, letterSpacing: 12, color: titleColor), style: TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold,
letterSpacing: 12,
color: inputTextColor,
),
decoration: InputDecoration( decoration: InputDecoration(
counterText: '', counterText: '',
hintText: '------', hintText: '------',
@@ -242,8 +291,11 @@ class _PhoneLoginViewState extends State<PhoneLoginView> {
filled: true, filled: true,
fillColor: inputFill, fillColor: inputFill,
border: OutlineInputBorder(borderRadius: BorderRadius.circular(12), borderSide: BorderSide.none), border: OutlineInputBorder(borderRadius: BorderRadius.circular(12), borderSide: BorderSide.none),
enabledBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(12), borderSide: BorderSide(color: inputBorder)), enabledBorder: OutlineInputBorder(
focusedBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(12), borderSide: const BorderSide(color: Color(0xFF42A4EF), width: 2)), borderRadius: BorderRadius.circular(12), borderSide: BorderSide(color: inputBorder)),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: const BorderSide(color: Color(0xFF42A4EF), width: 2)),
), ),
), ),
const SizedBox(height: 24), const SizedBox(height: 24),
@@ -268,11 +320,15 @@ class _PhoneLoginViewState extends State<PhoneLoginView> {
? Text('Reenviar en $_resendSeconds s', style: TextStyle(color: subtitleColor, fontSize: 13)) ? Text('Reenviar en $_resendSeconds s', style: TextStyle(color: subtitleColor, fontSize: 13))
: TextButton( : TextButton(
onPressed: _sendCode, onPressed: _sendCode,
child: const Text('Reenviar código', style: TextStyle(color: Color(0xFF42A4EF), fontWeight: FontWeight.w600)), child: const Text('Reenviar código',
style: TextStyle(color: Color(0xFF42A4EF), fontWeight: FontWeight.w600)),
), ),
const SizedBox(height: 8), const SizedBox(height: 8),
TextButton( TextButton(
onPressed: () => setState(() { _codeSent = false; _otpController.clear(); }), onPressed: () => setState(() {
_codeSent = false;
_otpController.clear();
}),
child: Text('← Cambiar número', style: TextStyle(color: subtitleColor, fontSize: 13)), child: Text('← Cambiar número', style: TextStyle(color: subtitleColor, fontSize: 13)),
), ),
], ],