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(
child: Container(
height: height,
color: Colors.white,
color: Theme.of(context).scaffoldBackgroundColor,
child: Center(child: child),
),
),
lib/ui/views/login_view.dart
+44 -39
View File
@@ -11,12 +11,40 @@ class LoginView extends StatelessWidget {
@override
Widget build(BuildContext 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(
create: (_) => LoginFormProvider(),
child: Builder(builder: (context) {
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(
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 400),
@@ -28,24 +56,23 @@ class LoginView extends StatelessWidget {
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
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 Text('Ingresa con tu cuenta de email',
style: TextStyle(color: Colors.grey, fontSize: 13)),
Text('Ingresa con tu cuenta de email',
style: TextStyle(color: subtitleColor, fontSize: 13)),
const SizedBox(height: 28),
// Email
TextFormField(
keyboardType: TextInputType.emailAddress,
onFieldSubmitted: (_) => _submit(loginFormProvider, authProvider),
validator: (v) => EmailValidator.validate(v ?? '') ? null : 'Email no válido',
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),
// Password
TextFormField(
obscureText: true,
onFieldSubmitted: (_) => _submit(loginFormProvider, authProvider),
@@ -55,7 +82,8 @@ class LoginView extends StatelessWidget {
return null;
},
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),
@@ -76,12 +104,12 @@ class LoginView extends StatelessWidget {
),
const SizedBox(height: 24),
Row(children: const [
Expanded(child: Divider()),
Row(children: [
const Expanded(child: Divider()),
Padding(
padding: EdgeInsets.symmetric(horizontal: 12),
child: Text('o', style: TextStyle(color: Colors.grey))),
Expanded(child: Divider()),
padding: const EdgeInsets.symmetric(horizontal: 12),
child: Text('o', style: TextStyle(color: subtitleColor))),
const Expanded(child: Divider()),
]),
const SizedBox(height: 16),
@@ -107,9 +135,9 @@ class LoginView extends StatelessWidget {
onPressed: () =>
Navigator.pushReplacementNamed(context, Flurorouter.registerRoute),
child: RichText(
text: const TextSpan(
style: TextStyle(color: Colors.grey, fontSize: 13),
children: [
text: TextSpan(
style: TextStyle(color: subtitleColor, fontSize: 13),
children: const [
TextSpan(text: '¿No tienes cuenta? '),
TextSpan(
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 {
if (form.validateForm()) {
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() {
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(
crossAxisAlignment: CrossAxisAlignment.start,
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 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),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
@@ -108,28 +117,30 @@ class _PhoneLoginViewState extends State<PhoneLoginView> {
Container(
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 18),
decoration: BoxDecoration(
color: const Color(0xFFF5F5F5),
color: prefixFill,
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),
Expanded(
child: TextField(
controller: _phoneController,
keyboardType: TextInputType.phone,
style: TextStyle(color: titleColor),
decoration: InputDecoration(
hintText: '300 123 4567',
hintStyle: TextStyle(color: subtitleColor),
filled: true,
fillColor: const Color(0xFFF5F8FF),
fillColor: inputFill,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide.none,
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(color: Color(0xFFE0E7FF)),
borderSide: BorderSide(color: inputBorder),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
@@ -158,7 +169,14 @@ class _PhoneLoginViewState extends State<PhoneLoginView> {
),
),
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),
SizedBox(
width: double.infinity,
@@ -177,9 +195,9 @@ class _PhoneLoginViewState extends State<PhoneLoginView> {
child: TextButton(
onPressed: () => Navigator.pushReplacementNamed(context, Flurorouter.registerRoute),
child: RichText(
text: const TextSpan(
style: TextStyle(color: Colors.grey, fontSize: 13),
children: [
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)),
],
@@ -192,17 +210,23 @@ class _PhoneLoginViewState extends State<PhoneLoginView> {
}
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(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Icon(Icons.sms_outlined, size: 52, color: Color(0xFF42A4EF)),
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),
Text(
'Enviamos un SMS a $_phone',
textAlign: TextAlign.center,
style: const TextStyle(color: Colors.grey, fontSize: 13),
style: TextStyle(color: subtitleColor, fontSize: 13),
),
const SizedBox(height: 28),
TextField(
@@ -210,15 +234,15 @@ class _PhoneLoginViewState extends State<PhoneLoginView> {
keyboardType: TextInputType.number,
textAlign: TextAlign.center,
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(
counterText: '',
hintText: '------',
hintStyle: const TextStyle(letterSpacing: 12, color: Colors.grey),
hintStyle: TextStyle(letterSpacing: 12, color: subtitleColor),
filled: true,
fillColor: const Color(0xFFF5F8FF),
fillColor: inputFill,
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)),
),
),
@@ -241,7 +265,7 @@ class _PhoneLoginViewState extends State<PhoneLoginView> {
),
const SizedBox(height: 16),
_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(
onPressed: _sendCode,
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),
TextButton(
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)),
),
],
);