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

fix: auth pages visibles en modo oscuro y claro

Browse Source 
- AuthLayout desktop: fondo usa scaffoldBackgroundColor en vez de Colors.white fijo
- PhoneLoginView y LoginView: todos los textos, inputs y bordes usan colores tema-aware
  (titulos, subtítulos, fillColor, borderColor se adaptan a modo día/noche)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Lizandro Guarnizo
2026-06-27 18:33:21 -05:00
co-authored by Claude Sonnet 4.6
parent 7434bc8644
commit 35599276ed
3 changed files with 88 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/ui/layouts/auth/auth_layout.dart
+1 -1
View File
@@ -83,7 +83,7 @@ class _DesktopBody extends StatelessWidget {
Expanded( Expanded(
child: Container( child: Container(
height: height, height: height,
color: Colors.white, color: Theme.of(context).scaffoldBackgroundColor,
child: Center(child: child), child: Center(child: child),
), ),
), ),
lib/ui/views/login_view.dart
+44 -39
View File
@@ -11,12 +11,40 @@ class LoginView extends StatelessWidget {
@override @override
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 titleColor = isDark ? Colors.white : const Color(0xFF1E293B);
final subtitleColor = isDark ? Colors.white54 : Colors.grey;
final inputFill = isDark ? const Color(0xFF1E293B) : const Color(0xFFF5F8FF);
final inputBorder = isDark ? const Color(0xFF334155) : const Color(0xFFE0E7FF);
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),
@@ -28,24 +56,23 @@ class LoginView extends StatelessWidget {
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
const Text('Iniciar sesión', Text('Iniciar sesión',
style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold)), style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold, color: titleColor)),
const SizedBox(height: 4), const SizedBox(height: 4),
const Text('Ingresa con tu cuenta de email', Text('Ingresa con tu cuenta de email',
style: TextStyle(color: Colors.grey, fontSize: 13)), style: TextStyle(color: subtitleColor, fontSize: 13)),
const SizedBox(height: 28), const SizedBox(height: 28),
// Email
TextFormField( TextFormField(
keyboardType: TextInputType.emailAddress, keyboardType: TextInputType.emailAddress,
onFieldSubmitted: (_) => _submit(loginFormProvider, authProvider), onFieldSubmitted: (_) => _submit(loginFormProvider, authProvider),
validator: (v) => EmailValidator.validate(v ?? '') ? null : 'Email no válido', validator: (v) => EmailValidator.validate(v ?? '') ? null : 'Email no válido',
onChanged: (v) => loginFormProvider.email = v, onChanged: (v) => loginFormProvider.email = v,
decoration: _inputDecoration('Email', 'correo@ejemplo.com', Icons.email_outlined), style: TextStyle(color: titleColor),
decoration: inputDecoration('Email', 'correo@ejemplo.com', Icons.email_outlined),
), ),
const SizedBox(height: 16), const SizedBox(height: 16),
// Password
TextFormField( TextFormField(
obscureText: true, obscureText: true,
onFieldSubmitted: (_) => _submit(loginFormProvider, authProvider), onFieldSubmitted: (_) => _submit(loginFormProvider, authProvider),
@@ -55,7 +82,8 @@ class LoginView extends StatelessWidget {
return null; return null;
}, },
onChanged: (v) => loginFormProvider.password = v, onChanged: (v) => loginFormProvider.password = v,
decoration: _inputDecoration('Contraseña', '••••••••', Icons.lock_outline), style: TextStyle(color: titleColor),
decoration: inputDecoration('Contraseña', '••••••••', Icons.lock_outline),
), ),
const SizedBox(height: 24), const SizedBox(height: 24),
@@ -76,12 +104,12 @@ class LoginView extends StatelessWidget {
), ),
const SizedBox(height: 24), const SizedBox(height: 24),
Row(children: const [ Row(children: [
Expanded(child: Divider()), const Expanded(child: Divider()),
Padding( Padding(
padding: EdgeInsets.symmetric(horizontal: 12), padding: const EdgeInsets.symmetric(horizontal: 12),
child: Text('o', style: TextStyle(color: Colors.grey))), child: Text('o', style: TextStyle(color: subtitleColor))),
Expanded(child: Divider()), const Expanded(child: Divider()),
]), ]),
const SizedBox(height: 16), const SizedBox(height: 16),
@@ -107,9 +135,9 @@ class LoginView extends StatelessWidget {
onPressed: () => onPressed: () =>
Navigator.pushReplacementNamed(context, Flurorouter.registerRoute), Navigator.pushReplacementNamed(context, Flurorouter.registerRoute),
child: RichText( child: RichText(
text: const TextSpan( text: TextSpan(
style: TextStyle(color: Colors.grey, fontSize: 13), style: TextStyle(color: subtitleColor, fontSize: 13),
children: [ children: const [
TextSpan(text: '¿No tienes cuenta? '), TextSpan(text: '¿No tienes cuenta? '),
TextSpan( TextSpan(
text: 'Regístrate', text: 'Regístrate',
@@ -131,29 +159,6 @@ class LoginView extends StatelessWidget {
); );
} }
InputDecoration _inputDecoration(String label, String hint, IconData icon) {
return InputDecoration(
labelText: label,
hintText: hint,
prefixIcon: Icon(icon, color: const Color(0xFF42A4EF)),
filled: true,
fillColor: const Color(0xFFF5F8FF),
border: OutlineInputBorder(borderRadius: BorderRadius.circular(10), borderSide: BorderSide.none),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(color: Color(0xFFE0E7FF))),
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)),
);
}
void _submit(LoginFormProvider form, AuthProvider auth) async { void _submit(LoginFormProvider form, AuthProvider auth) async {
if (form.validateForm()) { if (form.validateForm()) {
await auth.login(form.email, form.password); await auth.login(form.email, form.password);
lib/ui/views/phone_login_view.dart
+43 -19
View File
@@ -95,12 +95,21 @@ class _PhoneLoginViewState extends State<PhoneLoginView> {
} }
Widget _buildPhoneForm() { Widget _buildPhoneForm() {
final isDark = Theme.of(context).brightness == Brightness.dark;
final titleColor = isDark ? Colors.white : const Color(0xFF1E293B);
final subtitleColor = isDark ? Colors.white54 : Colors.grey;
final inputFill = isDark ? const Color(0xFF1E293B) : const Color(0xFFF5F8FF);
final inputBorder = isDark ? const Color(0xFF334155) : const Color(0xFFE0E7FF);
final prefixFill = isDark ? const Color(0xFF0F172A) : const Color(0xFFF5F5F5);
final prefixBorder = isDark ? const Color(0xFF334155) : const Color(0xFFE0E0E0);
final prefixText = isDark ? Colors.white : Colors.black87;
return Column( return Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
const Text('Iniciar sesión', style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold)), Text('Iniciar sesión', style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold, color: titleColor)),
const SizedBox(height: 4), const SizedBox(height: 4),
const Text('Te enviaremos un código de 6 dígitos', style: TextStyle(color: Colors.grey, 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,
@@ -108,28 +117,30 @@ class _PhoneLoginViewState extends State<PhoneLoginView> {
Container( Container(
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 18), padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 18),
decoration: BoxDecoration( decoration: BoxDecoration(
color: const Color(0xFFF5F5F5), color: prefixFill,
borderRadius: BorderRadius.circular(10), borderRadius: BorderRadius.circular(10),
border: Border.all(color: const Color(0xFFE0E0E0)), border: Border.all(color: prefixBorder),
), ),
child: const Text('+57', style: TextStyle(fontSize: 15, fontWeight: FontWeight.w600)), child: Text('+57', style: TextStyle(fontSize: 15, fontWeight: FontWeight.w600, color: prefixText)),
), ),
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),
decoration: InputDecoration( decoration: InputDecoration(
hintText: '300 123 4567', hintText: '300 123 4567',
hintStyle: TextStyle(color: subtitleColor),
filled: true, filled: true,
fillColor: const Color(0xFFF5F8FF), fillColor: inputFill,
border: OutlineInputBorder( border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10), borderRadius: BorderRadius.circular(10),
borderSide: BorderSide.none, borderSide: BorderSide.none,
), ),
enabledBorder: OutlineInputBorder( enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10), borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(color: Color(0xFFE0E7FF)), borderSide: BorderSide(color: inputBorder),
), ),
focusedBorder: OutlineInputBorder( focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10), borderRadius: BorderRadius.circular(10),
@@ -158,7 +169,14 @@ class _PhoneLoginViewState extends State<PhoneLoginView> {
), ),
), ),
const SizedBox(height: 24), const SizedBox(height: 24),
Row(children: const [Expanded(child: Divider()), Padding(padding: EdgeInsets.symmetric(horizontal: 12), child: Text('o', style: TextStyle(color: Colors.grey))), Expanded(child: Divider())]), Row(children: [
const Expanded(child: Divider()),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 12),
child: Text('o', style: TextStyle(color: subtitleColor)),
),
const Expanded(child: Divider()),
]),
const SizedBox(height: 16), const SizedBox(height: 16),
SizedBox( SizedBox(
width: double.infinity, width: double.infinity,
@@ -177,9 +195,9 @@ class _PhoneLoginViewState extends State<PhoneLoginView> {
child: TextButton( child: TextButton(
onPressed: () => Navigator.pushReplacementNamed(context, Flurorouter.registerRoute), onPressed: () => Navigator.pushReplacementNamed(context, Flurorouter.registerRoute),
child: RichText( child: RichText(
text: const TextSpan( text: TextSpan(
style: TextStyle(color: Colors.grey, fontSize: 13), style: TextStyle(color: subtitleColor, fontSize: 13),
children: [ 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)),
], ],
@@ -192,17 +210,23 @@ class _PhoneLoginViewState extends State<PhoneLoginView> {
} }
Widget _buildOtpForm() { Widget _buildOtpForm() {
final isDark = Theme.of(context).brightness == Brightness.dark;
final titleColor = isDark ? Colors.white : const Color(0xFF1E293B);
final subtitleColor = isDark ? Colors.white54 : Colors.grey;
final inputFill = isDark ? const Color(0xFF1E293B) : const Color(0xFFF5F8FF);
final inputBorder = isDark ? const Color(0xFF334155) : const Color(0xFFE0E7FF);
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),
const Text('Código de verificación', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)), 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',
textAlign: TextAlign.center, textAlign: TextAlign.center,
style: const TextStyle(color: Colors.grey, fontSize: 13), style: TextStyle(color: subtitleColor, fontSize: 13),
), ),
const SizedBox(height: 28), const SizedBox(height: 28),
TextField( TextField(
@@ -210,15 +234,15 @@ class _PhoneLoginViewState extends State<PhoneLoginView> {
keyboardType: TextInputType.number, keyboardType: TextInputType.number,
textAlign: TextAlign.center, textAlign: TextAlign.center,
maxLength: 6, maxLength: 6,
style: const TextStyle(fontSize: 28, fontWeight: FontWeight.bold, letterSpacing: 12), style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold, letterSpacing: 12, color: titleColor),
decoration: InputDecoration( decoration: InputDecoration(
counterText: '', counterText: '',
hintText: '------', hintText: '------',
hintStyle: const TextStyle(letterSpacing: 12, color: Colors.grey), hintStyle: TextStyle(letterSpacing: 12, color: subtitleColor),
filled: true, filled: true,
fillColor: const Color(0xFFF5F8FF), 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: const BorderSide(color: Color(0xFFE0E7FF))), enabledBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(12), borderSide: BorderSide(color: inputBorder)),
focusedBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(12), borderSide: const BorderSide(color: Color(0xFF42A4EF), width: 2)), focusedBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(12), borderSide: const BorderSide(color: Color(0xFF42A4EF), width: 2)),
), ),
), ),
@@ -241,7 +265,7 @@ class _PhoneLoginViewState extends State<PhoneLoginView> {
), ),
const SizedBox(height: 16), const SizedBox(height: 16),
_resendSeconds > 0 _resendSeconds > 0
? Text('Reenviar en $_resendSeconds s', style: const TextStyle(color: Colors.grey, 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)),
@@ -249,7 +273,7 @@ class _PhoneLoginViewState extends State<PhoneLoginView> {
const SizedBox(height: 8), const SizedBox(height: 8),
TextButton( TextButton(
onPressed: () => setState(() { _codeSent = false; _otpController.clear(); }), onPressed: () => setState(() { _codeSent = false; _otpController.clear(); }),
child: const Text('← Cambiar número', style: TextStyle(color: Colors.grey, fontSize: 13)), child: Text('← Cambiar número', style: TextStyle(color: subtitleColor, fontSize: 13)),
), ),
], ],
); );