onlinces/hackathon-innovaflow5.0-cdfb08fa1603498d898c075544e57191
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

simulacion de estados y flujo de notificacion, modificacion de estilos en todas las vistas

Browse Source
This commit is contained in:
shinra32
2026-05-23 07:08:49 -06:00
parent ca076607c7
commit 92f570294a
43 changed files with 4335 additions and 2035 deletions
Download Patch File Download Diff File Expand all files Collapse all files

368
recolecta_app/lib/features/alerts/alerts_screen.dart
View File

@@ -1,218 +1,65 @@
import 'package:flutter/material.dart';
import '../../core/theme/app_theme.dart';
import '../../core/models/ui_models.dart';
import '../../core/widgets/app_widgets.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
class AlertsScreen extends StatefulWidget {
import '../../core/theme/app_theme.dart';
import 'alerts_provider.dart';
class AlertsScreen extends ConsumerWidget {
const AlertsScreen({super.key});
@override
State<AlertsScreen> createState() => _AlertsScreenState();
}
Widget build(BuildContext context, WidgetRef ref) {
final alerts = ref.watch(alertsProvider);
class _AlertsScreenState extends State<AlertsScreen> {
final UIAlertaModel _alertaActiva = UIAlertaModel(
id: 'alerta-001',
tipo: TipoAlerta.cercana,
distanciaMetros: 180,
fecha: DateTime.now(),
direccionCasa: 'Av. Insurgentes 245',
leida: false,
);
final List<UIAlertaModel> _historial = [
UIAlertaModel(
id: 'h-001',
tipo: TipoAlerta.cercana,
distanciaMetros: 200,
fecha: DateTime.now().subtract(const Duration(hours: 1)),
direccionCasa: 'Av. Insurgentes 245',
leida: true,
),
UIAlertaModel(
id: 'h-002',
tipo: TipoAlerta.cercana,
distanciaMetros: 200,
fecha: DateTime.now().subtract(const Duration(days: 2, hours: 2)),
direccionCasa: 'Av. Insurgentes 245',
leida: true,
),
UIAlertaModel(
id: 'h-003',
tipo: TipoAlerta.cercana,
distanciaMetros: 200,
fecha: DateTime.now().subtract(
const Duration(days: 4, hours: 1, minutes: 30)),
direccionCasa: 'Av. Insurgentes 245',
leida: true,
),
UIAlertaModel(
id: 'h-004',
tipo: TipoAlerta.cercana,
distanciaMetros: 200,
fecha: DateTime.now().subtract(const Duration(days: 7, hours: 3)),
direccionCasa: 'Av. Insurgentes 245',
leida: true,
),
];
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: AppTheme.background,
appBar: AppBar(
title: const Text('Alertas'),
title: const Text('Mis Alertas'),
actions: [
TextButton(
onPressed: () {},
child: const Text('Limpiar',
style: TextStyle(color: Colors.white, fontSize: 13)),
),
if (alerts.isNotEmpty)
IconButton(
icon: const Icon(Icons.delete_sweep_outlined),
tooltip: 'Limpiar historial',
onPressed: () => ref.read(alertsProvider.notifier).clearAll(),
),
],
),
body: RefreshIndicator(
color: AppTheme.primary,
onRefresh: () async =>
Future.delayed(const Duration(milliseconds: 800)),
child: ListView(
padding: const EdgeInsets.all(16),
children: [
_AlertaActivaCard(alerta: _alertaActiva),
const SizedBox(height: 20),
if (_historial.isEmpty)
const _EmptyState()
else ...[
const AppSectionTitle(title: 'Historial de alertas'),
..._historial.map((a) => _AlertaHistorialItem(alerta: a)),
],
],
),
),
body: alerts.isEmpty
? _buildEmptyState()
: ListView.separated(
padding: const EdgeInsets.all(16),
itemCount: alerts.length,
separatorBuilder: (_, __) => const SizedBox(height: 12),
itemBuilder: (context, index) {
return _AlertCard(alert: alerts[index]);
},
),
);
}
}
// ── Alerta activa ─────────────────────────────────────────────────────────────
class _AlertaActivaCard extends StatelessWidget {
final UIAlertaModel alerta;
const _AlertaActivaCard({required this.alerta});
@override
Widget build(BuildContext context) {
final progreso = (1 - (alerta.distanciaMetros / 400)).clamp(0.0, 1.0);
return Container(
padding: const EdgeInsets.all(18),
decoration: BoxDecoration(
color: AppTheme.primaryLight,
borderRadius: BorderRadius.circular(AppTheme.radiusLg),
border: Border.all(color: AppTheme.primaryMid),
boxShadow: AppTheme.softShadow,
),
Widget _buildEmptyState() {
return const Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
children: [
Container(
width: 40,
height: 40,
decoration: BoxDecoration(
color: AppTheme.primary,
borderRadius: BorderRadius.circular(12),
),
child: const Icon(Icons.notifications_active,
color: Colors.white, size: 22),
),
const SizedBox(width: 12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text('¡El camión está cerca!',
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w700,
color: AppTheme.primaryDark)),
Text(alerta.fechaFormateada,
style: const TextStyle(
fontSize: 12, color: AppTheme.primary)),
],
),
),
Container(
padding:
const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
decoration: BoxDecoration(
color: AppTheme.primary,
borderRadius: BorderRadius.circular(20),
),
child: const Text('Ahora',
style: TextStyle(
fontSize: 11,
fontWeight: FontWeight.w600,
color: Colors.white)),
),
],
Icon(
Icons.notifications_off_outlined,
size: 64,
color: AppTheme.textSecondary,
),
const SizedBox(height: 16),
const Text('El camión se encuentra a',
style: TextStyle(fontSize: 13, color: AppTheme.primaryDark)),
Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
alerta.distanciaTexto,
style: const TextStyle(
fontSize: 36,
fontWeight: FontWeight.w700,
color: AppTheme.primary,
height: 1.1),
),
const SizedBox(width: 8),
Padding(
padding: const EdgeInsets.only(bottom: 6),
child: Text('de tu casa en ${alerta.direccionCasa}',
style: const TextStyle(
fontSize: 13, color: AppTheme.primaryDark)),
),
],
),
const SizedBox(height: 14),
Row(
children: [
const Text('Llegada estimada:',
style:
TextStyle(fontSize: 12, color: AppTheme.primaryDark)),
const SizedBox(width: 6),
Text(alerta.tiempoEstimadoTexto,
style: const TextStyle(
fontSize: 13,
fontWeight: FontWeight.w700,
color: AppTheme.primary)),
],
),
const SizedBox(height: 8),
ClipRRect(
borderRadius: BorderRadius.circular(4),
child: LinearProgressIndicator(
value: progreso,
backgroundColor:
AppTheme.primaryMid.withValues(alpha: 0.4),
valueColor:
const AlwaysStoppedAnimation<Color>(AppTheme.primary),
minHeight: 7,
SizedBox(height: 16),
Text(
'No tienes notificaciones nuevas',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: AppTheme.textPrimary,
),
),
const SizedBox(height: 4),
const Row(
children: [
Text('Lejos',
style: TextStyle(fontSize: 10, color: AppTheme.primary)),
Spacer(),
Text('Tu casa',
style: TextStyle(fontSize: 10, color: AppTheme.primary)),
],
SizedBox(height: 8),
Text(
'Aquí aparecerán los avisos del camión.',
style: TextStyle(fontSize: 14, color: AppTheme.textSecondary),
),
],
),
@@ -220,108 +67,77 @@ class _AlertaActivaCard extends StatelessWidget {
}
}
// ── Ítem de historial ─────────────────────────────────────────────────────────
class _AlertaHistorialItem extends StatelessWidget {
final UIAlertaModel alerta;
const _AlertaHistorialItem({required this.alerta});
class _AlertCard extends StatelessWidget {
final AppAlert alert;
const _AlertCard({required this.alert});
String _timeAgo(DateTime date) {
final diff = DateTime.now().difference(date);
if (diff.inMinutes < 1) return 'Justo ahora';
if (diff.inHours < 1) return 'Hace ${diff.inMinutes} min';
if (diff.inDays < 1) return 'Hace ${diff.inHours} h';
return 'Hace ${diff.inDays} d';
}
@override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.only(bottom: 8),
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 12),
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: AppTheme.surface,
borderRadius: BorderRadius.circular(AppTheme.radiusMd),
borderRadius: BorderRadius.circular(AppTheme.radiusLg),
border: Border.all(color: AppTheme.border, width: 0.5),
boxShadow: AppTheme.softShadow,
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 36,
height: 36,
decoration: BoxDecoration(
color: AppTheme.background,
borderRadius: BorderRadius.circular(10),
padding: const EdgeInsets.all(10),
decoration: const BoxDecoration(
color: AppTheme.primaryLight,
shape: BoxShape.circle,
),
child: const Icon(
Icons.notifications_active_outlined,
color: AppTheme.primary,
size: 24,
),
child: const Icon(Icons.notifications_outlined,
color: AppTheme.textSecondary, size: 18),
),
const SizedBox(width: 12),
const SizedBox(width: 14),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Camión a ${alerta.distanciaTexto}',
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
color: AppTheme.textPrimary)),
const SizedBox(height: 2),
Text(alerta.fechaFormateada,
style: const TextStyle(
fontSize: 12, color: AppTheme.textSecondary)),
Text(
alert.title,
style: const TextStyle(
fontSize: 15,
fontWeight: FontWeight.w700,
color: AppTheme.primaryDark,
),
),
const SizedBox(height: 4),
Text(
alert.body,
style: const TextStyle(
fontSize: 14,
color: AppTheme.textPrimary,
height: 1.4,
),
),
const SizedBox(height: 8),
Text(
_timeAgo(alert.timestamp),
style: const TextStyle(
fontSize: 12,
color: AppTheme.textHint,
),
),
],
),
),
_EtiquetaDia(texto: alerta.etiquetaFecha),
],
),
);
}
}
class _EtiquetaDia extends StatelessWidget {
final String texto;
const _EtiquetaDia({required this.texto});
@override
Widget build(BuildContext context) {
final esHoy = texto == 'Hoy';
return Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
decoration: BoxDecoration(
color: esHoy ? AppTheme.primaryLight : AppTheme.background,
borderRadius: BorderRadius.circular(20),
),
child: Text(
texto,
style: TextStyle(
fontSize: 11,
fontWeight: FontWeight.w600,
color: esHoy ? AppTheme.primaryDark : AppTheme.textSecondary,
),
),
);
}
}
// ── Sin alertas ───────────────────────────────────────────────────────────────
class _EmptyState extends StatelessWidget {
const _EmptyState();
@override
Widget build(BuildContext context) {
return const Padding(
padding: EdgeInsets.symmetric(vertical: 60),
child: Column(
children: [
Icon(Icons.notifications_outlined,
color: AppTheme.primary, size: 48),
SizedBox(height: 16),
Text('Sin alertas por ahora',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: AppTheme.textPrimary)),
SizedBox(height: 6),
Text(
'Te notificaremos cuando el camión\nesté cerca de tu casa.',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 13, color: AppTheme.textSecondary, height: 1.5),
),
],
),
);