fix: navbar StatefulWidget + dashboard colores dinamicos
- Navbar: convertir a StatefulWidget, un solo nivel de build, usa context.watch en lugar de Consumer anidados - Iconos sol/luna y campana siempre visibles con color explicito - Dashboard: barra busqueda, sugerencias y tarjeta inferior ahora respetan isDark (cardBg, textColor, etc.) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Lizandro Guarnizo
co-authored by
Claude Sonnet 4.6
Claude Sonnet 4.6
parent
8aa03f437c
commit
fac4135835
+145
-142
@@ -8,119 +8,98 @@ import 'package:prosapp_web_app/providers/theme_provider.dart';
|
||||
import 'package:prosapp_web_app/ui/shared/widgets/navbar_avatar.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
|
||||
class Navbar extends StatelessWidget {
|
||||
class Navbar extends StatefulWidget {
|
||||
const Navbar({super.key});
|
||||
|
||||
@override
|
||||
State<Navbar> createState() => _NavbarState();
|
||||
}
|
||||
|
||||
class _NavbarState extends State<Navbar> {
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||
final userId = context.read<AuthProvider>().user?.id;
|
||||
if (userId != null) {
|
||||
context.read<ScoreProvider>().loadReputation(userId);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final size = MediaQuery.of(context).size;
|
||||
final themeProvider = context.watch<ThemeProvider>();
|
||||
final isDark = themeProvider.isDark;
|
||||
final scoreProvider = context.watch<ScoreProvider>();
|
||||
final professionalProvider = context.watch<ProfessionalProvider>();
|
||||
final servicesProvider = context.watch<ServicesProvider>();
|
||||
|
||||
return Consumer<ThemeProvider>(builder: (context, themeProvider, _) {
|
||||
final isDark = themeProvider.isDark;
|
||||
final iconColor = isDark ? Colors.white70 : const Color(0xFF475569);
|
||||
final bgColor = isDark ? const Color(0xFF1E293B) : Colors.white;
|
||||
final shadowColor = isDark ? Colors.black54 : Colors.black12;
|
||||
final iconColor = isDark ? Colors.white70 : const Color(0xFF475569);
|
||||
final bgColor = isDark ? const Color(0xFF1E293B) : Colors.white;
|
||||
|
||||
return Consumer<ScoreProvider>(builder: (context, scoreProvider, _) {
|
||||
final professionalProvider =
|
||||
Provider.of<ProfessionalProvider>(context, listen: false);
|
||||
final reputation = scoreProvider.reputation;
|
||||
final pendingCount =
|
||||
servicesProvider.services.where((s) => s.service.status.index == 0).length;
|
||||
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||
scoreProvider.loadReputation(
|
||||
context.read<AuthProvider>().user!.id);
|
||||
});
|
||||
|
||||
final reputation = scoreProvider.reputation;
|
||||
|
||||
return Container(
|
||||
width: double.infinity,
|
||||
height: 56,
|
||||
decoration: BoxDecoration(
|
||||
color: bgColor,
|
||||
boxShadow: [BoxShadow(color: shadowColor, blurRadius: 6)],
|
||||
return Container(
|
||||
width: double.infinity,
|
||||
height: 56,
|
||||
decoration: BoxDecoration(
|
||||
color: bgColor,
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: isDark ? Colors.black54 : Colors.black12,
|
||||
blurRadius: 6,
|
||||
),
|
||||
child: Row(
|
||||
],
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
if (size.width <= 700)
|
||||
IconButton(
|
||||
icon: Icon(Icons.menu, color: iconColor, size: 22),
|
||||
onPressed: SideMenuProvider.openMenu,
|
||||
),
|
||||
|
||||
const Spacer(),
|
||||
|
||||
// Puntuación
|
||||
Icon(Icons.star_rounded, color: Colors.amber, size: 16),
|
||||
const SizedBox(width: 3),
|
||||
Text(
|
||||
(professionalProvider.isProModeActive
|
||||
? reputation.averagePro
|
||||
: reputation.average)
|
||||
.toStringAsFixed(1),
|
||||
style: TextStyle(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: isDark ? Colors.white : const Color(0xFF1E293B),
|
||||
),
|
||||
),
|
||||
|
||||
const SizedBox(width: 6),
|
||||
|
||||
// Toggle día/noche
|
||||
IconButton(
|
||||
tooltip: isDark ? 'Modo día' : 'Modo noche',
|
||||
icon: Icon(
|
||||
isDark ? Icons.light_mode : Icons.dark_mode,
|
||||
color: isDark ? Colors.amber : iconColor,
|
||||
size: 22,
|
||||
),
|
||||
onPressed: themeProvider.toggle,
|
||||
),
|
||||
|
||||
// Campana
|
||||
Stack(
|
||||
clipBehavior: Clip.none,
|
||||
children: [
|
||||
// Menú hamburguesa (móvil)
|
||||
if (size.width <= 700)
|
||||
IconButton(
|
||||
icon: Icon(Icons.menu, color: iconColor),
|
||||
onPressed: () => SideMenuProvider.openMenu(),
|
||||
),
|
||||
|
||||
const Spacer(),
|
||||
|
||||
// Puntuación
|
||||
Icon(Icons.star_rounded, color: Colors.amber, size: 17),
|
||||
const SizedBox(width: 3),
|
||||
Text(
|
||||
professionalProvider.isProModeActive
|
||||
? reputation.averagePro.toStringAsFixed(1)
|
||||
: reputation.average.toStringAsFixed(1),
|
||||
style: TextStyle(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: isDark ? Colors.white70 : const Color(0xFF1E293B),
|
||||
),
|
||||
),
|
||||
|
||||
const SizedBox(width: 8),
|
||||
|
||||
// Toggle día / noche
|
||||
Tooltip(
|
||||
message: isDark ? 'Cambiar a modo día' : 'Cambiar a modo noche',
|
||||
child: InkWell(
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
onTap: themeProvider.toggle,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(8),
|
||||
child: Icon(
|
||||
isDark ? Icons.light_mode : Icons.dark_mode,
|
||||
color: isDark ? Colors.amber : iconColor,
|
||||
size: 22,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Campana de notificaciones
|
||||
_NotificationBell(isDark: isDark, iconColor: iconColor),
|
||||
|
||||
const SizedBox(width: 4),
|
||||
|
||||
// Avatar
|
||||
const NavbarAvatar(),
|
||||
const SizedBox(width: 14),
|
||||
],
|
||||
),
|
||||
);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
class _NotificationBell extends StatelessWidget {
|
||||
final bool isDark;
|
||||
final Color iconColor;
|
||||
const _NotificationBell({required this.isDark, required this.iconColor});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Consumer<ServicesProvider>(builder: (context, sp, _) {
|
||||
final pendingCount =
|
||||
sp.services.where((s) => s.service.status.index == 0).length;
|
||||
|
||||
return Tooltip(
|
||||
message: 'Notificaciones',
|
||||
child: Stack(
|
||||
clipBehavior: Clip.none,
|
||||
children: [
|
||||
InkWell(
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
onTap: () => _showSheet(context, sp),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(8),
|
||||
child: Icon(
|
||||
IconButton(
|
||||
tooltip: 'Notificaciones',
|
||||
icon: Icon(
|
||||
pendingCount > 0
|
||||
? Icons.notifications_active
|
||||
: Icons.notifications_outlined,
|
||||
@@ -129,43 +108,55 @@ class _NotificationBell extends StatelessWidget {
|
||||
: iconColor,
|
||||
size: 22,
|
||||
),
|
||||
onPressed: () => _showNotifications(
|
||||
context,
|
||||
servicesProvider,
|
||||
professionalProvider.isProModeActive,
|
||||
isDark,
|
||||
),
|
||||
),
|
||||
),
|
||||
if (pendingCount > 0)
|
||||
Positioned(
|
||||
top: 4,
|
||||
right: 4,
|
||||
child: Container(
|
||||
width: 15,
|
||||
height: 15,
|
||||
decoration: const BoxDecoration(
|
||||
color: Color(0xFFEF4444),
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
child: Center(
|
||||
child: Text(
|
||||
pendingCount > 9 ? '9+' : '$pendingCount',
|
||||
style: const TextStyle(
|
||||
color: Colors.white,
|
||||
fontSize: 8,
|
||||
fontWeight: FontWeight.bold,
|
||||
if (pendingCount > 0)
|
||||
Positioned(
|
||||
top: 6,
|
||||
right: 6,
|
||||
child: Container(
|
||||
width: 15,
|
||||
height: 15,
|
||||
decoration: const BoxDecoration(
|
||||
color: Color(0xFFEF4444),
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
child: Center(
|
||||
child: Text(
|
||||
pendingCount > 9 ? '9+' : '$pendingCount',
|
||||
style: const TextStyle(
|
||||
color: Colors.white,
|
||||
fontSize: 8,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
});
|
||||
],
|
||||
),
|
||||
|
||||
const SizedBox(width: 4),
|
||||
const NavbarAvatar(),
|
||||
const SizedBox(width: 12),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
void _showSheet(BuildContext context, ServicesProvider sp) {
|
||||
final isDark = Theme.of(context).brightness == Brightness.dark;
|
||||
void _showNotifications(
|
||||
BuildContext context,
|
||||
ServicesProvider sp,
|
||||
bool isPro,
|
||||
bool isDark,
|
||||
) {
|
||||
final pending =
|
||||
sp.services.where((s) => s.service.status.index == 0).toList();
|
||||
final isPro = Provider.of<ProfessionalProvider>(context, listen: false)
|
||||
.isProModeActive;
|
||||
|
||||
showModalBottomSheet(
|
||||
context: context,
|
||||
@@ -192,11 +183,18 @@ class _NotificationBell extends StatelessWidget {
|
||||
const SizedBox(height: 16),
|
||||
Row(
|
||||
children: [
|
||||
const Icon(Icons.notifications_outlined, size: 20),
|
||||
Icon(Icons.notifications_outlined,
|
||||
size: 20,
|
||||
color: isDark ? Colors.white70 : Colors.black87),
|
||||
const SizedBox(width: 8),
|
||||
const Text('Notificaciones',
|
||||
style: TextStyle(
|
||||
fontSize: 16, fontWeight: FontWeight.bold)),
|
||||
Text(
|
||||
'Notificaciones',
|
||||
style: TextStyle(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: isDark ? Colors.white : Colors.black87,
|
||||
),
|
||||
),
|
||||
const Spacer(),
|
||||
if (pending.isNotEmpty)
|
||||
Container(
|
||||
@@ -237,23 +235,28 @@ class _NotificationBell extends StatelessWidget {
|
||||
const Color(0xFF42A4EF).withOpacity(0.12),
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
child: const Icon(
|
||||
Icons.room_service_outlined,
|
||||
color: Color(0xFF42A4EF),
|
||||
size: 20),
|
||||
child: const Icon(Icons.room_service_outlined,
|
||||
color: Color(0xFF42A4EF), size: 20),
|
||||
),
|
||||
title: Text(
|
||||
isPro
|
||||
? 'Nueva solicitud de servicio'
|
||||
: 'Servicio pendiente',
|
||||
style: const TextStyle(
|
||||
fontSize: 13, fontWeight: FontWeight.w600),
|
||||
style: TextStyle(
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: isDark ? Colors.white : Colors.black87,
|
||||
),
|
||||
),
|
||||
subtitle: Text(
|
||||
s.service.address.isNotEmpty
|
||||
? s.service.address
|
||||
: 'Sin dirección',
|
||||
style: const TextStyle(fontSize: 12),
|
||||
style: TextStyle(
|
||||
fontSize: 12,
|
||||
color: isDark
|
||||
? Colors.white54
|
||||
: Colors.black54),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
|
||||
Reference in New Issue
Block a user