usite-sas-bic/prosappweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: navbar StatefulWidget + dashboard colores dinamicos

Browse Source 
- 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
2026-06-27 09:16:31 -05:00
co-authored by Claude Sonnet 4.6
parent 8aa03f437c
commit fac4135835
2 changed files with 183 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/ui/shared/navbar.dart
+145 -142
View File
@@ -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:prosapp_web_app/ui/shared/widgets/navbar_avatar.dart';
import 'package:provider/provider.dart'; import 'package:provider/provider.dart';
class Navbar extends StatelessWidget { class Navbar extends StatefulWidget {
const Navbar({super.key}); 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 @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final size = MediaQuery.of(context).size; 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 iconColor = isDark ? Colors.white70 : const Color(0xFF475569);
final isDark = themeProvider.isDark; final bgColor = isDark ? const Color(0xFF1E293B) : Colors.white;
final iconColor = isDark ? Colors.white70 : const Color(0xFF475569);
final bgColor = isDark ? const Color(0xFF1E293B) : Colors.white;
final shadowColor = isDark ? Colors.black54 : Colors.black12;
return Consumer<ScoreProvider>(builder: (context, scoreProvider, _) { final reputation = scoreProvider.reputation;
final professionalProvider = final pendingCount =
Provider.of<ProfessionalProvider>(context, listen: false); servicesProvider.services.where((s) => s.service.status.index == 0).length;
WidgetsBinding.instance.addPostFrameCallback((_) { return Container(
scoreProvider.loadReputation( width: double.infinity,
context.read<AuthProvider>().user!.id); height: 56,
}); decoration: BoxDecoration(
color: bgColor,
final reputation = scoreProvider.reputation; boxShadow: [
BoxShadow(
return Container( color: isDark ? Colors.black54 : Colors.black12,
width: double.infinity, blurRadius: 6,
height: 56,
decoration: BoxDecoration(
color: bgColor,
boxShadow: [BoxShadow(color: shadowColor, 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: [ children: [
// Menú hamburguesa (móvil) IconButton(
if (size.width <= 700) tooltip: 'Notificaciones',
IconButton( icon: Icon(
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(
pendingCount > 0 pendingCount > 0
? Icons.notifications_active ? Icons.notifications_active
: Icons.notifications_outlined, : Icons.notifications_outlined,
@@ -129,43 +108,55 @@ class _NotificationBell extends StatelessWidget {
: iconColor, : iconColor,
size: 22, size: 22,
), ),
onPressed: () => _showNotifications(
context,
servicesProvider,
professionalProvider.isProModeActive,
isDark,
),
), ),
), if (pendingCount > 0)
if (pendingCount > 0) Positioned(
Positioned( top: 6,
top: 4, right: 6,
right: 4, child: Container(
child: Container( width: 15,
width: 15, height: 15,
height: 15, decoration: const BoxDecoration(
decoration: const BoxDecoration( color: Color(0xFFEF4444),
color: Color(0xFFEF4444), shape: BoxShape.circle,
shape: BoxShape.circle, ),
), child: Center(
child: Center( child: Text(
child: Text( pendingCount > 9 ? '9+' : '$pendingCount',
pendingCount > 9 ? '9+' : '$pendingCount', style: const TextStyle(
style: const TextStyle( color: Colors.white,
color: Colors.white, fontSize: 8,
fontSize: 8, fontWeight: FontWeight.bold,
fontWeight: FontWeight.bold, ),
), ),
), ),
), ),
), ),
), ],
], ),
),
); const SizedBox(width: 4),
}); const NavbarAvatar(),
const SizedBox(width: 12),
],
),
);
} }
void _showSheet(BuildContext context, ServicesProvider sp) { void _showNotifications(
final isDark = Theme.of(context).brightness == Brightness.dark; BuildContext context,
ServicesProvider sp,
bool isPro,
bool isDark,
) {
final pending = final pending =
sp.services.where((s) => s.service.status.index == 0).toList(); sp.services.where((s) => s.service.status.index == 0).toList();
final isPro = Provider.of<ProfessionalProvider>(context, listen: false)
.isProModeActive;
showModalBottomSheet( showModalBottomSheet(
context: context, context: context,
@@ -192,11 +183,18 @@ class _NotificationBell extends StatelessWidget {
const SizedBox(height: 16), const SizedBox(height: 16),
Row( Row(
children: [ 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 SizedBox(width: 8),
const Text('Notificaciones', Text(
style: TextStyle( 'Notificaciones',
fontSize: 16, fontWeight: FontWeight.bold)), style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: isDark ? Colors.white : Colors.black87,
),
),
const Spacer(), const Spacer(),
if (pending.isNotEmpty) if (pending.isNotEmpty)
Container( Container(
@@ -237,23 +235,28 @@ class _NotificationBell extends StatelessWidget {
const Color(0xFF42A4EF).withOpacity(0.12), const Color(0xFF42A4EF).withOpacity(0.12),
shape: BoxShape.circle, shape: BoxShape.circle,
), ),
child: const Icon( child: const Icon(Icons.room_service_outlined,
Icons.room_service_outlined, color: Color(0xFF42A4EF), size: 20),
color: Color(0xFF42A4EF),
size: 20),
), ),
title: Text( title: Text(
isPro isPro
? 'Nueva solicitud de servicio' ? 'Nueva solicitud de servicio'
: 'Servicio pendiente', : 'Servicio pendiente',
style: const TextStyle( style: TextStyle(
fontSize: 13, fontWeight: FontWeight.w600), fontSize: 13,
fontWeight: FontWeight.w600,
color: isDark ? Colors.white : Colors.black87,
),
), ),
subtitle: Text( subtitle: Text(
s.service.address.isNotEmpty s.service.address.isNotEmpty
? s.service.address ? s.service.address
: 'Sin dirección', : 'Sin dirección',
style: const TextStyle(fontSize: 12), style: TextStyle(
fontSize: 12,
color: isDark
? Colors.white54
: Colors.black54),
maxLines: 1, maxLines: 1,
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,
), ),
lib/ui/views/dashboard_view.dart
+38 -22
View File
@@ -13,6 +13,7 @@ import 'package:prosapp_web_app/models/usuario.dart';
import 'package:prosapp_web_app/models/usuario_profesional.dart'; import 'package:prosapp_web_app/models/usuario_profesional.dart';
import 'package:prosapp_web_app/providers/auth_provider.dart'; import 'package:prosapp_web_app/providers/auth_provider.dart';
import 'package:prosapp_web_app/providers/cities_provider.dart'; import 'package:prosapp_web_app/providers/cities_provider.dart';
import 'package:prosapp_web_app/providers/theme_provider.dart';
import 'package:prosapp_web_app/router/router.dart'; import 'package:prosapp_web_app/router/router.dart';
import 'package:prosapp_web_app/services/api_service.dart'; import 'package:prosapp_web_app/services/api_service.dart';
import 'package:prosapp_web_app/services/maps_service.dart'; import 'package:prosapp_web_app/services/maps_service.dart';
@@ -292,6 +293,14 @@ class _DashboardViewState extends State<DashboardView> {
return const Center(child: CircularProgressIndicator()); return const Center(child: CircularProgressIndicator());
} }
final isDark = context.watch<ThemeProvider>().isDark;
final cardBg = isDark ? const Color(0xFF1E293B) : Colors.white;
final cardBorder = isDark ? const Color(0xFF334155) : const Color(0xFFE0E0E0);
final textColor = isDark ? Colors.white : Colors.black87;
final subtextColor = isDark ? Colors.white54 : Colors.black54;
final hintColor = isDark ? Colors.white38 : Colors.grey;
final inputFill = isDark ? const Color(0xFF0F172A) : Colors.white;
return GestureDetector( return GestureDetector(
onTap: () { onTap: () {
_searchFocus.unfocus(); _searchFocus.unfocus();
@@ -355,11 +364,11 @@ class _DashboardViewState extends State<DashboardView> {
children: [ children: [
Container( Container(
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.white, color: cardBg,
borderRadius: BorderRadius.circular(14), borderRadius: BorderRadius.circular(14),
boxShadow: [ boxShadow: [
BoxShadow( BoxShadow(
color: Colors.black.withOpacity(0.15), color: Colors.black.withOpacity(isDark ? 0.4 : 0.15),
blurRadius: 14, blurRadius: 14,
offset: const Offset(0, 4), offset: const Offset(0, 4),
), ),
@@ -369,10 +378,10 @@ class _DashboardViewState extends State<DashboardView> {
controller: _searchController, controller: _searchController,
focusNode: _searchFocus, focusNode: _searchFocus,
onChanged: _onSearchChanged, onChanged: _onSearchChanged,
style: const TextStyle(fontSize: 14), style: TextStyle(fontSize: 14, color: textColor),
decoration: InputDecoration( decoration: InputDecoration(
hintText: 'Busca o mueve el mapa para fijar tu dirección', hintText: 'Busca o mueve el mapa para fijar tu dirección',
hintStyle: const TextStyle(color: Colors.grey, fontSize: 13), hintStyle: TextStyle(color: hintColor, fontSize: 13),
prefixIcon: _geocoding prefixIcon: _geocoding
? const Padding( ? const Padding(
padding: EdgeInsets.all(13), padding: EdgeInsets.all(13),
@@ -406,10 +415,10 @@ class _DashboardViewState extends State<DashboardView> {
Container( Container(
margin: const EdgeInsets.only(top: 4), margin: const EdgeInsets.only(top: 4),
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.white, color: cardBg,
borderRadius: BorderRadius.circular(12), borderRadius: BorderRadius.circular(12),
boxShadow: [ boxShadow: [
BoxShadow(color: Colors.black.withOpacity(0.12), blurRadius: 10), BoxShadow(color: Colors.black.withOpacity(isDark ? 0.4 : 0.12), blurRadius: 10),
], ],
), ),
child: Column( child: Column(
@@ -431,7 +440,7 @@ class _DashboardViewState extends State<DashboardView> {
Expanded( Expanded(
child: Text( child: Text(
addr, addr,
style: const TextStyle(fontSize: 13), style: TextStyle(fontSize: 13, color: textColor),
maxLines: 2, maxLines: 2,
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,
), ),
@@ -440,7 +449,8 @@ class _DashboardViewState extends State<DashboardView> {
), ),
), ),
), ),
if (!isLast) Divider(height: 1, indent: 16, color: Colors.grey[100]), if (!isLast) Divider(height: 1, indent: 16,
color: isDark ? Colors.white12 : Colors.grey[100]),
], ],
); );
}).toList(), }).toList(),
@@ -471,11 +481,11 @@ class _DashboardViewState extends State<DashboardView> {
bottom: 0, bottom: 0,
child: Container( child: Container(
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.white, color: cardBg,
borderRadius: const BorderRadius.vertical(top: Radius.circular(20)), borderRadius: const BorderRadius.vertical(top: Radius.circular(20)),
boxShadow: [ boxShadow: [
BoxShadow( BoxShadow(
color: Colors.black.withOpacity(0.13), color: Colors.black.withOpacity(isDark ? 0.4 : 0.13),
blurRadius: 18, blurRadius: 18,
offset: const Offset(0, -4), offset: const Offset(0, -4),
), ),
@@ -504,7 +514,9 @@ class _DashboardViewState extends State<DashboardView> {
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8), padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
margin: const EdgeInsets.only(bottom: 10), margin: const EdgeInsets.only(bottom: 10),
decoration: BoxDecoration( decoration: BoxDecoration(
color: const Color(0xFFF0F8FF), color: isDark
? const Color(0xFF42A4EF).withOpacity(0.12)
: const Color(0xFFF0F8FF),
borderRadius: BorderRadius.circular(8), borderRadius: BorderRadius.circular(8),
border: Border.all(color: const Color(0xFF42A4EF).withOpacity(0.35)), border: Border.all(color: const Color(0xFF42A4EF).withOpacity(0.35)),
), ),
@@ -515,7 +527,7 @@ class _DashboardViewState extends State<DashboardView> {
Expanded( Expanded(
child: Text( child: Text(
_currentAddress, _currentAddress,
style: const TextStyle(fontSize: 12, color: Colors.black87), style: TextStyle(fontSize: 12, color: textColor),
maxLines: 2, maxLines: 2,
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,
), ),
@@ -533,17 +545,21 @@ class _DashboardViewState extends State<DashboardView> {
border: Border.all( border: Border.all(
color: _professional != null color: _professional != null
? const Color(0xFF42A4EF) ? const Color(0xFF42A4EF)
: const Color(0xFFE0E0E0), : cardBorder,
), ),
borderRadius: BorderRadius.circular(10), borderRadius: BorderRadius.circular(10),
color: _professional != null ? const Color(0xFFF0F8FF) : Colors.grey[50], color: _professional != null
? const Color(0xFF42A4EF).withOpacity(0.1)
: (isDark ? const Color(0xFF0F172A) : Colors.grey[50]),
), ),
child: Row( child: Row(
children: [ children: [
Icon( Icon(
Icons.person_outline, Icons.person_outline,
size: 20, size: 20,
color: _professional != null ? const Color(0xFF42A4EF) : Colors.grey, color: _professional != null
? const Color(0xFF42A4EF)
: subtextColor,
), ),
const SizedBox(width: 10), const SizedBox(width: 10),
Expanded( Expanded(
@@ -551,11 +567,11 @@ class _DashboardViewState extends State<DashboardView> {
_professional?.user.name ?? 'Seleccionar profesional', _professional?.user.name ?? 'Seleccionar profesional',
style: TextStyle( style: TextStyle(
fontSize: 13, fontSize: 13,
color: _professional != null ? Colors.black87 : Colors.grey, color: _professional != null ? textColor : subtextColor,
), ),
), ),
), ),
const Icon(Icons.chevron_right, color: Colors.grey, size: 18), Icon(Icons.chevron_right, color: subtextColor, size: 18),
], ],
), ),
), ),
@@ -567,9 +583,9 @@ class _DashboardViewState extends State<DashboardView> {
Container( Container(
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 10), padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 10),
decoration: BoxDecoration( decoration: BoxDecoration(
border: Border.all(color: const Color(0xFFE0E0E0)), border: Border.all(color: cardBorder),
borderRadius: BorderRadius.circular(10), borderRadius: BorderRadius.circular(10),
color: Colors.grey[50], color: isDark ? const Color(0xFF0F172A) : Colors.grey[50],
), ),
child: Row( child: Row(
children: [ children: [
@@ -577,14 +593,14 @@ class _DashboardViewState extends State<DashboardView> {
const SizedBox(width: 8), const SizedBox(width: 8),
Text( Text(
DateFormat('dd/MM/yyyy').format(_selectedDay!), DateFormat('dd/MM/yyyy').format(_selectedDay!),
style: const TextStyle(fontSize: 13), style: TextStyle(fontSize: 13, color: textColor),
), ),
const SizedBox(width: 14), const SizedBox(width: 14),
const Icon(Icons.access_time, size: 17, color: Color(0xFF42A4EF)), const Icon(Icons.access_time, size: 17, color: Color(0xFF42A4EF)),
const SizedBox(width: 6), const SizedBox(width: 6),
Text( Text(
ScheduleEntity.getFormatTime(_selectedHour!) ?? '', ScheduleEntity.getFormatTime(_selectedHour!) ?? '',
style: const TextStyle(fontSize: 13), style: TextStyle(fontSize: 13, color: textColor),
), ),
const Spacer(), const Spacer(),
GestureDetector( GestureDetector(
@@ -593,7 +609,7 @@ class _DashboardViewState extends State<DashboardView> {
_selectedHour = null; _selectedHour = null;
_professional = null; _professional = null;
}), }),
child: const Icon(Icons.close, size: 18, color: Colors.grey), child: Icon(Icons.close, size: 18, color: subtextColor),
), ),
], ],
), ),