inicio de estrcutura
This commit is contained in:
hack_23031087_872edb
520
aplicacion_hack/lib/screens/home_screen.dart
Normal file
520
aplicacion_hack/lib/screens/home_screen.dart
Normal file
@@ -0,0 +1,520 @@
|
||||
// ================================================================
|
||||
// lib/screens/home_screen.dart
|
||||
// Pantalla Principal — Visualización de ETA y Mensajería Preventiva
|
||||
// ================================================================
|
||||
//
|
||||
// PROPÓSITO:
|
||||
// Mostrar de forma CLARA y VISUAL el estado del camión de
|
||||
// recolección y el mensaje preventivo correspondiente.
|
||||
//
|
||||
// FLUJO:
|
||||
// 1. Recibe usuario_id desde LoginScreen (Navigator arguments)
|
||||
// 2. Llama a ApiService.obtenerETA() en initState
|
||||
// 3. Muestra el mensaje preventivo con diseño de alto impacto
|
||||
// 4. Se refresca cada 60 segundos para simular actualización real
|
||||
// 5. Registra el FCM token si Firebase está disponible
|
||||
//
|
||||
// DECISIÓN DE DISEÑO:
|
||||
// El texto del mensaje preventivo es ENORME y ocupa el centro
|
||||
// de la pantalla. En una app real de alertas críticas, la
|
||||
// claridad visual es más importante que la estética.
|
||||
// ================================================================
|
||||
|
||||
import 'dart:async';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:shared_preferences/shared_preferences.dart';
|
||||
// Descomenta cuando Firebase esté configurado:
|
||||
// import 'package:firebase_messaging/firebase_messaging.dart';
|
||||
import '../services/api_service.dart';
|
||||
|
||||
class HomeScreen extends StatefulWidget {
|
||||
const HomeScreen({super.key});
|
||||
|
||||
@override
|
||||
State<HomeScreen> createState() => _HomeScreenState();
|
||||
}
|
||||
|
||||
class _HomeScreenState extends State<HomeScreen>
|
||||
with TickerProviderStateMixin {
|
||||
// ----------------------------------------------------------------
|
||||
// ESTADO LOCAL
|
||||
// ----------------------------------------------------------------
|
||||
int? _usuarioId;
|
||||
ETAInfo? _etaInfo;
|
||||
bool _cargando = true;
|
||||
String? _error;
|
||||
|
||||
// Timer para auto-refresh cada 60 segundos
|
||||
Timer? _refreshTimer;
|
||||
|
||||
// Controlador de animación para el pulso del círculo de ETA
|
||||
late AnimationController _pulseController;
|
||||
late Animation<double> _pulseAnimation;
|
||||
|
||||
final ApiService _apiService = ApiService();
|
||||
|
||||
// ----------------------------------------------------------------
|
||||
// LIFECYCLE
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
|
||||
// Configurar animación de pulso (escala entre 1.0 y 1.05)
|
||||
// Da vida a la UI y atrae atención al ETA — importante para demos
|
||||
_pulseController = AnimationController(
|
||||
vsync: this,
|
||||
duration: const Duration(seconds: 2),
|
||||
)..repeat(reverse: true);
|
||||
|
||||
_pulseAnimation = Tween<double>(begin: 1.0, end: 1.05).animate(
|
||||
CurvedAnimation(parent: _pulseController, curve: Curves.easeInOut),
|
||||
);
|
||||
|
||||
// didChangeDependencies se llama después de initState y tiene
|
||||
// acceso al context (necesario para Navigator.arguments).
|
||||
// Por eso la carga de datos inicial va en didChangeDependencies.
|
||||
}
|
||||
|
||||
@override
|
||||
void didChangeDependencies() {
|
||||
super.didChangeDependencies();
|
||||
|
||||
// Obtener el usuario_id pasado desde LoginScreen
|
||||
// Solo lo hacemos una vez (cuando _usuarioId aún es null)
|
||||
if (_usuarioId == null) {
|
||||
final args = ModalRoute.of(context)?.settings.arguments;
|
||||
if (args is int) {
|
||||
_usuarioId = args;
|
||||
_cargarETA();
|
||||
_iniciarAutoRefresh();
|
||||
// _registrarFCMToken(); // Activar cuando Firebase esté listo
|
||||
} else {
|
||||
// Fallback: leer de shared_preferences si no viene por argumento
|
||||
_cargarUsuarioDeStorage();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_pulseController.dispose();
|
||||
_refreshTimer?.cancel(); // MUY IMPORTANTE: cancelar timer para evitar leaks
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------
|
||||
// CARGAR USUARIO ID DESDE STORAGE (fallback)
|
||||
// ----------------------------------------------------------------
|
||||
Future<void> _cargarUsuarioDeStorage() async {
|
||||
final prefs = await SharedPreferences.getInstance();
|
||||
final id = prefs.getInt('usuario_id');
|
||||
if (id != null) {
|
||||
setState(() => _usuarioId = id);
|
||||
_cargarETA();
|
||||
_iniciarAutoRefresh();
|
||||
} else {
|
||||
// No hay sesión, volver al login
|
||||
if (mounted) {
|
||||
Navigator.pushReplacementNamed(context, '/');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------
|
||||
// CARGAR ETA DESDE EL BACKEND
|
||||
//
|
||||
// Centralizado aquí para poder llamarlo tanto en init como
|
||||
// en el auto-refresh y en el botón de recarga manual.
|
||||
// ----------------------------------------------------------------
|
||||
Future<void> _cargarETA() async {
|
||||
if (_usuarioId == null) return;
|
||||
|
||||
// Solo mostrar spinner en la carga inicial, no en refresh silencioso
|
||||
if (_etaInfo == null) {
|
||||
setState(() {
|
||||
_cargando = true;
|
||||
_error = null;
|
||||
});
|
||||
}
|
||||
|
||||
try {
|
||||
final eta = await _apiService.obtenerETA(_usuarioId!);
|
||||
if (mounted) {
|
||||
setState(() {
|
||||
_etaInfo = eta;
|
||||
_cargando = false;
|
||||
_error = null;
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
if (mounted) {
|
||||
setState(() {
|
||||
_cargando = false;
|
||||
_error = 'No se pudo conectar al servidor.\nVerifica que el backend esté corriendo.';
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------
|
||||
// AUTO-REFRESH CADA 60 SEGUNDOS
|
||||
//
|
||||
// Simula que el ETA se actualiza en tiempo real sin que el
|
||||
// usuario tenga que hacer pull-to-refresh manualmente.
|
||||
// En producción: usar WebSockets o Server-Sent Events.
|
||||
// ----------------------------------------------------------------
|
||||
void _iniciarAutoRefresh() {
|
||||
_refreshTimer = Timer.periodic(
|
||||
const Duration(seconds: 60),
|
||||
(_) => _cargarETA(),
|
||||
);
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------
|
||||
// REGISTRAR FCM TOKEN EN EL BACKEND
|
||||
//
|
||||
// Obtiene el token único de este dispositivo de Firebase y lo
|
||||
// manda al backend para poder recibir notificaciones push.
|
||||
// DESCOMENTA cuando tengas Firebase configurado.
|
||||
// ----------------------------------------------------------------
|
||||
// Future<void> _registrarFCMToken() async {
|
||||
// try {
|
||||
// final messaging = FirebaseMessaging.instance;
|
||||
//
|
||||
// // Pedir permisos de notificación al usuario (iOS requiere esto)
|
||||
// final settings = await messaging.requestPermission(
|
||||
// alert: true,
|
||||
// sound: true,
|
||||
// badge: true,
|
||||
// );
|
||||
//
|
||||
// if (settings.authorizationStatus == AuthorizationStatus.authorized) {
|
||||
// final token = await messaging.getToken();
|
||||
// if (token != null && _usuarioId != null) {
|
||||
// await _apiService.registrarFcmToken(_usuarioId!, token);
|
||||
// debugPrint('✅ FCM Token registrado: ${token.substring(0, 20)}...');
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// // Escuchar notificaciones cuando la app está en FOREGROUND
|
||||
// FirebaseMessaging.onMessage.listen((RemoteMessage message) {
|
||||
// if (message.notification != null && mounted) {
|
||||
// ScaffoldMessenger.of(context).showSnackBar(
|
||||
// SnackBar(
|
||||
// content: Text('🚛 ${message.notification!.body}'),
|
||||
// backgroundColor: Colors.green.shade700,
|
||||
// duration: const Duration(seconds: 5),
|
||||
// ),
|
||||
// );
|
||||
// // Refrescar ETA al recibir notificación
|
||||
// _cargarETA();
|
||||
// }
|
||||
// });
|
||||
// } catch (e) {
|
||||
// debugPrint('Error registrando FCM token: $e');
|
||||
// }
|
||||
// }
|
||||
|
||||
// ----------------------------------------------------------------
|
||||
// CERRAR SESIÓN
|
||||
// ----------------------------------------------------------------
|
||||
Future<void> _cerrarSesion() async {
|
||||
_refreshTimer?.cancel();
|
||||
final prefs = await SharedPreferences.getInstance();
|
||||
await prefs.clear();
|
||||
if (mounted) {
|
||||
Navigator.pushReplacementNamed(context, '/');
|
||||
}
|
||||
}
|
||||
|
||||
// ================================================================
|
||||
// HELPERS DE UI
|
||||
// ================================================================
|
||||
|
||||
// Determina el color del fondo según el ETA (urgencia visual)
|
||||
Color _colorSegunETA(int etaMinutos) {
|
||||
if (etaMinutos <= 5) return const Color(0xFFB71C1C); // Rojo: ¡URGENTE!
|
||||
if (etaMinutos <= 15) return const Color(0xFFF57F17); // Naranja: Pronto
|
||||
if (etaMinutos <= 30) return const Color(0xFF1B5E20); // Verde: Con tiempo
|
||||
return const Color(0xFF1A237E); // Azul: Tranquilo
|
||||
}
|
||||
|
||||
// Emoji indicador de urgencia
|
||||
String _emojiSegunETA(int etaMinutos) {
|
||||
if (etaMinutos <= 5) return '🔴';
|
||||
if (etaMinutos <= 15) return '🟡';
|
||||
if (etaMinutos <= 30) return '🟢';
|
||||
return '🔵';
|
||||
}
|
||||
|
||||
// ================================================================
|
||||
// BUILD PRINCIPAL
|
||||
// ================================================================
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 800),
|
||||
// El fondo cambia de color según la urgencia del ETA
|
||||
decoration: BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
colors: _etaInfo != null
|
||||
? [
|
||||
_colorSegunETA(_etaInfo!.etaMinutos),
|
||||
_colorSegunETA(_etaInfo!.etaMinutos).withOpacity(0.7),
|
||||
]
|
||||
: [const Color(0xFF2E7D32), const Color(0xFF1B5E20)],
|
||||
),
|
||||
),
|
||||
child: SafeArea(
|
||||
child: _buildContenido(),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildContenido() {
|
||||
// Estado: Cargando
|
||||
if (_cargando) {
|
||||
return const Center(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
CircularProgressIndicator(color: Colors.white),
|
||||
SizedBox(height: 16),
|
||||
Text(
|
||||
'Consultando estado del camión...',
|
||||
style: TextStyle(color: Colors.white70, fontSize: 16),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// Estado: Error
|
||||
if (_error != null) {
|
||||
return Center(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(32),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
const Icon(Icons.wifi_off_rounded, size: 80, color: Colors.white54),
|
||||
const SizedBox(height: 16),
|
||||
Text(
|
||||
_error!,
|
||||
textAlign: TextAlign.center,
|
||||
style: const TextStyle(color: Colors.white, fontSize: 18),
|
||||
),
|
||||
const SizedBox(height: 32),
|
||||
ElevatedButton.icon(
|
||||
onPressed: _cargarETA,
|
||||
icon: const Icon(Icons.refresh),
|
||||
label: const Text('Reintentar'),
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: Colors.white,
|
||||
foregroundColor: Colors.red.shade700,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// Estado: Con datos - UI principal
|
||||
return _buildUIConDatos();
|
||||
}
|
||||
|
||||
// ----------------------------------------------------------------
|
||||
// UI PRINCIPAL CON DATOS DE ETA
|
||||
//
|
||||
// DECISIÓN DE DISEÑO: El mensaje preventivo ocupa 60% de la
|
||||
// pantalla porque es lo más importante. El usuario debe verlo
|
||||
// de un vistazo, sin lentes y desde lejos.
|
||||
// ----------------------------------------------------------------
|
||||
Widget _buildUIConDatos() {
|
||||
if (_etaInfo == null) return const SizedBox.shrink();
|
||||
final eta = _etaInfo!;
|
||||
|
||||
return Column(
|
||||
children: [
|
||||
// --------------------------------------------------------
|
||||
// HEADER: Barra superior con colonia y botón de logout
|
||||
// --------------------------------------------------------
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
// Colonia del usuario
|
||||
Row(
|
||||
children: [
|
||||
const Icon(Icons.location_on, color: Colors.white70, size: 18),
|
||||
const SizedBox(width: 4),
|
||||
Text(
|
||||
eta.colonia,
|
||||
style: const TextStyle(
|
||||
color: Colors.white,
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: 16,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
// Botón de logout
|
||||
IconButton(
|
||||
onPressed: _cerrarSesion,
|
||||
icon: const Icon(Icons.logout, color: Colors.white70),
|
||||
tooltip: 'Cerrar sesión',
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
const Spacer(flex: 1),
|
||||
|
||||
// --------------------------------------------------------
|
||||
// CENTRO: ETA Visual (el corazón de la pantalla)
|
||||
// ScaleTransition aplica la animación de pulso al círculo
|
||||
// --------------------------------------------------------
|
||||
ScaleTransition(
|
||||
scale: _pulseAnimation,
|
||||
child: Container(
|
||||
width: 220,
|
||||
height: 220,
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
color: Colors.white.withOpacity(0.15),
|
||||
border: Border.all(color: Colors.white, width: 3),
|
||||
),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Text(
|
||||
_emojiSegunETA(eta.etaMinutos),
|
||||
style: const TextStyle(fontSize: 48),
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
// Número de minutos — el dato más importante
|
||||
Text(
|
||||
'${eta.etaMinutos}',
|
||||
style: const TextStyle(
|
||||
fontSize: 64,
|
||||
fontWeight: FontWeight.w900,
|
||||
color: Colors.white,
|
||||
height: 1,
|
||||
),
|
||||
),
|
||||
const Text(
|
||||
'minutos',
|
||||
style: TextStyle(
|
||||
fontSize: 18,
|
||||
color: Colors.white70,
|
||||
fontWeight: FontWeight.w300,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
const SizedBox(height: 24),
|
||||
|
||||
// ETA en texto descriptivo
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 32),
|
||||
child: Text(
|
||||
eta.etaTexto,
|
||||
textAlign: TextAlign.center,
|
||||
style: const TextStyle(
|
||||
fontSize: 22,
|
||||
color: Colors.white,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
const SizedBox(height: 40),
|
||||
|
||||
// --------------------------------------------------------
|
||||
// MENSAJE PREVENTIVO — El núcleo del producto
|
||||
//
|
||||
// Este es el mensaje que el usuario DEBE leer. Enorme,
|
||||
// contrastado, en un card destacado. Sin distracciones.
|
||||
// --------------------------------------------------------
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 20),
|
||||
child: Container(
|
||||
width: double.infinity,
|
||||
padding: const EdgeInsets.symmetric(vertical: 28, horizontal: 24),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white,
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.2),
|
||||
blurRadius: 20,
|
||||
offset: const Offset(0, 8),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Text(
|
||||
// ¡ESTE ES EL MENSAJE PRINCIPAL DEL SISTEMA!
|
||||
// Viene del backend (campo mensaje_preventivo)
|
||||
// Ejemplos:
|
||||
// "⏰ Prepárate, el camión llega pronto. No saques tu basura aún."
|
||||
// "🚛 ¡El camión está muy cerca! Saca tu basura AHORA."
|
||||
eta.mensajePreventivo,
|
||||
textAlign: TextAlign.center,
|
||||
style: TextStyle(
|
||||
fontSize: 22,
|
||||
fontWeight: FontWeight.w800,
|
||||
color: _colorSegunETA(eta.etaMinutos),
|
||||
height: 1.3,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
const Spacer(flex: 2),
|
||||
|
||||
// --------------------------------------------------------
|
||||
// FOOTER: Botón de refresh manual + última actualización
|
||||
// --------------------------------------------------------
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(bottom: 32),
|
||||
child: Column(
|
||||
children: [
|
||||
// Indicador de auto-refresh
|
||||
const Text(
|
||||
'🔄 Se actualiza automáticamente cada minuto',
|
||||
style: TextStyle(color: Colors.white54, fontSize: 12),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
// Botón de refresh manual para demos / jueces impacientes
|
||||
OutlinedButton.icon(
|
||||
onPressed: _cargarETA,
|
||||
icon: const Icon(Icons.refresh, color: Colors.white),
|
||||
label: const Text(
|
||||
'Actualizar ahora',
|
||||
style: TextStyle(color: Colors.white),
|
||||
),
|
||||
style: OutlinedButton.styleFrom(
|
||||
side: const BorderSide(color: Colors.white54),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user