Co-authored-by: MENDOZA BALLARDO GAEL RICARDO <gael-meb123@users.noreply.github.com>
Co-authored-by: Azareth-Tr <Azareth-Tr@users.noreply.github.com>

modificacion de vistas panel admin, login, animaciones y implementacion de mascota
This commit is contained in:
shinra32
2026-05-23 03:58:03 -06:00
parent 45ffba69b2
commit 68d04f3917
33 changed files with 5188 additions and 643 deletions

View File

@@ -1,12 +1,13 @@
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import 'package:dio/dio.dart';
import '../../core/models/auth_state.dart';
import '../../core/services/auth_controller.dart';
import '../../core/theme/app_theme.dart';
import '../../core/widgets/app_widgets.dart';
import '../../core/services/auth_controller.dart';
import '../../core/models/auth_state.dart';
import 'widgets/video_mascot.dart';
class LoginPage extends ConsumerStatefulWidget {
const LoginPage({super.key});
@@ -30,23 +31,18 @@ class _LoginPageState extends ConsumerState<LoginPage> {
) {
if (!mounted) return;
if (next is AsyncError) {
String errorMessage = 'Ocurrió un error inesperado';
final error = next.error;
String msg = 'Ocurrió un error inesperado';
if (error is DioException) {
if (error.response?.data != null && error.response?.data is Map) {
errorMessage =
error.response!.data['detail'] ?? 'Credenciales inválidas';
} else {
errorMessage = 'Error de conexión con el servidor';
}
msg = (error.response?.data is Map)
? error.response!.data['detail'] ?? 'Credenciales inválidas'
: 'Error de conexión con el servidor';
} else {
errorMessage = error.toString();
msg = error.toString();
}
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(errorMessage),
content: Text(msg),
backgroundColor: AppTheme.danger,
behavior: SnackBarBehavior.floating,
),
@@ -72,171 +68,189 @@ class _LoginPageState extends ConsumerState<LoginPage> {
@override
Widget build(BuildContext context) {
final loading = ref.watch(authControllerProvider).isLoading;
final screenH = MediaQuery.of(context).size.height;
return Scaffold(
backgroundColor: AppTheme.background,
appBar: AppBar(
backgroundColor: Colors.transparent,
elevation: 0,
iconTheme: const IconThemeData(color: AppTheme.textPrimary),
title: const Text(
'Iniciar sesión',
style: TextStyle(color: AppTheme.textPrimary, fontSize: 16),
),
),
body: SafeArea(
child: SingleChildScrollView(
padding: const EdgeInsets.all(24),
child: Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(height: 8),
body: Column(
children: [
// ── Cabecera verde con mascota ─────────────────────────────
_GreenHeader(height: screenH * 0.38),
// ── Encabezado ──────────────────────────────────────────
Row(
// ── Formulario ─────────────────────────────────────────────
Expanded(
child: SingleChildScrollView(
padding: const EdgeInsets.fromLTRB(24, 28, 24, 24),
child: Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
width: 48,
height: 48,
decoration: BoxDecoration(
color: AppTheme.primaryLight,
borderRadius: BorderRadius.circular(AppTheme.radiusMd),
),
child: const Icon(
Icons.delete_outline_rounded,
color: AppTheme.primary,
size: 26,
AppFormField(
label: 'Correo electrónico',
hint: 'tu@correo.com',
controller: _emailCtrl,
keyboardType: TextInputType.emailAddress,
validator: (v) => (v == null || v.trim().isEmpty)
? 'Ingresa tu correo'
: null,
),
const SizedBox(height: 16),
AppFormField(
label: 'Contraseña',
hint: '••••••••',
controller: _passCtrl,
obscureText: _obscurePass,
validator: (v) => (v == null || v.length < 6)
? 'Mínimo 6 caracteres'
: null,
suffix: IconButton(
icon: Icon(
_obscurePass
? Icons.visibility_outlined
: Icons.visibility_off_outlined,
size: 18,
color: AppTheme.textSecondary,
),
onPressed: () =>
setState(() => _obscurePass = !_obscurePass),
),
),
const SizedBox(width: 14),
const Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Recolecta',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w700,
color: AppTheme.textPrimary,
),
const SizedBox(height: 8),
Align(
alignment: Alignment.centerRight,
child: TextButton(
onPressed: () {},
style: TextButton.styleFrom(
foregroundColor: AppTheme.primary,
padding: EdgeInsets.zero,
minimumSize: Size.zero,
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
),
Text(
'Bienvenido de nuevo',
style: TextStyle(
fontSize: 13,
color: AppTheme.textSecondary,
),
child: const Text(
'¿Olvidaste tu contraseña?',
style: TextStyle(fontSize: 13),
),
],
),
),
const SizedBox(height: 24),
SizedBox(
height: 52,
child: ElevatedButton(
onPressed: loading ? null : _submit,
child: AnimatedSwitcher(
duration: const Duration(milliseconds: 200),
child: loading
? const SizedBox(
key: ValueKey('loading'),
width: 20,
height: 20,
child: CircularProgressIndicator(
strokeWidth: 2,
color: Colors.white,
),
)
: const Text(
'Ingresar',
key: ValueKey('text'),
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
),
),
),
),
),
const SizedBox(height: 32),
Center(
child: Wrap(
alignment: WrapAlignment.center,
children: [
const Text(
'¿No tienes cuenta? ',
style: TextStyle(
fontSize: 13,
color: AppTheme.textSecondary,
),
),
GestureDetector(
onTap: () => context.go('/register'),
child: const Text(
'Regístrate',
style: TextStyle(
fontSize: 13,
fontWeight: FontWeight.w600,
color: AppTheme.primary,
),
),
),
],
),
),
],
),
),
),
),
],
),
);
}
}
const SizedBox(height: 32),
// ── Cabecera con gradiente verde y mascota ───────────────────────────────────
// ── Formulario ──────────────────────────────────────────
AppFormField(
label: 'Correo electrónico',
hint: 'tu@correo.com',
controller: _emailCtrl,
keyboardType: TextInputType.emailAddress,
validator: (v) => (v == null || v.trim().isEmpty)
? 'Ingresa tu correo'
: null,
),
const SizedBox(height: 16),
AppFormField(
label: 'Contraseña',
hint: '••••••••',
controller: _passCtrl,
obscureText: _obscurePass,
validator: (v) => (v == null || v.length < 6)
? 'Mínimo 6 caracteres'
: null,
suffix: IconButton(
icon: Icon(
_obscurePass
? Icons.visibility_outlined
: Icons.visibility_off_outlined,
size: 18,
color: AppTheme.textSecondary,
),
onPressed: () =>
setState(() => _obscurePass = !_obscurePass),
),
),
class _GreenHeader extends StatelessWidget {
final double height;
const _GreenHeader({required this.height});
const SizedBox(height: 10),
Align(
alignment: Alignment.centerRight,
child: TextButton(
onPressed: () {},
style: TextButton.styleFrom(
foregroundColor: AppTheme.primary,
),
child: const Text(
'¿Olvidaste tu contraseña?',
style: TextStyle(fontSize: 13),
@override
Widget build(BuildContext context) {
return ClipPath(
clipper: _WaveClipper(),
child: Container(
height: height,
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
stops: [0.0, 0.6, 1.0],
colors: [Color(0xFF0A4A38), Color(0xFF0F6E56), Color(0xFF1D9E75)],
),
),
child: SafeArea(
bottom: false,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 24),
child: SingleChildScrollView(
physics: const NeverScrollableScrollPhysics(),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const SizedBox(height: 8),
const VideoMascot(size: 108),
const SizedBox(height: 16),
const Text(
'RecolectApp',
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.w800,
color: Colors.white,
letterSpacing: -0.8,
),
),
),
const SizedBox(height: 24),
// ── Botón ───────────────────────────────────────────────
SizedBox(
width: double.infinity,
height: 52,
child: ElevatedButton(
onPressed: loading ? null : _submit,
child: AnimatedSwitcher(
duration: const Duration(milliseconds: 200),
child: loading
? const SizedBox(
key: ValueKey('loading'),
width: 20,
height: 20,
child: CircularProgressIndicator(
strokeWidth: 2,
color: Colors.white,
),
)
: const Text('Ingresar', key: ValueKey('text')),
const SizedBox(height: 4),
Text(
'Bienvenido de nuevo',
style: TextStyle(
fontSize: 14,
color: Colors.white.withValues(alpha: 0.82),
fontWeight: FontWeight.w400,
),
),
),
const SizedBox(height: 36),
// ── Crear cuenta ────────────────────────────────────────
Center(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Text(
'¿No tienes cuenta? ',
style: TextStyle(
fontSize: 13,
color: AppTheme.textSecondary,
),
),
GestureDetector(
onTap: () => context.go('/register'),
child: const Text(
'Regístrate',
style: TextStyle(
fontSize: 13,
fontWeight: FontWeight.w600,
color: AppTheme.primary,
),
),
),
],
),
),
],
const SizedBox(height: 28),
],
),
),
),
),
@@ -244,3 +258,29 @@ class _LoginPageState extends ConsumerState<LoginPage> {
);
}
}
class _WaveClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
final path = Path();
path.lineTo(0, size.height - 36);
path.quadraticBezierTo(
size.width * 0.25,
size.height,
size.width * 0.5,
size.height - 18,
);
path.quadraticBezierTo(
size.width * 0.75,
size.height - 36,
size.width,
size.height - 10,
);
path.lineTo(size.width, 0);
path.close();
return path;
}
@override
bool shouldReclip(_WaveClipper old) => false;
}