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

2026-05-23 07:08:49 -06:00
parent ca076607c7
commit 92f570294a
43 changed files with 4335 additions and 2035 deletions
--- a/recolecta_app/lib/core/router/app_router.dart
+++ b/recolecta_app/lib/core/router/app_router.dart
@@ -26,10 +26,16 @@ import '../../features/help/screens/help_faq_screen.dart';
 import '../../features/incidents/screens/report_issue_screen.dart';
 import '../../features/about/screens/about_screen.dart';

+/// Clave global del Navigator raíz. La expone GoRouter y la usa
+/// `NotificationService` para navegar a `/notifications` cuando el usuario
+/// toca un push (foreground, background o terminated).
+final rootNavigatorKey = GlobalKey<NavigatorState>();
+
 final routerProvider = Provider<GoRouter>((ref) {
  final authState = ref.watch(authControllerProvider);

  return GoRouter(
+    navigatorKey: rootNavigatorKey,
    initialLocation: '/splash',
    redirect: (BuildContext context, GoRouterState state) {
      final isAuthenticated = authState.value?.isAuthenticated ?? false;
--- a/recolecta_app/lib/core/theme/app_theme.dart
+++ b/recolecta_app/lib/core/theme/app_theme.dart
@@ -1,38 +1,60 @@
 import 'package:flutter/material.dart';

+/// Paleta institucional — Gobierno Municipal
+/// ─────────────────────────────────────────
+/// Vino principal   #9B1B4A
+/// Rosa institucional #C9A8B2
+/// Beige dorado     #C8A36A
+/// Rosa claro fondo #E8D5DB
+/// Verde acento     #1E7A46
+/// Azul accesibilidad #004A7C
+/// Texto oscuro     #1F1F1F
+/// Fondo blanco     #F8F8F8
 class AppTheme {
-  static const Color primary       = Color(0xFF1D9E75);
-  static const Color primaryDark   = Color(0xFF0F6E56);
-  static const Color primaryLight  = Color(0xFFE1F5EE);
-  static const Color primaryMid    = Color(0xFF9FE1CB);
+  // ── Primarios ──────────────────────────────────────────────────────────────
+  static const Color primary      = Color(0xFF9B1B4A);
+  static const Color primaryDark  = Color(0xFF6D1234);
+  static const Color primaryLight = Color(0xFFE8D5DB);
+  static const Color primaryMid   = Color(0xFFC9A8B2);

-  static const Color blue          = Color(0xFF185FA5);
-  static const Color blueLight     = Color(0xFFE6F1FB);
+  // ── Azul accesibilidad ─────────────────────────────────────────────────────
+  static const Color blue         = Color(0xFF004A7C);
+  static const Color blueLight    = Color(0xFFDCEAF3);

-  static const Color amber         = Color(0xFF854F0B);
-  static const Color amberLight    = Color(0xFFFAEEDA);
+  // ── Beige dorado (alertas / acento cálido) ─────────────────────────────────
+  static const Color amber        = Color(0xFF8B6914);
+  static const Color amberLight   = Color(0xFFF5EDD8);

-  static const Color danger        = Color(0xFFE24B4A);
-  static const Color dangerLight   = Color(0xFFFCEBEB);
+  // ── Verde acento (éxito / estados activos) ─────────────────────────────────
+  static const Color accent       = Color(0xFF1E7A46);
+  static const Color accentLight  = Color(0xFFDFF0E8);

-  static const Color textPrimary   = Color(0xFF1A1A1A);
+  // ── Peligro ────────────────────────────────────────────────────────────────
+  static const Color danger       = Color(0xFFD93040);
+  static const Color dangerLight  = Color(0xFFFCEBEB);
+
+  // ── Texto ─────────────────────────────────────────────────────────────────
+  static const Color textPrimary   = Color(0xFF1F1F1F);
  static const Color textSecondary = Color(0xFF6B7280);
  static const Color textHint      = Color(0xFFAAAAAA);

-  static const Color surface       = Color(0xFFFFFFFF);
-  static const Color background    = Color(0xFFF5F7F5);
-  static const Color border        = Color(0xFFE5E7EB);
-  static const Color borderLight   = Color(0xFFF0F2F0);
+  // ── Superficies ────────────────────────────────────────────────────────────
+  static const Color surface      = Color(0xFFFFFFFF);
+  static const Color background   = Color(0xFFF8F8F8);
+  static const Color border       = Color(0xFFE0D5D8);
+  static const Color borderLight  = Color(0xFFF0ECF0);

+  // ── Radios ────────────────────────────────────────────────────────────────
  static const double radiusSm   = 8.0;
  static const double radiusMd   = 12.0;
  static const double radiusLg   = 16.0;
  static const double radiusXl   = 24.0;
  static const double radiusFull = 100.0;

+  // ── Sombras ───────────────────────────────────────────────────────────────
  static List<BoxShadow> get cardShadow => [
    BoxShadow(
-      color: Colors.black.withValues(alpha: 0.06),
+      color: const Color(0xFF9B1B4A).withValues(alpha: 0.07),
      blurRadius: 12,
      offset: const Offset(0, 4),
    ),
@@ -46,12 +68,13 @@ class AppTheme {
    ),
  ];

+  // ── Tema global ───────────────────────────────────────────────────────────
  static ThemeData get lightTheme => ThemeData(
    useMaterial3: true,
    colorScheme: ColorScheme.fromSeed(
      seedColor: primary,
      primary: primary,
-      secondary: primaryDark,
+      secondary: accent,
      surface: surface,
    ),
    scaffoldBackgroundColor: background,
@@ -62,9 +85,10 @@ class AppTheme {
      centerTitle: false,
      titleTextStyle: TextStyle(
        inherit: false,
-        fontSize: 18,
-        fontWeight: FontWeight.w600,
+        fontSize: 17,
+        fontWeight: FontWeight.w700,
        color: Colors.white,
+        letterSpacing: 0.1,
      ),
      iconTheme: IconThemeData(color: Colors.white),
    ),
@@ -126,5 +150,15 @@ class AppTheme {
      labelStyle: const TextStyle(color: textSecondary, fontSize: 13),
      hintStyle: const TextStyle(color: textHint, fontSize: 13),
    ),
+    switchTheme: SwitchThemeData(
+      thumbColor: WidgetStateProperty.resolveWith(
+        (s) => s.contains(WidgetState.selected) ? primary : Colors.white,
+      ),
+      trackColor: WidgetStateProperty.resolveWith(
+        (s) => s.contains(WidgetState.selected)
+            ? primary.withValues(alpha: 0.5)
+            : Colors.grey.shade300,
+      ),
+    ),
  );
 }
--- a/recolecta_app/lib/core/widgets/app_widgets.dart
+++ b/recolecta_app/lib/core/widgets/app_widgets.dart
@@ -79,14 +79,29 @@ class AppCard extends StatelessWidget {
      onTap: onTap,
      child: Container(
        width: double.infinity,
-        padding: padding ?? const EdgeInsets.all(16),
        decoration: BoxDecoration(
          color: AppTheme.surface,
          borderRadius: BorderRadius.circular(AppTheme.radiusLg),
          border: Border.all(color: borderColor ?? AppTheme.border, width: 0.5),
          boxShadow: AppTheme.softShadow,
        ),
-        child: child,
+        child: ClipRRect(
+          borderRadius: BorderRadius.circular(AppTheme.radiusLg - 0.5),
+          child: IntrinsicHeight(
+            child: Row(
+              crossAxisAlignment: CrossAxisAlignment.stretch,
+              children: [
+                Container(width: 3, color: AppTheme.primary),
+                Expanded(
+                  child: Padding(
+                    padding: padding ?? const EdgeInsets.all(16),
+                    child: child,
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ),
      ),
    );
  }
@@ -110,50 +125,65 @@ class AppInfoRow extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
-      padding: const EdgeInsets.all(14),
      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: [
-          Container(
-            width: 40,
-            height: 40,
-            decoration: BoxDecoration(
-              color: AppTheme.primaryLight,
-              borderRadius: BorderRadius.circular(10),
-            ),
-            child: Icon(icon, color: AppTheme.primary, size: 20),
-          ),
-          const SizedBox(width: 12),
-          Expanded(
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
-                Text(
-                  value,
-                  style: const TextStyle(
-                    fontSize: 14,
-                    fontWeight: FontWeight.w500,
-                    color: AppTheme.textPrimary,
+      child: ClipRRect(
+        borderRadius: BorderRadius.circular(AppTheme.radiusLg - 0.5),
+        child: IntrinsicHeight(
+          child: Row(
+            crossAxisAlignment: CrossAxisAlignment.stretch,
+            children: [
+              Container(width: 3, color: AppTheme.primary),
+              Expanded(
+                child: Padding(
+                  padding: const EdgeInsets.all(14),
+                  child: Row(
+                    children: [
+                      Container(
+                        width: 40,
+                        height: 40,
+                        decoration: BoxDecoration(
+                          color: AppTheme.primaryLight,
+                          borderRadius: BorderRadius.circular(10),
+                        ),
+                        child: Icon(icon, color: AppTheme.primary, size: 20),
+                      ),
+                      const SizedBox(width: 12),
+                      Expanded(
+                        child: Column(
+                          crossAxisAlignment: CrossAxisAlignment.start,
+                          children: [
+                            Text(
+                              value,
+                              style: const TextStyle(
+                                fontSize: 14,
+                                fontWeight: FontWeight.w500,
+                                color: AppTheme.textPrimary,
+                              ),
+                            ),
+                            const SizedBox(height: 2),
+                            Text(
+                              label,
+                              style: const TextStyle(
+                                fontSize: 12,
+                                color: AppTheme.textSecondary,
+                              ),
+                            ),
+                          ],
+                        ),
+                      ),
+                      ?trailing,
+                    ],
                  ),
                ),
-                const SizedBox(height: 2),
-                Text(
-                  label,
-                  style: const TextStyle(
-                    fontSize: 12,
-                    color: AppTheme.textSecondary,
-                  ),
-                ),
-              ],
-            ),
+              ),
+            ],
          ),
-          ?trailing,
-        ],
+        ),
      ),
    );
  }
@@ -305,53 +335,69 @@ class AppMenuTile extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
-    return GestureDetector(
-      onTap: onTap,
-      child: Container(
-        margin: const EdgeInsets.only(bottom: 8),
-        padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 13),
-        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: [
-            Icon(icon, color: iconColor ?? AppTheme.primary, size: 20),
-            const SizedBox(width: 12),
-            Expanded(
-              child: Column(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  Text(
-                    title,
-                    style: TextStyle(
-                      fontSize: 14,
-                      fontWeight: FontWeight.w500,
-                      color: titleColor ?? AppTheme.textPrimary,
-                    ),
-                  ),
-                  if (subtitle != null) ...[
-                    const SizedBox(height: 2),
+    return Material(
+      color: Colors.transparent,
+      child: InkWell(
+        onTap: onTap,
+        borderRadius: BorderRadius.circular(AppTheme.radiusMd),
+        child: Container(
+          margin: const EdgeInsets.only(bottom: 8),
+          padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 13),
+          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: 38,
+                height: 38,
+                decoration: BoxDecoration(
+                  color: (iconColor ?? AppTheme.primary).withValues(alpha: 0.1),
+                  borderRadius: BorderRadius.circular(AppTheme.radiusSm),
+                ),
+                child: Icon(
+                  icon,
+                  color: iconColor ?? AppTheme.primary,
+                  size: 20,
+                ),
+              ),
+              const SizedBox(width: 12),
+              Expanded(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
                    Text(
-                      subtitle!,
-                      style: const TextStyle(
-                        fontSize: 12,
-                        color: AppTheme.textSecondary,
+                      title,
+                      style: TextStyle(
+                        fontSize: 14,
+                        fontWeight: FontWeight.w500,
+                        color: titleColor ?? AppTheme.textPrimary,
                      ),
                    ),
+                    if (subtitle != null) ...[
+                      const SizedBox(height: 2),
+                      Text(
+                        subtitle!,
+                        style: const TextStyle(
+                          fontSize: 12,
+                          color: AppTheme.textSecondary,
+                        ),
+                      ),
+                    ],
                  ],
-                ],
-              ),
-            ),
-            trailing ??
-                const Icon(
-                  Icons.chevron_right,
-                  color: AppTheme.textSecondary,
-                  size: 18,
                ),
-          ],
+              ),
+              trailing ??
+                  const Icon(
+                    Icons.chevron_right,
+                    color: AppTheme.textSecondary,
+                    size: 18,
+                  ),
+            ],
+          ),
        ),
      ),
    );
@@ -375,39 +421,58 @@ class AppFormCard extends StatelessWidget {
  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(
+      child: ClipRRect(
+        borderRadius: BorderRadius.circular(AppTheme.radiusLg - 0.5),
+        child: IntrinsicHeight(
+          child: Row(
+            crossAxisAlignment: CrossAxisAlignment.stretch,
            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,
+              Container(width: 3, color: AppTheme.primary),
+              Expanded(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Container(
+                      width: double.infinity,
+                      padding: const EdgeInsets.fromLTRB(16, 14, 16, 12),
+                      color: AppTheme.primaryLight,
+                      child: Row(
+                        children: [
+                          Icon(icon, color: AppTheme.primaryDark, size: 18),
+                          const SizedBox(width: 8),
+                          Text(
+                            title,
+                            style: const TextStyle(
+                              fontSize: 14,
+                              fontWeight: FontWeight.w700,
+                              color: AppTheme.primaryDark,
+                            ),
+                          ),
+                        ],
+                      ),
+                    ),
+                    Padding(
+                      padding: const EdgeInsets.all(16),
+                      child: child,
+                    ),
+                  ],
                ),
              ),
            ],
          ),
-          const SizedBox(height: 16),
-          child,
-        ],
+        ),
      ),
    );
  }
 }

-// ── Bottom Nav Bar ────────────────────────────────────────────────────────────
+// ── Bottom Nav Bar (Material 3) ───────────────────────────────────────────────
 class AppBottomNav extends StatelessWidget {
  final int currentIndex;
  final Function(int) onTap;
@@ -420,35 +485,34 @@ class AppBottomNav extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
-    return BottomNavigationBar(
-      currentIndex: currentIndex,
-      onTap: onTap,
-      type: BottomNavigationBarType.fixed,
+    return NavigationBar(
+      selectedIndex: currentIndex,
+      onDestinationSelected: onTap,
      backgroundColor: AppTheme.surface,
-      selectedItemColor: AppTheme.primary,
-      unselectedItemColor: AppTheme.textSecondary,
-      selectedFontSize: 11,
-      unselectedFontSize: 11,
-      elevation: 12,
-      items: const [
-        BottomNavigationBarItem(
-          icon: Icon(Icons.notifications_outlined),
-          activeIcon: Icon(Icons.notifications),
+      indicatorColor: AppTheme.primaryLight,
+      surfaceTintColor: Colors.transparent,
+      shadowColor: AppTheme.primary.withValues(alpha: 0.08),
+      elevation: 4,
+      labelBehavior: NavigationDestinationLabelBehavior.alwaysShow,
+      destinations: const [
+        NavigationDestination(
+          icon: Icon(Icons.notifications_outlined, color: AppTheme.textSecondary),
+          selectedIcon: Icon(Icons.notifications, color: AppTheme.primary),
          label: 'ETA',
        ),
-        BottomNavigationBarItem(
-          icon: Icon(Icons.history_outlined),
-          activeIcon: Icon(Icons.history),
+        NavigationDestination(
+          icon: Icon(Icons.history_outlined, color: AppTheme.textSecondary),
+          selectedIcon: Icon(Icons.history, color: AppTheme.primary),
          label: 'Alertas',
        ),
-        BottomNavigationBarItem(
-          icon: Icon(Icons.home_outlined),
-          activeIcon: Icon(Icons.home),
+        NavigationDestination(
+          icon: Icon(Icons.home_outlined, color: AppTheme.textSecondary),
+          selectedIcon: Icon(Icons.home, color: AppTheme.primary),
          label: 'Mi casa',
        ),
-        BottomNavigationBarItem(
-          icon: Icon(Icons.person_outline),
-          activeIcon: Icon(Icons.person),
+        NavigationDestination(
+          icon: Icon(Icons.person_outline, color: AppTheme.textSecondary),
+          selectedIcon: Icon(Icons.person, color: AppTheme.primary),
          label: 'Perfil',
        ),
      ],