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

vistas mocckup

Browse Source
This commit is contained in:
shinra32
2026-05-22 20:47:35 -06:00
parent 3ef6a9220c
commit b4ee3e7b49
19 changed files with 0 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

812
viewsv1/views/lib/screens/admin_screen.dart Normal file
View File

@@ -0,0 +1,812 @@
import 'package:flutter/material.dart';
import '../theme/app_theme.dart';
import '../widgets/widgets.dart' as w;
enum TruckStatus { disponible, enRuta, mantenimiento, detenido }
extension TruckStatusX on TruckStatus {
String get label {
switch (this) {
case TruckStatus.disponible:
return 'Disponible';
case TruckStatus.enRuta:
return 'En ruta';
case TruckStatus.mantenimiento:
return 'Mantenimiento';
case TruckStatus.detenido:
return 'Detenido';
}
}
w.StatusBadge get badge {
switch (this) {
case TruckStatus.disponible:
return w.StatusBadge.green(label);
case TruckStatus.enRuta:
return w.StatusBadge.amber(label);
case TruckStatus.mantenimiento:
return w.StatusBadge.gray(label);
case TruckStatus.detenido:
return w.StatusBadge.gray(label);
}
}
}
class AdminUser {
final String id;
final String nombre;
final String apellido;
final String email;
final String telefono;
const AdminUser({
required this.id,
required this.nombre,
required this.apellido,
required this.email,
required this.telefono,
});
String get nombreCompleto => '$nombre $apellido';
String get iniciales =>
'${nombre.isNotEmpty ? nombre[0] : ''}${apellido.isNotEmpty ? apellido[0] : ''}'
.toUpperCase();
AdminUser copyWith({
String? nombre,
String? apellido,
String? email,
String? telefono,
}) {
return AdminUser(
id: id,
nombre: nombre ?? this.nombre,
apellido: apellido ?? this.apellido,
email: email ?? this.email,
telefono: telefono ?? this.telefono,
);
}
}
class AdminRoute {
final String id;
final String nombre;
final String zona;
final bool activa;
const AdminRoute({
required this.id,
required this.nombre,
required this.zona,
this.activa = true,
});
AdminRoute copyWith({
String? nombre,
String? zona,
bool? activa,
}) {
return AdminRoute(
id: id,
nombre: nombre ?? this.nombre,
zona: zona ?? this.zona,
activa: activa ?? this.activa,
);
}
}
class AdminTruck {
final String id;
final String placas;
final String modelo;
final String conductor;
final TruckStatus status;
final String rutaId;
const AdminTruck({
required this.id,
required this.placas,
required this.modelo,
required this.conductor,
required this.status,
required this.rutaId,
});
AdminTruck copyWith({
String? placas,
String? modelo,
String? conductor,
TruckStatus? status,
String? rutaId,
}) {
return AdminTruck(
id: id,
placas: placas ?? this.placas,
modelo: modelo ?? this.modelo,
conductor: conductor ?? this.conductor,
status: status ?? this.status,
rutaId: rutaId ?? this.rutaId,
);
}
}
class AdminScreen extends StatefulWidget {
const AdminScreen({super.key});
@override
State<AdminScreen> createState() => _AdminScreenState();
}
class _AdminScreenState extends State<AdminScreen>
with SingleTickerProviderStateMixin {
late final TabController _tabController;
int _activeTab = 0;
final List<AdminUser> _usuarios = [
const AdminUser(
id: 'user-01',
nombre: 'Laura',
apellido: 'Gómez',
email: 'laura.gomez@rutaverde.com',
telefono: '+52 461 987 1234',
),
const AdminUser(
id: 'user-02',
nombre: 'Miguel',
apellido: 'Sánchez',
email: 'miguel.sanchez@rutaverde.com',
telefono: '+52 461 123 7890',
),
];
final List<AdminRoute> _rutas = [
const AdminRoute(
id: 'ruta-01',
nombre: 'Ruta Norte',
zona: 'Zona Norte',
),
const AdminRoute(
id: 'ruta-02',
nombre: 'Ruta Sur',
zona: 'Zona Sur',
activa: false,
),
];
final List<AdminTruck> _camiones = [
const AdminTruck(
id: 'truck-01',
placas: 'ABC-1234',
modelo: 'Volvo FH',
conductor: 'Javier Pérez',
status: TruckStatus.enRuta,
rutaId: 'ruta-01',
),
const AdminTruck(
id: 'truck-02',
placas: 'DEF-5678',
modelo: 'Mercedes 1830',
conductor: 'Ana Díaz',
status: TruckStatus.disponible,
rutaId: 'ruta-02',
),
];
@override
void initState() {
super.initState();
_tabController = TabController(length: 3, vsync: this)
..addListener(() {
if (_tabController.indexIsChanging) return;
setState(() => _activeTab = _tabController.index);
});
}
@override
void dispose() {
_tabController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: AppTheme.background,
appBar: AppBar(
title: const Text('Panel de administración'),
bottom: TabBar(
controller: _tabController,
indicatorColor: AppTheme.primary,
tabs: const [
Tab(text: 'Usuarios'),
Tab(text: 'Rutas'),
Tab(text: 'Camiones'),
],
),
),
body: TabBarView(
controller: _tabController,
children: [
_buildUsersTab(),
_buildRoutesTab(),
_buildTrucksTab(),
],
),
floatingActionButton: FloatingActionButton.extended(
onPressed: () {
if (_activeTab == 0) {
_showUserForm();
} else if (_activeTab == 1) {
_showRouteForm();
} else {
_showTruckForm();
}
},
label: Text(_activeTab == 0
? 'Nuevo usuario'
: _activeTab == 1
? 'Nueva ruta'
: 'Nuevo camión'),
icon: const Icon(Icons.add),
),
);
}
Widget _buildUsersTab() {
if (_usuarios.isEmpty) {
return _buildEmptyState('No hay usuarios registrados aún.');
}
return ListView.separated(
padding: const EdgeInsets.all(16),
itemCount: _usuarios.length,
separatorBuilder: (_, __) => const SizedBox(height: 12),
itemBuilder: (context, index) {
final user = _usuarios[index];
return w.AppCard(
child: Row(
children: [
CircleAvatar(
backgroundColor: AppTheme.primaryLight,
foregroundColor: AppTheme.primary,
child: Text(user.iniciales),
),
const SizedBox(width: 14),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(user.nombreCompleto,
style: const TextStyle(
fontSize: 15, fontWeight: FontWeight.w600)),
const SizedBox(height: 4),
Text(user.email,
style: const TextStyle(
fontSize: 13, color: AppTheme.textSecondary)),
const SizedBox(height: 2),
Text(user.telefono, style: const TextStyle(fontSize: 13)),
],
),
),
IconButton(
icon: const Icon(Icons.edit_outlined, color: AppTheme.primary),
onPressed: () => _showUserForm(user: user),
),
IconButton(
icon: const Icon(Icons.delete_outline, color: AppTheme.danger),
onPressed: () => _confirmDeleteUser(user),
),
],
),
);
},
);
}
Widget _buildRoutesTab() {
if (_rutas.isEmpty) {
return _buildEmptyState('No hay rutas registradas aún.');
}
return ListView.separated(
padding: const EdgeInsets.all(16),
itemCount: _rutas.length,
separatorBuilder: (_, __) => const SizedBox(height: 12),
itemBuilder: (context, index) {
final ruta = _rutas[index];
return w.AppCard(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Expanded(
child: Text(ruta.nombre,
style: const TextStyle(
fontSize: 15, fontWeight: FontWeight.w600)),
),
Text(ruta.activa ? 'Activa' : 'Inactiva',
style: TextStyle(
fontSize: 13,
color: ruta.activa
? AppTheme.primary
: AppTheme.textSecondary)),
],
),
const SizedBox(height: 8),
Text('Zona ${ruta.zona}',
style: const TextStyle(
fontSize: 13, color: AppTheme.textSecondary)),
const SizedBox(height: 12),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
TextButton.icon(
onPressed: () => _showRouteForm(route: ruta),
icon: const Icon(Icons.edit_outlined, size: 18),
label: const Text('Editar'),
),
const SizedBox(width: 8),
TextButton.icon(
onPressed: () => _confirmDeleteRoute(ruta),
icon: const Icon(Icons.delete_outline, size: 18),
label: const Text('Eliminar'),
),
],
),
],
),
);
},
);
}
Widget _buildTrucksTab() {
if (_camiones.isEmpty) {
return _buildEmptyState('No hay camiones registrados aún.');
}
return ListView.separated(
padding: const EdgeInsets.all(16),
itemCount: _camiones.length,
separatorBuilder: (_, __) => const SizedBox(height: 12),
itemBuilder: (context, index) {
final truck = _camiones[index];
final route = _rutas.firstWhere(
(route) => route.id == truck.rutaId,
orElse: () =>
const AdminRoute(id: 'none', nombre: 'Sin ruta', zona: ''),
);
return w.AppCard(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Expanded(
child: Text(truck.placas,
style: const TextStyle(
fontSize: 15, fontWeight: FontWeight.w600)),
),
truck.status.badge,
],
),
const SizedBox(height: 8),
Text('${truck.modelo} · ${truck.conductor}',
style: const TextStyle(fontSize: 13)),
const SizedBox(height: 4),
Text('Ruta: ${route.nombre}',
style: const TextStyle(
fontSize: 13, color: AppTheme.textSecondary)),
const SizedBox(height: 12),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
TextButton.icon(
onPressed: () => _showTruckForm(truck: truck),
icon: const Icon(Icons.edit_outlined, size: 18),
label: const Text('Editar'),
),
const SizedBox(width: 8),
TextButton.icon(
onPressed: () => _confirmDeleteTruck(truck),
icon: const Icon(Icons.delete_outline, size: 18),
label: const Text('Eliminar'),
),
],
),
],
),
);
},
);
}
Widget _buildEmptyState(String message) {
return Center(
child: Padding(
padding: const EdgeInsets.all(24),
child: Text(message,
textAlign: TextAlign.center,
style: const TextStyle(
fontSize: 15,
color: AppTheme.textSecondary,
)),
),
);
}
void _confirmDeleteUser(AdminUser user) {
showDialog(
context: context,
builder: (ctx) => AlertDialog(
backgroundColor: AppTheme.surface,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(AppTheme.radiusLg)),
title: const Text('Eliminar usuario'),
content: const Text('¿Deseas eliminar este usuario?'),
actions: [
TextButton(
onPressed: () => Navigator.pop(ctx),
style:
TextButton.styleFrom(foregroundColor: AppTheme.textSecondary),
child: const Text('Cancelar'),
),
TextButton(
onPressed: () {
setState(
() => _usuarios.removeWhere((item) => item.id == user.id));
Navigator.pop(ctx);
},
style: TextButton.styleFrom(foregroundColor: AppTheme.danger),
child: const Text('Eliminar'),
),
],
),
);
}
void _confirmDeleteRoute(AdminRoute route) {
showDialog(
context: context,
builder: (ctx) => AlertDialog(
backgroundColor: AppTheme.surface,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(AppTheme.radiusLg)),
title: const Text('Eliminar ruta'),
content: const Text('¿Deseas eliminar esta ruta?'),
actions: [
TextButton(
onPressed: () => Navigator.pop(ctx),
style:
TextButton.styleFrom(foregroundColor: AppTheme.textSecondary),
child: const Text('Cancelar'),
),
TextButton(
onPressed: () {
setState(() => _rutas.removeWhere((item) => item.id == route.id));
Navigator.pop(ctx);
},
style: TextButton.styleFrom(foregroundColor: AppTheme.danger),
child: const Text('Eliminar'),
),
],
),
);
}
void _confirmDeleteTruck(AdminTruck truck) {
showDialog(
context: context,
builder: (ctx) => AlertDialog(
backgroundColor: AppTheme.surface,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(AppTheme.radiusLg)),
title: const Text('Eliminar camión'),
content: const Text('¿Deseas eliminar este camión?'),
actions: [
TextButton(
onPressed: () => Navigator.pop(ctx),
style:
TextButton.styleFrom(foregroundColor: AppTheme.textSecondary),
child: const Text('Cancelar'),
),
TextButton(
onPressed: () {
setState(
() => _camiones.removeWhere((item) => item.id == truck.id));
Navigator.pop(ctx);
},
style: TextButton.styleFrom(foregroundColor: AppTheme.danger),
child: const Text('Eliminar'),
),
],
),
);
}
void _showUserForm({AdminUser? user}) {
final formKey = GlobalKey<FormState>();
final nombreCtrl = TextEditingController(text: user?.nombre);
final apellidoCtrl = TextEditingController(text: user?.apellido);
final emailCtrl = TextEditingController(text: user?.email);
final telefonoCtrl = TextEditingController(text: user?.telefono);
showDialog(
context: context,
builder: (ctx) => AlertDialog(
backgroundColor: AppTheme.surface,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(AppTheme.radiusLg),
),
title: Text(user == null ? 'Nuevo usuario' : 'Editar usuario'),
content: Form(
key: formKey,
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
TextFormField(
controller: nombreCtrl,
decoration: const InputDecoration(labelText: 'Nombre'),
validator: (value) =>
value?.trim().isEmpty == true ? 'Requerido' : null,
),
TextFormField(
controller: apellidoCtrl,
decoration: const InputDecoration(labelText: 'Apellido'),
validator: (value) =>
value?.trim().isEmpty == true ? 'Requerido' : null,
),
TextFormField(
controller: emailCtrl,
decoration: const InputDecoration(labelText: 'Correo'),
keyboardType: TextInputType.emailAddress,
validator: (value) =>
value?.trim().isEmpty == true ? 'Requerido' : null,
),
TextFormField(
controller: telefonoCtrl,
decoration: const InputDecoration(labelText: 'Teléfono'),
keyboardType: TextInputType.phone,
),
],
),
),
),
actions: [
TextButton(
onPressed: () => Navigator.pop(ctx),
style:
TextButton.styleFrom(foregroundColor: AppTheme.textSecondary),
child: const Text('Cancelar'),
),
TextButton(
onPressed: () {
if (!formKey.currentState!.validate()) return;
final nuevo = AdminUser(
id: user?.id ?? 'user-${DateTime.now().millisecondsSinceEpoch}',
nombre: nombreCtrl.text.trim(),
apellido: apellidoCtrl.text.trim(),
email: emailCtrl.text.trim(),
telefono: telefonoCtrl.text.trim(),
);
setState(() {
if (user == null) {
_usuarios.add(nuevo);
} else {
final index =
_usuarios.indexWhere((item) => item.id == user.id);
if (index >= 0) _usuarios[index] = nuevo;
}
});
Navigator.pop(ctx);
},
child: Text(user == null ? 'Crear' : 'Guardar'),
),
],
),
);
}
void _showRouteForm({AdminRoute? route}) {
final formKey = GlobalKey<FormState>();
final nombreCtrl = TextEditingController(text: route?.nombre);
final zonaCtrl = TextEditingController(text: route?.zona);
bool activa = route?.activa ?? true;
showDialog(
context: context,
builder: (ctx) => AlertDialog(
backgroundColor: AppTheme.surface,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(AppTheme.radiusLg),
),
title: Text(route == null ? 'Nueva ruta' : 'Editar ruta'),
content: Form(
key: formKey,
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
TextFormField(
controller: nombreCtrl,
decoration:
const InputDecoration(labelText: 'Nombre de ruta'),
validator: (value) =>
value?.trim().isEmpty == true ? 'Requerido' : null,
),
TextFormField(
controller: zonaCtrl,
decoration: const InputDecoration(labelText: 'Zona'),
validator: (value) =>
value?.trim().isEmpty == true ? 'Requerido' : null,
),
const SizedBox(height: 12),
Row(
children: [
const Expanded(child: Text('Ruta activa')),
Switch.adaptive(
value: activa,
onChanged: (value) => setState(() {
activa = value;
}),
),
],
),
],
),
),
),
actions: [
TextButton(
onPressed: () => Navigator.pop(ctx),
style:
TextButton.styleFrom(foregroundColor: AppTheme.textSecondary),
child: const Text('Cancelar'),
),
TextButton(
onPressed: () {
if (!formKey.currentState!.validate()) return;
final nueva = AdminRoute(
id: route?.id ??
'ruta-${DateTime.now().millisecondsSinceEpoch}',
nombre: nombreCtrl.text.trim(),
zona: zonaCtrl.text.trim(),
activa: activa,
);
setState(() {
if (route == null) {
_rutas.add(nueva);
} else {
final index =
_rutas.indexWhere((item) => item.id == route.id);
if (index >= 0) _rutas[index] = nueva;
}
});
Navigator.pop(ctx);
},
child: Text(route == null ? 'Crear' : 'Guardar'),
),
],
),
);
}
void _showTruckForm({AdminTruck? truck}) {
final formKey = GlobalKey<FormState>();
final placasCtrl = TextEditingController(text: truck?.placas);
final modeloCtrl = TextEditingController(text: truck?.modelo);
final conductorCtrl = TextEditingController(text: truck?.conductor);
TruckStatus status = truck?.status ?? TruckStatus.disponible;
String selectedRuta =
truck?.rutaId ?? (_rutas.isNotEmpty ? _rutas.first.id : '');
showDialog(
context: context,
builder: (ctx) => AlertDialog(
backgroundColor: AppTheme.surface,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(AppTheme.radiusLg),
),
title: Text(truck == null ? 'Nuevo camión' : 'Editar camión'),
content: Form(
key: formKey,
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
TextFormField(
controller: placasCtrl,
decoration: const InputDecoration(labelText: 'Placas'),
validator: (value) =>
value?.trim().isEmpty == true ? 'Requerido' : null,
),
TextFormField(
controller: modeloCtrl,
decoration: const InputDecoration(labelText: 'Modelo'),
validator: (value) =>
value?.trim().isEmpty == true ? 'Requerido' : null,
),
TextFormField(
controller: conductorCtrl,
decoration: const InputDecoration(labelText: 'Conductor'),
validator: (value) =>
value?.trim().isEmpty == true ? 'Requerido' : null,
),
const SizedBox(height: 12),
DropdownButtonFormField<String>(
value: selectedRuta.isEmpty ? null : selectedRuta,
decoration: const InputDecoration(labelText: 'Ruta'),
items: _rutas
.map((ruta) => DropdownMenuItem(
value: ruta.id,
child: Text(ruta.nombre),
))
.toList(),
onChanged: (value) {
if (value != null) {
selectedRuta = value;
}
},
validator: (value) =>
value == null || value.isEmpty ? 'Requerido' : null,
),
const SizedBox(height: 12),
DropdownButtonFormField<TruckStatus>(
value: status,
decoration: const InputDecoration(labelText: 'Estatus'),
items: TruckStatus.values
.map((item) => DropdownMenuItem(
value: item,
child: Text(item.label),
))
.toList(),
onChanged: (value) {
if (value != null) {
status = value;
}
},
),
],
),
),
),
actions: [
TextButton(
onPressed: () => Navigator.pop(ctx),
style:
TextButton.styleFrom(foregroundColor: AppTheme.textSecondary),
child: const Text('Cancelar'),
),
TextButton(
onPressed: () {
if (!formKey.currentState!.validate()) return;
final nuevo = AdminTruck(
id: truck?.id ??
'truck-${DateTime.now().millisecondsSinceEpoch}',
placas: placasCtrl.text.trim(),
modelo: modeloCtrl.text.trim(),
conductor: conductorCtrl.text.trim(),
status: status,
rutaId: selectedRuta,
);
setState(() {
if (truck == null) {
_camiones.add(nuevo);
} else {
final index =
_camiones.indexWhere((item) => item.id == truck.id);
if (index >= 0) _camiones[index] = nuevo;
}
});
Navigator.pop(ctx);
},
child: Text(truck == null ? 'Crear' : 'Guardar'),
),
],
),
);
}
}

388
viewsv1/views/lib/screens/alerts_screen.dart Normal file
View File

@@ -0,0 +1,388 @@
import 'package:flutter/material.dart';
import '../theme/app_theme.dart';
import '../models/models.dart';
import '../widgets/widgets.dart' as w;
class AlertsScreen extends StatefulWidget {
const AlertsScreen({super.key});
@override
State<AlertsScreen> createState() => _AlertsScreenState();
}
class _AlertsScreenState extends State<AlertsScreen> {
// Alerta activa de ejemplo
final AlertaModel? _alertaActiva = AlertaModel(
id: 'alerta-001',
tipo: TipoAlerta.cercana,
distanciaMetros: 180,
fecha: DateTime.now(),
direccionCasa: 'Av. Insurgentes 245',
leida: false,
);
// Historial de ejemplo
final List<AlertaModel> _historial = [
AlertaModel(
id: 'h-001',
tipo: TipoAlerta.cercana,
distanciaMetros: 200,
fecha: DateTime.now().subtract(const Duration(hours: 1)),
direccionCasa: 'Av. Insurgentes 245',
leida: true,
),
AlertaModel(
id: 'h-002',
tipo: TipoAlerta.cercana,
distanciaMetros: 200,
fecha: DateTime.now().subtract(const Duration(days: 2, hours: 2)),
direccionCasa: 'Av. Insurgentes 245',
leida: true,
),
AlertaModel(
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,
),
AlertaModel(
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'),
actions: [
TextButton(
onPressed: () {},
child: const Text('Limpiar',
style: TextStyle(color: Colors.white, fontSize: 13)),
),
],
),
body: RefreshIndicator(
color: AppTheme.primary,
onRefresh: () async {
await Future.delayed(const Duration(milliseconds: 800));
},
child: ListView(
padding: const EdgeInsets.all(16),
children: [
// ── Alerta activa ───────────────────────────────────────────
if (_alertaActiva != null) ...[
_AlertaActivaCard(alerta: _alertaActiva!),
const SizedBox(height: 20),
],
// ── Historial ────────────────────────────────────────────────
if (_historial.isEmpty)
_EmptyState()
else ...[
w.SectionTitle(title: 'Historial de alertas'),
..._historial.map((a) => _AlertaHistorialItem(alerta: a)),
],
],
),
),
);
}
}
// ── Tarjeta de alerta activa ──────────────────────────────────────────────────
class _AlertaActivaCard extends StatelessWidget {
final AlertaModel 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,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Header
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)),
),
],
),
const SizedBox(height: 16),
// Distancia
Text(
'El camión se encuentra a',
style: const 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),
// Tiempo estimado
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),
// Barra de progreso
ClipRRect(
borderRadius: BorderRadius.circular(4),
child: LinearProgressIndicator(
value: progreso,
backgroundColor: AppTheme.primaryMid.withOpacity(0.4),
valueColor: const AlwaysStoppedAnimation<Color>(AppTheme.primary),
minHeight: 7,
),
),
const SizedBox(height: 4),
Row(
children: const [
Text('Lejos',
style: TextStyle(fontSize: 10, color: AppTheme.primary)),
Spacer(),
Text('Tu casa',
style: TextStyle(fontSize: 10, color: AppTheme.primary)),
],
),
const SizedBox(height: 14),
// Botón ver en mapa
GestureDetector(
onTap: () {},
child: Container(
width: double.infinity,
padding: const EdgeInsets.symmetric(vertical: 10),
decoration: BoxDecoration(
color: AppTheme.primary,
borderRadius: BorderRadius.circular(AppTheme.radiusSm),
),
child: const Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.map_outlined, color: Colors.white, size: 16),
SizedBox(width: 6),
Text('Ver en el mapa',
style: TextStyle(
fontSize: 13,
fontWeight: FontWeight.w600,
color: Colors.white)),
],
),
),
),
],
),
);
}
}
// ── Ítem de historial ─────────────────────────────────────────────────────────
class _AlertaHistorialItem extends StatelessWidget {
final AlertaModel alerta;
const _AlertaHistorialItem({required this.alerta});
@override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.only(bottom: 8),
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 12),
decoration: BoxDecoration(
color: AppTheme.surface,
borderRadius: BorderRadius.circular(AppTheme.radiusMd),
border: Border.all(color: AppTheme.border, width: 0.5),
boxShadow: AppTheme.softShadow,
),
child: Row(
children: [
Container(
width: 36,
height: 36,
decoration: BoxDecoration(
color: AppTheme.background,
borderRadius: BorderRadius.circular(10),
),
child: const Icon(Icons.notifications_outlined,
color: AppTheme.textSecondary, size: 18),
),
const SizedBox(width: 12),
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)),
],
),
),
_EtiquetaDia(texto: alerta.etiquetaFecha),
],
),
);
}
}
// ── Etiqueta de día ───────────────────────────────────────────────────────────
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,
),
),
);
}
}
// ── Estado vacío ──────────────────────────────────────────────────────────────
class _EmptyState extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 60),
child: Column(
children: [
Container(
width: 72,
height: 72,
decoration: BoxDecoration(
color: AppTheme.primaryLight,
shape: BoxShape.circle,
),
child: const Icon(Icons.notifications_outlined,
color: AppTheme.primary, size: 34),
),
const SizedBox(height: 16),
const Text('Sin alertas por ahora',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: AppTheme.textPrimary)),
const SizedBox(height: 6),
const 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),
),
],
),
);
}
}

495
viewsv1/views/lib/screens/house_screen.dart Normal file
View File

@@ -0,0 +1,495 @@
import 'package:flutter/material.dart';
import '../theme/app_theme.dart';
import '../models/models.dart';
import '../widgets/widgets.dart' as w;
class MyHouseScreen extends StatefulWidget {
const MyHouseScreen({super.key});
@override
State<MyHouseScreen> createState() => _MyHouseScreenState();
}
class _MyHouseScreenState extends State<MyHouseScreen> {
HouseModel _casa = const HouseModel(
id: 'casa-01',
calle: 'Av. Insurgentes 245',
colonia: 'Centro',
codigoPostal: '38000',
latitud: 20.5226,
longitud: -100.8191,
radioAlertaMetros: 200,
alertaCercana: true,
alertaMedia: false,
recordatorioDiario: true,
);
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: AppTheme.background,
appBar: AppBar(
title: const Text('Mi casa'),
actions: [
IconButton(
icon: const Icon(Icons.edit_outlined),
onPressed: () => _mostrarEditarDireccion(context),
tooltip: 'Editar dirección',
),
],
),
body: ListView(
padding: const EdgeInsets.all(16),
children: [
// ── Tarjeta de la casa ──────────────────────────────────────
_CasaCard(casa: _casa),
const SizedBox(height: 16),
// ── Configuración de radio ──────────────────────────────────
w.SectionTitle(title: 'Radio de alerta'),
_RadioAlertaCard(
radioActual: _casa.radioAlertaMetros,
onChanged: (v) => setState(() {
_casa = _casa.copyWith(radioAlertaMetros: v);
}),
),
const SizedBox(height: 16),
// ── Notificaciones ──────────────────────────────────────────
w.SectionTitle(title: 'Notificaciones'),
_NotificacionesCard(
casa: _casa,
onAlertaCercanaChanged: (v) =>
setState(() => _casa = _casa.copyWith(alertaCercana: v)),
onAlertaMediaChanged: (v) =>
setState(() => _casa = _casa.copyWith(alertaMedia: v)),
onRecordatorioChanged: (v) =>
setState(() => _casa = _casa.copyWith(recordatorioDiario: v)),
),
const SizedBox(height: 16),
// ── Horario estimado ────────────────────────────────────────
w.SectionTitle(title: 'Horario del camión'),
_HorarioCard(),
const SizedBox(height: 16),
// ── Agregar otra casa ───────────────────────────────────────
GestureDetector(
onTap: () => _mostrarAgregarCasa(context),
child: Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: AppTheme.surface,
borderRadius: BorderRadius.circular(AppTheme.radiusLg),
border: Border.all(
color: AppTheme.primaryMid,
width: 1,
style: BorderStyle.solid),
boxShadow: AppTheme.softShadow,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Icon(Icons.add_home_outlined,
color: AppTheme.primary, size: 20),
SizedBox(width: 8),
Text('Agregar otra dirección',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
color: AppTheme.primary)),
],
),
),
),
const SizedBox(height: 24),
],
),
);
}
void _mostrarEditarDireccion(BuildContext context) {
showModalBottomSheet(
context: context,
isScrollControlled: true,
backgroundColor: AppTheme.surface,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(
top: Radius.circular(AppTheme.radiusXl)),
),
builder: (_) => _EditarDireccionSheet(casa: _casa),
);
}
void _mostrarAgregarCasa(BuildContext context) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Funcionalidad próximamente disponible'),
behavior: SnackBarBehavior.floating,
backgroundColor: AppTheme.primary,
),
);
}
}
// ── Tarjeta principal de la casa ──────────────────────────────────────────────
class _CasaCard extends StatelessWidget {
final HouseModel casa;
const _CasaCard({required this.casa});
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: AppTheme.surface,
borderRadius: BorderRadius.circular(AppTheme.radiusLg),
border: Border.all(color: AppTheme.primaryMid, width: 0.8),
boxShadow: AppTheme.softShadow,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Header
Row(
children: [
Container(
width: 44,
height: 44,
decoration: BoxDecoration(
color: AppTheme.primaryLight,
borderRadius: BorderRadius.circular(12),
),
child: const Icon(Icons.home_outlined,
color: AppTheme.primary, size: 24),
),
const SizedBox(width: 12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(casa.alias,
style: const TextStyle(
fontSize: 15,
fontWeight: FontWeight.w600,
color: AppTheme.textPrimary)),
const SizedBox(height: 2),
w.StatusBadge.green(
casa.activa ? 'Activa' : 'Inactiva'),
],
),
),
IconButton(
icon: const Icon(Icons.more_vert,
color: AppTheme.textSecondary, size: 20),
onPressed: () {},
),
],
),
const SizedBox(height: 14),
const Divider(color: AppTheme.borderLight),
const SizedBox(height: 10),
// Detalles
_DetailRow(
icon: Icons.location_on_outlined,
text: casa.direccionCompleta,
),
const SizedBox(height: 8),
_DetailRow(
icon: Icons.my_location_outlined,
text:
'${casa.latitud.toStringAsFixed(4)}, ${casa.longitud.toStringAsFixed(4)}',
),
const SizedBox(height: 8),
_DetailRow(
icon: Icons.radar_outlined,
text: 'Alerta a ${casa.radioAlertaMetros} m de distancia',
),
],
),
);
}
}
class _DetailRow extends StatelessWidget {
final IconData icon;
final String text;
const _DetailRow({required this.icon, required this.text});
@override
Widget build(BuildContext context) {
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(icon, size: 15, color: AppTheme.textSecondary),
const SizedBox(width: 8),
Expanded(
child: Text(text,
style: const TextStyle(
fontSize: 13, color: AppTheme.textSecondary, height: 1.4)),
),
],
);
}
}
// ── Radio de alerta ───────────────────────────────────────────────────────────
class _RadioAlertaCard extends StatelessWidget {
final int radioActual;
final ValueChanged<int> onChanged;
const _RadioAlertaCard({required this.radioActual, required this.onChanged});
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: AppTheme.surface,
borderRadius: BorderRadius.circular(AppTheme.radiusLg),
border: Border.all(color: AppTheme.border, width: 0.5),
boxShadow: AppTheme.softShadow,
),
child: Column(
children: [200, 400, 600].map((dist) {
final selected = dist == radioActual;
return GestureDetector(
onTap: () => onChanged(dist),
child: Container(
margin: const EdgeInsets.only(bottom: 8),
padding:
const EdgeInsets.symmetric(horizontal: 14, vertical: 11),
decoration: BoxDecoration(
color: selected ? AppTheme.primaryLight : AppTheme.background,
borderRadius: BorderRadius.circular(AppTheme.radiusSm),
border: Border.all(
color: selected ? AppTheme.primary : AppTheme.border,
width: selected ? 1.5 : 0.5,
),
),
child: Row(
children: [
Icon(
selected
? Icons.radio_button_checked
: Icons.radio_button_unchecked,
color: selected ? AppTheme.primary : AppTheme.border,
size: 18,
),
const SizedBox(width: 10),
Expanded(
child: Text(
'$dist metros',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
color: selected
? AppTheme.primaryDark
: AppTheme.textPrimary,
),
),
),
if (selected)
Text(
dist == 200
? '~2-3 min'
: dist == 400
? '~4-5 min'
: '~6-8 min',
style: const TextStyle(
fontSize: 12,
color: AppTheme.primary,
fontWeight: FontWeight.w500),
),
],
),
),
);
}).toList(),
),
);
}
}
// ── Notificaciones ────────────────────────────────────────────────────────────
class _NotificacionesCard extends StatelessWidget {
final HouseModel casa;
final ValueChanged<bool> onAlertaCercanaChanged;
final ValueChanged<bool> onAlertaMediaChanged;
final ValueChanged<bool> onRecordatorioChanged;
const _NotificacionesCard({
required this.casa,
required this.onAlertaCercanaChanged,
required this.onAlertaMediaChanged,
required this.onRecordatorioChanged,
});
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
decoration: BoxDecoration(
color: AppTheme.surface,
borderRadius: BorderRadius.circular(AppTheme.radiusLg),
border: Border.all(color: AppTheme.border, width: 0.5),
boxShadow: AppTheme.softShadow,
),
child: Column(
children: [
w.LabeledSwitch(
label: 'Alerta cuando el camión esté cerca',
value: casa.alertaCercana,
onChanged: onAlertaCercanaChanged,
),
const Divider(height: 1, color: AppTheme.borderLight),
w.LabeledSwitch(
label: 'Alerta a distancia media',
value: casa.alertaMedia,
onChanged: onAlertaMediaChanged,
),
const Divider(height: 1, color: AppTheme.borderLight),
w.LabeledSwitch(
label: 'Recordatorio diario del horario',
value: casa.recordatorioDiario,
onChanged: onRecordatorioChanged,
),
],
),
);
}
}
// ── Horario del camión ────────────────────────────────────────────────────────
class _HorarioCard extends StatelessWidget {
final List<_HorarioDia> _dias = const [
_HorarioDia(dia: 'Lunes', hora: '8:00 – 10:00 a.m.', activo: true),
_HorarioDia(dia: 'Martes', hora: '8:00 – 10:00 a.m.', activo: true),
_HorarioDia(dia: 'Miércoles', hora: 'Sin servicio', activo: false),
_HorarioDia(dia: 'Jueves', hora: '8:00 – 10:00 a.m.', activo: true),
_HorarioDia(dia: 'Viernes', hora: '8:00 – 10:00 a.m.', activo: true),
_HorarioDia(dia: 'Sábado', hora: '9:00 – 11:00 a.m.', activo: true),
_HorarioDia(dia: 'Domingo', hora: 'Sin servicio', activo: false),
];
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: AppTheme.surface,
borderRadius: BorderRadius.circular(AppTheme.radiusLg),
border: Border.all(color: AppTheme.border, width: 0.5),
boxShadow: AppTheme.softShadow,
),
child: Column(
children: _dias.map((d) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 7),
child: Row(
children: [
Text(d.dia,
style: TextStyle(
fontSize: 13,
fontWeight: FontWeight.w500,
color: d.activo
? AppTheme.textPrimary
: AppTheme.textSecondary)),
const Spacer(),
Text(d.hora,
style: TextStyle(
fontSize: 13,
color: d.activo
? AppTheme.primary
: AppTheme.textSecondary)),
],
),
);
}).toList(),
),
);
}
}
class _HorarioDia {
final String dia;
final String hora;
final bool activo;
const _HorarioDia(
{required this.dia, required this.hora, required this.activo});
}
// ── Sheet de editar dirección ─────────────────────────────────────────────────
class _EditarDireccionSheet extends StatelessWidget {
final HouseModel casa;
const _EditarDireccionSheet({required this.casa});
@override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.only(
left: 24, right: 24, top: 24,
bottom: MediaQuery.of(context).viewInsets.bottom + 24,
),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Handle
Center(
child: Container(
width: 36, height: 4,
decoration: BoxDecoration(
color: AppTheme.border,
borderRadius: BorderRadius.circular(4),
),
),
),
const SizedBox(height: 20),
const Text('Editar dirección',
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.w700,
color: AppTheme.textPrimary)),
const SizedBox(height: 20),
w.FormField(
label: 'Calle y número', initialValue: casa.calle),
const SizedBox(height: 14),
Row(
children: [
Expanded(
flex: 3,
child: w.FormField(
label: 'Colonia', initialValue: casa.colonia),
),
const SizedBox(width: 12),
Expanded(
flex: 2,
child: w.FormField(
label: 'C.P.', initialValue: casa.codigoPostal),
),
],
),
const SizedBox(height: 24),
SizedBox(
width: double.infinity,
height: 50,
child: ElevatedButton(
onPressed: () => Navigator.pop(context),
child: const Text('Guardar cambios'),
),
),
],
),
);
}
}

244
viewsv1/views/lib/screens/login_screen.dart Normal file
View File

@@ -0,0 +1,244 @@
import 'package:flutter/material.dart';
import '../theme/app_theme.dart';
import '../widgets/widgets.dart' as w;
import 'main_shell.dart';
class LoginScreen extends StatefulWidget {
const LoginScreen({super.key});
@override
State<LoginScreen> createState() => _LoginScreenState();
}
class _LoginScreenState extends State<LoginScreen> {
final _formKey = GlobalKey<FormState>();
final _emailCtrl = TextEditingController();
final _passCtrl = TextEditingController();
bool _obscurePass = true;
bool _loading = false;
@override
void dispose() {
_emailCtrl.dispose();
_passCtrl.dispose();
super.dispose();
}
Future<void> _login() async {
if (!_formKey.currentState!.validate()) return;
setState(() => _loading = true);
await Future.delayed(const Duration(seconds: 1)); // Simular petición
if (!mounted) return;
setState(() => _loading = false);
Navigator.pushAndRemoveUntil(
context,
MaterialPageRoute(builder: (_) => const MainShell()),
(_) => false,
);
}
@override
Widget build(BuildContext context) {
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),
// ── Encabezado ─────────────────────────────────────────
Row(
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),
),
const SizedBox(width: 14),
const Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('RutaVerde',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w700,
color: AppTheme.textPrimary)),
Text('Bienvenido de nuevo',
style: TextStyle(
fontSize: 13,
color: AppTheme.textSecondary)),
],
),
],
),
const SizedBox(height: 32),
// ── Formulario ─────────────────────────────────────────
w.FormField(
label: 'Correo electrónico',
hint: 'tu@correo.com',
controller: _emailCtrl,
keyboardType: TextInputType.emailAddress,
),
const SizedBox(height: 16),
w.FormField(
label: 'Contraseña',
hint: '••••••••',
controller: _passCtrl,
obscureText: _obscurePass,
suffix: IconButton(
icon: Icon(
_obscurePass
? Icons.visibility_outlined
: Icons.visibility_off_outlined,
size: 18,
color: AppTheme.textSecondary,
),
onPressed: () =>
setState(() => _obscurePass = !_obscurePass),
),
),
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)),
),
),
const SizedBox(height: 24),
// ── Botón ingresar ──────────────────────────────────────
SizedBox(
width: double.infinity,
height: 52,
child: ElevatedButton(
onPressed: _loading ? null : _login,
child: _loading
? const SizedBox(
width: 20,
height: 20,
child: CircularProgressIndicator(
strokeWidth: 2, color: Colors.white),
)
: const Text('Ingresar'),
),
),
const SizedBox(height: 28),
// ── Divisor ─────────────────────────────────────────────
Row(
children: [
const Expanded(child: Divider(color: AppTheme.border)),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 12),
child: Text('o',
style: TextStyle(
fontSize: 13, color: AppTheme.textSecondary)),
),
const Expanded(child: Divider(color: AppTheme.border)),
],
),
const SizedBox(height: 20),
// ── Continuar con Google ────────────────────────────────
_SocialButton(
icon: Icons.g_mobiledata_rounded,
label: 'Continuar con Google',
onTap: () {},
),
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: () => Navigator.pop(context),
child: const Text('Regístrate',
style: TextStyle(
fontSize: 13,
fontWeight: FontWeight.w600,
color: AppTheme.primary)),
),
],
),
),
],
),
),
),
),
);
}
}
class _SocialButton extends StatelessWidget {
final IconData icon;
final String label;
final VoidCallback onTap;
const _SocialButton(
{required this.icon, required this.label, required this.onTap});
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onTap,
child: Container(
width: double.infinity,
padding: const EdgeInsets.symmetric(vertical: 13),
decoration: BoxDecoration(
color: AppTheme.surface,
borderRadius: BorderRadius.circular(AppTheme.radiusMd),
border: Border.all(color: AppTheme.border),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(icon, size: 22, color: AppTheme.textPrimary),
const SizedBox(width: 10),
Text(label,
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
color: AppTheme.textPrimary)),
],
),
),
);
}
}

38
viewsv1/views/lib/screens/main_shell.dart Normal file
View File

@@ -0,0 +1,38 @@
import 'package:flutter/material.dart';
import '../widgets/widgets.dart' as w;
import 'map_screen.dart';
import 'alerts_screen.dart';
import 'house_screen.dart';
import 'profile_screen.dart';
class MainShell extends StatefulWidget {
const MainShell({super.key});
@override
State<MainShell> createState() => _MainShellState();
}
class _MainShellState extends State<MainShell> {
int _currentIndex = 0;
final List<Widget> _screens = const [
MapScreen(),
AlertsScreen(),
MyHouseScreen(),
ProfileScreen(),
];
@override
Widget build(BuildContext context) {
return Scaffold(
body: IndexedStack(
index: _currentIndex,
children: _screens,
),
bottomNavigationBar: w.AppBottomNav(
currentIndex: _currentIndex,
onTap: (i) => setState(() => _currentIndex = i),
),
);
}
}

381
viewsv1/views/lib/screens/map_screen.dart Normal file
View File

@@ -0,0 +1,381 @@
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import '../theme/app_theme.dart';
import '../models/models.dart';
import '../widgets/widgets.dart' as w;
class MapScreen extends StatefulWidget {
const MapScreen({super.key});
@override
State<MapScreen> createState() => _MapScreenState();
}
class _MapScreenState extends State<MapScreen> {
final Completer<GoogleMapController> _mapController = Completer();
// Coordenadas de ejemplo — Celaya, Gto.
static const LatLng _casaPos = LatLng(20.5226, -100.8191);
static const LatLng _camionPos = LatLng(20.5255, -100.8220);
static const CameraPosition _camaraInicial = CameraPosition(
target: LatLng(20.5240, -100.8205),
zoom: 15.5,
);
// Datos de ejemplo del camión
final TruckLocation _camion = TruckLocation(
id: 'truck-01',
ruta: 'Ruta Norte',
latitud: _camionPos.latitude,
longitud: _camionPos.longitude,
ultimaActualizacion: DateTime.now().subtract(const Duration(seconds: 28)),
enServicio: true,
);
final HouseModel _casa = HouseModel(
id: 'casa-01',
calle: 'Av. Insurgentes 245',
colonia: 'Centro',
codigoPostal: '38000',
latitud: _casaPos.latitude,
longitud: _casaPos.longitude,
radioAlertaMetros: 200,
);
Set<Marker> _markers = {};
Set<Circle> _circles = {};
Timer? _refreshTimer;
// Distancia simulada (metros)
double get _distanciaMetros => 380;
int get _minutosEstimados => 8;
@override
void initState() {
super.initState();
_buildMapElements();
// Simular actualización de posición cada 30s
_refreshTimer = Timer.periodic(const Duration(seconds: 30), (_) {
if (mounted) setState(() {});
});
}
@override
void dispose() {
_refreshTimer?.cancel();
super.dispose();
}
void _buildMapElements() {
_markers = {
Marker(
markerId: const MarkerId('camion'),
position: LatLng(_camion.latitud, _camion.longitud),
icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueGreen),
infoWindow: InfoWindow(
title: 'Camión · ${_camion.ruta}',
snippet: _camion.tiempoActualizacion,
),
),
Marker(
markerId: const MarkerId('casa'),
position: LatLng(_casa.latitud, _casa.longitud),
icon: BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueBlue),
infoWindow: InfoWindow(title: _casa.alias, snippet: _casa.calle),
),
};
_circles = {
Circle(
circleId: const CircleId('radio-alerta'),
center: LatLng(_casa.latitud, _casa.longitud),
radius: _casa.radioAlertaMetros.toDouble(),
fillColor: AppTheme.blue.withOpacity(0.08),
strokeColor: AppTheme.blue.withOpacity(0.4),
strokeWidth: 1,
),
};
}
Future<void> _centrarMapa() async {
final controller = await _mapController.future;
await controller.animateCamera(
CameraUpdate.newCameraPosition(_camaraInicial),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: AppTheme.background,
appBar: AppBar(
title: const Text('Rastreo en vivo'),
actions: [
IconButton(
icon: const Icon(Icons.my_location),
onPressed: _centrarMapa,
tooltip: 'Centrar mapa',
),
],
),
body: Column(
children: [
// ── Mapa ─────────────────────────────────────────────────────
Expanded(
flex: 5,
child: Stack(
children: [
GoogleMap(
initialCameraPosition: _camaraInicial,
markers: _markers,
circles: _circles,
myLocationButtonEnabled: false,
zoomControlsEnabled: false,
mapType: MapType.normal,
onMapCreated: (c) {
_mapController.complete(c);
},
),
// Indicador "En vivo"
Positioned(
top: 14,
right: 14,
child: _LiveBadge(activo: _camion.enServicio),
),
// Actualización
Positioned(
top: 14,
left: 14,
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 10, vertical: 6),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20),
boxShadow: AppTheme.softShadow,
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(Icons.refresh,
size: 14, color: AppTheme.textSecondary),
const SizedBox(width: 4),
Text(
_camion.tiempoActualizacion,
style: const TextStyle(
fontSize: 12,
color: AppTheme.textSecondary),
),
],
),
),
),
],
),
),
// ── Panel inferior ────────────────────────────────────────────
Expanded(
flex: 3,
child: Container(
decoration: BoxDecoration(
color: AppTheme.background,
borderRadius: const BorderRadius.vertical(
top: Radius.circular(AppTheme.radiusXl)),
boxShadow: AppTheme.cardShadow,
),
child: Column(
children: [
// Handle
Container(
margin: const EdgeInsets.symmetric(vertical: 10),
width: 36,
height: 4,
decoration: BoxDecoration(
color: AppTheme.border,
borderRadius: BorderRadius.circular(4),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Column(
children: [
// Camión
w.InfoRow(
icon: Icons.delete_outline_rounded,
label: '${_camion.ruta} · ${_camion.tiempoActualizacion}',
value: 'Camión a ${_distanciaMetros.toStringAsFixed(0)} m',
trailing: w.StatusBadge.amber('~$_minutosEstimados min'),
),
const SizedBox(height: 10),
// Casa
w.InfoRow(
icon: Icons.home_outlined,
label: _casa.direccionCompleta,
value: _casa.alias,
trailing: w.StatusBadge.green('Activa'),
),
const SizedBox(height: 12),
// Barra de progreso de llegada
_ArrivalBar(
distanciaActual: _distanciaMetros,
distanciaTotal: 1000,
minutos: _minutosEstimados,
),
],
),
),
),
],
),
),
),
],
),
);
}
}
// ── Badge "En vivo" ───────────────────────────────────────────────────────────
class _LiveBadge extends StatefulWidget {
final bool activo;
const _LiveBadge({required this.activo});
@override
State<_LiveBadge> createState() => _LiveBadgeState();
}
class _LiveBadgeState extends State<_LiveBadge>
with SingleTickerProviderStateMixin {
late AnimationController _anim;
@override
void initState() {
super.initState();
_anim = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 900),
)..repeat(reverse: true);
}
@override
void dispose() {
_anim.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20),
boxShadow: AppTheme.softShadow,
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
AnimatedBuilder(
animation: _anim,
builder: (_, __) => Container(
width: 8,
height: 8,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: widget.activo
? AppTheme.primary.withOpacity(0.5 + _anim.value * 0.5)
: AppTheme.textSecondary,
),
),
),
const SizedBox(width: 5),
Text(
widget.activo ? 'En vivo' : 'Sin servicio',
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w600,
color: widget.activo ? AppTheme.primary : AppTheme.textSecondary,
),
),
],
),
);
}
}
// ── Barra de llegada estimada ─────────────────────────────────────────────────
class _ArrivalBar extends StatelessWidget {
final double distanciaActual;
final double distanciaTotal;
final int minutos;
const _ArrivalBar({
required this.distanciaActual,
required this.distanciaTotal,
required this.minutos,
});
@override
Widget build(BuildContext context) {
final progreso =
((distanciaTotal - distanciaActual) / distanciaTotal).clamp(0.0, 1.0);
return Container(
padding: const EdgeInsets.all(14),
decoration: BoxDecoration(
color: AppTheme.primaryLight,
borderRadius: BorderRadius.circular(AppTheme.radiusMd),
border: Border.all(color: AppTheme.primaryMid, width: 0.5),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
const Text('Llegada estimada',
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w500,
color: AppTheme.primaryDark)),
const Spacer(),
Text('~$minutos min',
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.withOpacity(0.4),
valueColor:
const AlwaysStoppedAnimation<Color>(AppTheme.primary),
minHeight: 6,
),
),
const SizedBox(height: 4),
Row(
children: const [
Text('Ahora',
style: TextStyle(
fontSize: 10, color: AppTheme.primaryDark)),
Spacer(),
Text('Tu casa',
style: TextStyle(
fontSize: 10, color: AppTheme.primaryDark)),
],
),
],
),
);
}
}

245
viewsv1/views/lib/screens/profile_screen.dart Normal file
View File

@@ -0,0 +1,245 @@
import 'package:flutter/material.dart';
import '../theme/app_theme.dart';
import '../models/models.dart';
import '../widgets/widgets.dart' as w;
import 'admin_screen.dart';
import 'splash_screen.dart';
class ProfileScreen extends StatelessWidget {
const ProfileScreen({super.key});
final UserModel _usuario = const UserModel(
id: 'user-01',
nombre: 'Carlos',
apellido: 'Martínez',
email: 'carlos@ejemplo.com',
telefono: '+52 461 123 4567',
);
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: AppTheme.background,
appBar: AppBar(title: const Text('Mi perfil')),
body: ListView(
padding: const EdgeInsets.all(16),
children: [
// ── Avatar y datos ─────────────────────────────────────────
_ProfileHeader(usuario: _usuario),
const SizedBox(height: 20),
// ── Mi cuenta ──────────────────────────────────────────────
w.SectionTitle(title: 'Mi cuenta'),
w.MenuTile(
icon: Icons.person_outline,
title: 'Editar perfil',
subtitle: '${_usuario.nombre} ${_usuario.apellido}',
onTap: () {},
),
w.MenuTile(
icon: Icons.lock_outline,
title: 'Cambiar contraseña',
onTap: () {},
),
w.MenuTile(
icon: Icons.phone_outlined,
title: 'Teléfono',
subtitle: _usuario.telefono,
onTap: () {},
),
const SizedBox(height: 16),
// ── Configuración ──────────────────────────────────────────
w.SectionTitle(title: 'Configuración'),
w.MenuTile(
icon: Icons.calendar_month_outlined,
title: 'Horario del camión',
subtitle: 'Ruta Norte · Celaya',
onTap: () {},
),
w.MenuTile(
icon: Icons.language_outlined,
title: 'Idioma',
subtitle: 'Español',
onTap: () {},
),
w.MenuTile(
icon: Icons.dark_mode_outlined,
title: 'Tema',
subtitle: 'Claro',
onTap: () {},
),
w.MenuTile(
icon: Icons.admin_panel_settings_outlined,
title: 'Panel de administración',
subtitle: 'Gestiona usuarios, rutas y camiones',
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (_) => const AdminScreen()),
);
},
),
const SizedBox(height: 16),
// ── Soporte ────────────────────────────────────────────────
w.SectionTitle(title: 'Soporte'),
w.MenuTile(
icon: Icons.help_outline,
title: 'Ayuda y preguntas frecuentes',
onTap: () {},
),
w.MenuTile(
icon: Icons.bug_report_outlined,
title: 'Reportar un problema',
onTap: () {},
),
w.MenuTile(
icon: Icons.info_outline,
title: 'Acerca de la app',
subtitle: 'Versión 1.0.0',
onTap: () {},
),
const SizedBox(height: 16),
// ── Cerrar sesión ──────────────────────────────────────────
w.MenuTile(
icon: Icons.logout_rounded,
title: 'Cerrar sesión',
iconColor: AppTheme.danger,
titleColor: AppTheme.danger,
trailing: const SizedBox.shrink(),
onTap: () => _confirmarCerrarSesion(context),
),
const SizedBox(height: 32),
Center(
child: Text(
'RutaVerde v1.0.0\nServicio de Limpia · Celaya, Gto.',
textAlign: TextAlign.center,
style: const TextStyle(
fontSize: 12, color: AppTheme.textHint, height: 1.6),
),
),
const SizedBox(height: 24),
],
),
);
}
void _confirmarCerrarSesion(BuildContext context) {
showDialog(
context: context,
builder: (ctx) => AlertDialog(
backgroundColor: AppTheme.surface,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(AppTheme.radiusLg)),
title: const Text('Cerrar sesión',
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.w700,
color: AppTheme.textPrimary)),
content: const Text(
'¿Estás seguro de que deseas cerrar sesión?',
style: TextStyle(fontSize: 14, color: AppTheme.textSecondary),
),
actions: [
TextButton(
onPressed: () => Navigator.pop(ctx),
style:
TextButton.styleFrom(foregroundColor: AppTheme.textSecondary),
child: const Text('Cancelar'),
),
TextButton(
onPressed: () {
Navigator.pushAndRemoveUntil(
context,
MaterialPageRoute(builder: (_) => const SplashScreen()),
(_) => false,
);
},
style: TextButton.styleFrom(foregroundColor: AppTheme.danger),
child: const Text('Cerrar sesión',
style: TextStyle(fontWeight: FontWeight.w600)),
),
],
),
);
}
}
// ── Encabezado de perfil ──────────────────────────────────────────────────────
class _ProfileHeader extends StatelessWidget {
final UserModel usuario;
const _ProfileHeader({required this.usuario});
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: AppTheme.surface,
borderRadius: BorderRadius.circular(AppTheme.radiusLg),
border: Border.all(color: AppTheme.border, width: 0.5),
boxShadow: AppTheme.softShadow,
),
child: Row(
children: [
// Avatar con iniciales
Container(
width: 56,
height: 56,
decoration: BoxDecoration(
color: AppTheme.primaryLight,
shape: BoxShape.circle,
border: Border.all(color: AppTheme.primaryMid, width: 1.5),
),
child: Center(
child: Text(
usuario.iniciales,
style: const TextStyle(
fontSize: 20,
fontWeight: FontWeight.w700,
color: AppTheme.primaryDark),
),
),
),
const SizedBox(width: 14),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
usuario.nombreCompleto,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.w700,
color: AppTheme.textPrimary),
),
const SizedBox(height: 2),
Text(
usuario.email,
style: const TextStyle(
fontSize: 13, color: AppTheme.textSecondary),
),
const SizedBox(height: 6),
w.StatusBadge.green('Cuenta activa'),
],
),
),
IconButton(
icon: const Icon(Icons.edit_outlined,
color: AppTheme.primary, size: 20),
onPressed: () {},
),
],
),
);
}
}

541
viewsv1/views/lib/screens/register_screen.dart Normal file
View File

@@ -0,0 +1,541 @@
import 'package:flutter/material.dart';
import '../theme/app_theme.dart';
import '../widgets/widgets.dart' as w;
import 'main_shell.dart';
class RegisterScreen extends StatefulWidget {
const RegisterScreen({super.key});
@override
State<RegisterScreen> createState() => _RegisterScreenState();
}
class _RegisterScreenState extends State<RegisterScreen> {
final _pageController = PageController();
int _currentPage = 0;
bool _loading = false;
// Paso 1
final _nombreCtrl = TextEditingController();
final _apellidoCtrl = TextEditingController();
final _emailCtrl = TextEditingController();
final _telefonoCtrl = TextEditingController();
final _passCtrl = TextEditingController();
bool _obscurePass = true;
// Paso 2
final _calleCtrl = TextEditingController();
final _coloniaCtrl = TextEditingController();
final _cpCtrl = TextEditingController();
int _radioAlerta = 200;
@override
void dispose() {
_pageController.dispose();
_nombreCtrl.dispose(); _apellidoCtrl.dispose();
_emailCtrl.dispose(); _telefonoCtrl.dispose(); _passCtrl.dispose();
_calleCtrl.dispose(); _coloniaCtrl.dispose(); _cpCtrl.dispose();
super.dispose();
}
void _nextPage() {
_pageController.nextPage(
duration: const Duration(milliseconds: 350),
curve: Curves.easeInOut,
);
setState(() => _currentPage = 1);
}
Future<void> _register() async {
setState(() => _loading = true);
await Future.delayed(const Duration(seconds: 1));
if (!mounted) return;
setState(() => _loading = false);
Navigator.pushAndRemoveUntil(
context,
MaterialPageRoute(builder: (_) => const MainShell()),
(_) => false,
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: AppTheme.background,
appBar: AppBar(
backgroundColor: Colors.transparent,
elevation: 0,
iconTheme: const IconThemeData(color: AppTheme.textPrimary),
title: Text(
_currentPage == 0 ? 'Crear cuenta' : 'Mi dirección',
style: const TextStyle(color: AppTheme.textPrimary, fontSize: 16),
),
bottom: PreferredSize(
preferredSize: const Size.fromHeight(4),
child: _StepIndicator(current: _currentPage, total: 2),
),
),
body: PageView(
controller: _pageController,
physics: const NeverScrollableScrollPhysics(),
children: [
_Step1(
nombreCtrl: _nombreCtrl,
apellidoCtrl: _apellidoCtrl,
emailCtrl: _emailCtrl,
telefonoCtrl: _telefonoCtrl,
passCtrl: _passCtrl,
obscurePass: _obscurePass,
onTogglePass: () => setState(() => _obscurePass = !_obscurePass),
onNext: _nextPage,
),
_Step2(
calleCtrl: _calleCtrl,
coloniaCtrl: _coloniaCtrl,
cpCtrl: _cpCtrl,
radioAlerta: _radioAlerta,
onRadioChanged: (v) => setState(() => _radioAlerta = v),
onRegister: _register,
loading: _loading,
),
],
),
);
}
}
// ── Indicador de pasos ────────────────────────────────────────────────────────
class _StepIndicator extends StatelessWidget {
final int current;
final int total;
const _StepIndicator({required this.current, required this.total});
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 6),
child: Row(
children: List.generate(total, (i) {
final active = i <= current;
return Expanded(
child: Container(
margin: EdgeInsets.only(right: i < total - 1 ? 6 : 0),
height: 4,
decoration: BoxDecoration(
color: active ? AppTheme.primary : AppTheme.border,
borderRadius: BorderRadius.circular(4),
),
),
);
}),
),
);
}
}
// ── Paso 1: Datos personales ──────────────────────────────────────────────────
class _Step1 extends StatelessWidget {
final TextEditingController nombreCtrl, apellidoCtrl, emailCtrl,
telefonoCtrl, passCtrl;
final bool obscurePass;
final VoidCallback onTogglePass;
final VoidCallback onNext;
const _Step1({
required this.nombreCtrl, required this.apellidoCtrl,
required this.emailCtrl, required this.telefonoCtrl,
required this.passCtrl, required this.obscurePass,
required this.onTogglePass, required this.onNext,
});
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
padding: const EdgeInsets.all(24),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(height: 4),
// ── Sección personal ──────────────────────────────────────────
_FormCard(
icon: Icons.person_outline,
title: 'Información personal',
child: Column(
children: [
Row(
children: [
Expanded(
child: w.FormField(
label: 'Nombre',
hint: 'Carlos',
controller: nombreCtrl,
),
),
const SizedBox(width: 12),
Expanded(
child: w.FormField(
label: 'Apellido',
hint: 'Martínez',
controller: apellidoCtrl,
),
),
],
),
const SizedBox(height: 14),
w.FormField(
label: 'Correo electrónico',
hint: 'tu@correo.com',
controller: emailCtrl,
keyboardType: TextInputType.emailAddress,
),
const SizedBox(height: 14),
w.FormField(
label: 'Teléfono',
hint: '+52 461 123 4567',
controller: telefonoCtrl,
keyboardType: TextInputType.phone,
),
const SizedBox(height: 14),
w.FormField(
label: 'Contraseña',
hint: '••••••••',
controller: passCtrl,
obscureText: obscurePass,
suffix: IconButton(
icon: Icon(
obscurePass
? Icons.visibility_outlined
: Icons.visibility_off_outlined,
size: 18, color: AppTheme.textSecondary,
),
onPressed: onTogglePass,
),
),
],
),
),
const SizedBox(height: 28),
SizedBox(
width: double.infinity,
height: 52,
child: ElevatedButton(
onPressed: onNext,
child: Row(
mainAxisSize: MainAxisSize.min,
children: const [
Text('Siguiente'),
SizedBox(width: 8),
Icon(Icons.arrow_forward, size: 18),
],
),
),
),
const SizedBox(height: 20),
Center(
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Text('¿Ya tienes cuenta? ',
style: TextStyle(
fontSize: 13, color: AppTheme.textSecondary)),
GestureDetector(
onTap: () => Navigator.pop(context),
child: const Text('Inicia sesión',
style: TextStyle(
fontSize: 13,
fontWeight: FontWeight.w600,
color: AppTheme.primary)),
),
],
),
),
],
),
);
}
}
// ── Paso 2: Dirección ─────────────────────────────────────────────────────────
class _Step2 extends StatelessWidget {
final TextEditingController calleCtrl, coloniaCtrl, cpCtrl;
final int radioAlerta;
final ValueChanged<int> onRadioChanged;
final VoidCallback onRegister;
final bool loading;
const _Step2({
required this.calleCtrl, required this.coloniaCtrl, required this.cpCtrl,
required this.radioAlerta, required this.onRadioChanged,
required this.onRegister, required this.loading,
});
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
padding: const EdgeInsets.all(24),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(height: 4),
_FormCard(
icon: Icons.home_outlined,
title: 'Dirección de tu casa',
child: Column(
children: [
w.FormField(
label: 'Calle y número',
hint: 'Av. Insurgentes 245',
controller: calleCtrl,
),
const SizedBox(height: 14),
Row(
children: [
Expanded(
flex: 3,
child: w.FormField(
label: 'Colonia',
hint: 'Centro',
controller: coloniaCtrl,
),
),
const SizedBox(width: 12),
Expanded(
flex: 2,
child: w.FormField(
label: 'C.P.',
hint: '38000',
controller: cpCtrl,
keyboardType: TextInputType.number,
),
),
],
),
const SizedBox(height: 14),
// Usar ubicación actual
GestureDetector(
onTap: () {},
child: Container(
padding: const EdgeInsets.symmetric(
vertical: 11, horizontal: 14),
decoration: BoxDecoration(
color: AppTheme.primaryLight,
borderRadius:
BorderRadius.circular(AppTheme.radiusSm),
border: Border.all(
color: AppTheme.primaryMid, width: 0.5),
),
child: const Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.my_location,
color: AppTheme.primary, size: 18),
SizedBox(width: 8),
Text('Usar mi ubicación actual',
style: TextStyle(
fontSize: 13,
fontWeight: FontWeight.w500,
color: AppTheme.primaryDark)),
],
),
),
),
],
),
),
const SizedBox(height: 16),
_FormCard(
icon: Icons.notifications_outlined,
title: 'Distancia de alerta',
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Te avisamos cuando el camión esté a esta distancia de tu casa.',
style: TextStyle(
fontSize: 13, color: AppTheme.textSecondary,
height: 1.4),
),
const SizedBox(height: 14),
...([200, 400, 600]).map((dist) => _RadioOption(
value: dist,
groupValue: radioAlerta,
label: '$dist metros',
sublabel: dist == 200
? 'Alerta muy temprana (~2-3 min)'
: dist == 400
? 'Alerta temprana (~4-5 min)'
: 'Alerta anticipada (~6-8 min)',
onChanged: onRadioChanged,
)),
],
),
),
const SizedBox(height: 28),
SizedBox(
width: double.infinity,
height: 52,
child: ElevatedButton(
onPressed: loading ? null : onRegister,
child: loading
? const SizedBox(
width: 20, height: 20,
child: CircularProgressIndicator(
strokeWidth: 2, color: Colors.white),
)
: const Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.check, size: 18),
SizedBox(width: 8),
Text('Registrarme'),
],
),
),
),
const SizedBox(height: 16),
Center(
child: Text(
'Al registrarte aceptas los Términos de Servicio\ny la Política de Privacidad.',
textAlign: TextAlign.center,
style: const TextStyle(
fontSize: 11, color: AppTheme.textSecondary, height: 1.5),
),
),
],
),
);
}
}
// ── Tarjeta de formulario ─────────────────────────────────────────────────────
class _FormCard extends StatelessWidget {
final IconData icon;
final String title;
final Widget child;
const _FormCard(
{required this.icon, required this.title, required this.child});
@override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: AppTheme.surface,
borderRadius: BorderRadius.circular(AppTheme.radiusLg),
border: Border.all(color: AppTheme.border, width: 0.5),
boxShadow: AppTheme.softShadow,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Icon(icon, color: AppTheme.primary, size: 18),
const SizedBox(width: 8),
Text(title,
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
color: AppTheme.textPrimary)),
],
),
const SizedBox(height: 16),
child,
],
),
);
}
}
// ── Opción radio ──────────────────────────────────────────────────────────────
class _RadioOption extends StatelessWidget {
final int value;
final int groupValue;
final String label;
final String sublabel;
final ValueChanged<int> onChanged;
const _RadioOption({
required this.value, required this.groupValue,
required this.label, required this.sublabel, required this.onChanged,
});
@override
Widget build(BuildContext context) {
final selected = value == groupValue;
return GestureDetector(
onTap: () => onChanged(value),
child: Container(
margin: const EdgeInsets.only(bottom: 8),
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 11),
decoration: BoxDecoration(
color: selected ? AppTheme.primaryLight : AppTheme.background,
borderRadius: BorderRadius.circular(AppTheme.radiusSm),
border: Border.all(
color: selected ? AppTheme.primary : AppTheme.border,
width: selected ? 1.5 : 0.5,
),
),
child: Row(
children: [
Container(
width: 18,
height: 18,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: selected ? AppTheme.primary : AppTheme.border,
width: 2,
),
),
child: selected
? Center(
child: Container(
width: 8, height: 8,
decoration: const BoxDecoration(
shape: BoxShape.circle,
color: AppTheme.primary,
),
),
)
: null,
),
const SizedBox(width: 10),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(label,
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
color: selected
? AppTheme.primaryDark
: AppTheme.textPrimary)),
Text(sublabel,
style: TextStyle(
fontSize: 11,
color: selected
? AppTheme.primary
: AppTheme.textSecondary)),
],
),
],
),
),
);
}
}

237
viewsv1/views/lib/screens/splash_screen.dart Normal file
View File

@@ -0,0 +1,237 @@
import 'package:flutter/material.dart';
import '../theme/app_theme.dart';
import 'login_screen.dart';
import 'register_screen.dart';
class SplashScreen extends StatefulWidget {
const SplashScreen({super.key});
@override
State<SplashScreen> createState() => _SplashScreenState();
}
class _SplashScreenState extends State<SplashScreen>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _fadeIn;
late Animation<Offset> _slideUp;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 900),
);
_fadeIn = Tween<double>(begin: 0, end: 1).animate(
CurvedAnimation(parent: _controller, curve: Curves.easeOut),
);
_slideUp = Tween<Offset>(
begin: const Offset(0, 0.3),
end: Offset.zero,
).animate(CurvedAnimation(parent: _controller, curve: Curves.easeOut));
_controller.forward();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
width: double.infinity,
height: double.infinity,
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [AppTheme.primary, AppTheme.primaryDark],
),
),
child: SafeArea(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 28),
child: Column(
children: [
const Spacer(flex: 2),
// ── Ícono de la app ─────────────────────────────────────
FadeTransition(
opacity: _fadeIn,
child: Container(
width: 90,
height: 90,
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.15),
borderRadius:
BorderRadius.circular(AppTheme.radiusXl),
),
child: const Icon(
Icons.delete_outline_rounded,
size: 46,
color: Colors.white,
),
),
),
const SizedBox(height: 24),
// ── Nombre y descripción ────────────────────────────────
SlideTransition(
position: _slideUp,
child: FadeTransition(
opacity: _fadeIn,
child: Column(
children: [
const Text(
'RutaVerde',
style: TextStyle(
fontSize: 32,
fontWeight: FontWeight.w700,
color: Colors.white,
letterSpacing: -0.5,
),
),
const SizedBox(height: 10),
Text(
'Sigue en tiempo real el camión de basura\ny recibe alertas cuando esté cerca.',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 15,
color: Colors.white.withOpacity(0.82),
height: 1.5,
),
),
],
),
),
),
const Spacer(flex: 3),
// ── Características rápidas ─────────────────────────────
FadeTransition(
opacity: _fadeIn,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
_FeatureChip(
icon: Icons.location_on_outlined,
label: 'Rastreo en vivo',
),
_FeatureChip(
icon: Icons.notifications_outlined,
label: 'Alertas',
),
_FeatureChip(
icon: Icons.home_outlined,
label: 'Tu dirección',
),
],
),
),
const SizedBox(height: 40),
// ── Botones ─────────────────────────────────────────────
FadeTransition(
opacity: _fadeIn,
child: Column(
children: [
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.white,
foregroundColor: AppTheme.primaryDark,
minimumSize: const Size(double.infinity, 52),
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(AppTheme.radiusMd),
),
textStyle: const TextStyle(
fontSize: 15,
fontWeight: FontWeight.w600,
),
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (_) => const RegisterScreen(),
),
);
},
child: const Text('Crear cuenta'),
),
const SizedBox(height: 12),
OutlinedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (_) => const LoginScreen(),
),
);
},
child: const Text('Ya tengo cuenta'),
),
],
),
),
const SizedBox(height: 24),
Text(
'Servicio de Limpia · Celaya, Gto.',
style: TextStyle(
fontSize: 12,
color: Colors.white.withOpacity(0.45),
),
),
const SizedBox(height: 16),
],
),
),
),
),
);
}
}
class _FeatureChip extends StatelessWidget {
final IconData icon;
final String label;
const _FeatureChip({required this.icon, required this.label});
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 10),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.12),
borderRadius: BorderRadius.circular(AppTheme.radiusMd),
border: Border.all(color: Colors.white.withOpacity(0.2)),
),
child: Column(
children: [
Icon(icon, color: Colors.white, size: 22),
const SizedBox(height: 5),
Text(
label,
style: const TextStyle(
fontSize: 11,
color: Colors.white,
fontWeight: FontWeight.w500,
),
),
],
),
);
}
}