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

fix: simplificar navbar, iconos siempre visibles

Browse Source 
- Quitar AnimatedSwitcher/RotationTransition que ocultaba los iconos
- Icono sol/luna y campana con InkWell simple y colores explicitos
- Fondo navbar animado segun tema (isDark)
- DashboardLayout usa scaffoldBackgroundColor del tema

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Lizandro Guarnizo
2026-06-27 08:48:55 -05:00
co-authored by Claude Sonnet 4.6
parent 6f39bbf9e2
commit 8aa03f437c
2 changed files with 160 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/ui/layouts/dashboard/dashboard_layout.dart
+1 -1
View File
@@ -27,7 +27,7 @@ class _DashboardLayoutState extends State<DashboardLayout>
final size = MediaQuery.of(context).size; final size = MediaQuery.of(context).size;
return Scaffold( return Scaffold(
backgroundColor: const Color(0xffEDF1F2), backgroundColor: Theme.of(context).scaffoldBackgroundColor,
body: Stack( body: Stack(
children: [ children: [
Row( Row(
lib/ui/shared/navbar.dart
+159 -160
View File
@@ -14,160 +14,158 @@ class Navbar extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final size = MediaQuery.of(context).size; final size = MediaQuery.of(context).size;
final professionalProvider = Provider.of<ProfessionalProvider>(context);
final themeProvider = Provider.of<ThemeProvider>(context);
final scoreProvider = Provider.of<ScoreProvider>(context, listen: false);
final isDark = themeProvider.isDark;
WidgetsBinding.instance.addPostFrameCallback((_) { return Consumer<ThemeProvider>(builder: (context, themeProvider, _) {
scoreProvider.loadReputation(context.read<AuthProvider>().user!.id); 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;
return Consumer<ScoreProvider>(builder: (context, scoreProvider, _) { return Consumer<ScoreProvider>(builder: (context, scoreProvider, _) {
final reputation = scoreProvider.reputation; final professionalProvider =
Provider.of<ProfessionalProvider>(context, listen: false);
return AnimatedContainer( WidgetsBinding.instance.addPostFrameCallback((_) {
duration: const Duration(milliseconds: 250), scoreProvider.loadReputation(
width: double.infinity, context.read<AuthProvider>().user!.id);
height: 56, });
decoration: BoxDecoration(
color: isDark ? const Color(0xFF1E293B) : Colors.white,
boxShadow: [
BoxShadow(
color: isDark ? Colors.black45 : Colors.black12,
blurRadius: 6,
),
],
),
child: Row(
children: [
if (size.width <= 700)
IconButton(
icon: Icon(Icons.menu_outlined,
color: isDark ? Colors.white70 : Colors.black54),
onPressed: () => SideMenuProvider.openMenu(),
),
const SizedBox(width: 8),
const Spacer(),
// Puntuación final reputation = scoreProvider.reputation;
Row(
children: [ return Container(
Icon(Icons.star, color: Colors.amber[600], size: 16), width: double.infinity,
const SizedBox(width: 3), height: 56,
Text( decoration: BoxDecoration(
professionalProvider.isProModeActive color: bgColor,
? reputation.averagePro.toStringAsFixed(1) boxShadow: [BoxShadow(color: shadowColor, blurRadius: 6)],
: reputation.average.toStringAsFixed(1), ),
style: TextStyle( child: Row(
fontSize: 14, children: [
fontWeight: FontWeight.w600, // Menú hamburguesa (móvil)
color: isDark ? Colors.white70 : Colors.black87, if (size.width <= 700)
), IconButton(
icon: Icon(Icons.menu, color: iconColor),
onPressed: () => SideMenuProvider.openMenu(),
), ),
],
),
const SizedBox(width: 4), const Spacer(),
// Toggle día / noche // Puntuación
Tooltip( Icon(Icons.star_rounded, color: Colors.amber, size: 17),
message: isDark ? 'Modo día' : 'Modo noche', const SizedBox(width: 3),
child: IconButton( Text(
onPressed: themeProvider.toggle, professionalProvider.isProModeActive
icon: AnimatedSwitcher( ? reputation.averagePro.toStringAsFixed(1)
duration: const Duration(milliseconds: 300), : reputation.average.toStringAsFixed(1),
transitionBuilder: (child, anim) => RotationTransition( style: TextStyle(
turns: anim, fontSize: 14,
child: FadeTransition(opacity: anim, child: child), fontWeight: FontWeight.w600,
), color: isDark ? Colors.white70 : const Color(0xFF1E293B),
child: Icon( ),
isDark ? Icons.light_mode_rounded : Icons.dark_mode_rounded, ),
key: ValueKey(isDark),
color: isDark ? Colors.amber : const Color(0xFF64748B), const SizedBox(width: 8),
size: 22,
// 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 // Campana de notificaciones
_NotificationBell(isDark: isDark), _NotificationBell(isDark: isDark, iconColor: iconColor),
// Avatar const SizedBox(width: 4),
const NavbarAvatar(),
const SizedBox(width: 12), // Avatar
], const NavbarAvatar(),
), const SizedBox(width: 14),
); ],
),
);
});
}); });
} }
} }
class _NotificationBell extends StatelessWidget { class _NotificationBell extends StatelessWidget {
final bool isDark; final bool isDark;
const _NotificationBell({required this.isDark}); final Color iconColor;
const _NotificationBell({required this.isDark, required this.iconColor});
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final professionalProvider = Provider.of<ProfessionalProvider>(context);
return Consumer<ServicesProvider>(builder: (context, sp, _) { return Consumer<ServicesProvider>(builder: (context, sp, _) {
final pending = sp.services final pendingCount =
.where((s) => s.service.status.index == 0) sp.services.where((s) => s.service.status.index == 0).length;
.length;
return Stack( return Tooltip(
clipBehavior: Clip.none, message: 'Notificaciones',
children: [ child: Stack(
IconButton( clipBehavior: Clip.none,
tooltip: 'Notificaciones', children: [
icon: AnimatedSwitcher( InkWell(
duration: const Duration(milliseconds: 300), borderRadius: BorderRadius.circular(20),
child: Icon( onTap: () => _showSheet(context, sp),
pending > 0 child: Padding(
? Icons.notifications_active_rounded padding: const EdgeInsets.all(8),
: Icons.notifications_outlined, child: Icon(
key: ValueKey(pending > 0), pendingCount > 0
color: pending > 0 ? Icons.notifications_active
? const Color(0xFF42A4EF) : Icons.notifications_outlined,
: (isDark ? Colors.white54 : const Color(0xFF64748B)), color: pendingCount > 0
size: 22, ? const Color(0xFF42A4EF)
: iconColor,
size: 22,
),
), ),
), ),
onPressed: () => _showSheet(context, professionalProvider.isProModeActive, sp), if (pendingCount > 0)
), Positioned(
if (pending > 0) top: 4,
Positioned( right: 4,
top: 6, child: Container(
right: 6, width: 15,
child: Container( height: 15,
width: 16, decoration: const BoxDecoration(
height: 16, color: Color(0xFFEF4444),
decoration: const BoxDecoration( shape: BoxShape.circle,
color: Color(0xFFEF4444), ),
shape: BoxShape.circle, child: Center(
), child: Text(
child: Center( pendingCount > 9 ? '9+' : '$pendingCount',
child: Text( style: const TextStyle(
pending > 9 ? '9+' : '$pending', color: Colors.white,
style: const TextStyle( fontSize: 8,
color: Colors.white, fontWeight: FontWeight.bold,
fontSize: 9, ),
fontWeight: FontWeight.bold,
), ),
), ),
), ),
), ),
), ],
], ),
); );
}); });
} }
void _showSheet(BuildContext context, bool isPro, ServicesProvider sp) { void _showSheet(BuildContext context, ServicesProvider sp) {
final isDark = Theme.of(context).brightness == Brightness.dark; final isDark = Theme.of(context).brightness == Brightness.dark;
final pending = sp.services.where((s) => s.service.status.index == 0).toList(); final pending =
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,
@@ -183,7 +181,8 @@ class _NotificationBell extends StatelessWidget {
children: [ children: [
Center( Center(
child: Container( child: Container(
width: 36, height: 4, width: 36,
height: 4,
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.grey[400], color: Colors.grey[400],
borderRadius: BorderRadius.circular(2), borderRadius: BorderRadius.circular(2),
@@ -193,25 +192,23 @@ class _NotificationBell extends StatelessWidget {
const SizedBox(height: 16), const SizedBox(height: 16),
Row( Row(
children: [ children: [
Icon(Icons.notifications_outlined, const Icon(Icons.notifications_outlined, size: 20),
size: 20, color: isDark ? Colors.white70 : Colors.black87),
const SizedBox(width: 8), const SizedBox(width: 8),
Text('Notificaciones', const Text('Notificaciones',
style: TextStyle( style: TextStyle(
fontSize: 16, fontSize: 16, fontWeight: FontWeight.bold)),
fontWeight: FontWeight.bold,
color: isDark ? Colors.white : Colors.black87,
)),
const Spacer(), const Spacer(),
if (pending.isNotEmpty) if (pending.isNotEmpty)
Container( Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 3), padding: const EdgeInsets.symmetric(
horizontal: 8, vertical: 3),
decoration: BoxDecoration( decoration: BoxDecoration(
color: const Color(0xFF42A4EF), color: const Color(0xFF42A4EF),
borderRadius: BorderRadius.circular(10), borderRadius: BorderRadius.circular(10),
), ),
child: Text('${pending.length} nuevas', child: Text('${pending.length} nuevas',
style: const TextStyle(color: Colors.white, fontSize: 11)), style: const TextStyle(
color: Colors.white, fontSize: 11)),
), ),
], ],
), ),
@@ -231,36 +228,38 @@ class _NotificationBell extends StatelessWidget {
) )
else else
...pending.take(5).map((s) => ListTile( ...pending.take(5).map((s) => ListTile(
contentPadding: EdgeInsets.zero, contentPadding: EdgeInsets.zero,
leading: Container( leading: Container(
width: 40, height: 40, width: 40,
decoration: BoxDecoration( height: 40,
color: const Color(0xFF42A4EF).withOpacity(0.12), decoration: BoxDecoration(
shape: BoxShape.circle, color:
), const Color(0xFF42A4EF).withOpacity(0.12),
child: const Icon(Icons.room_service_outlined, shape: BoxShape.circle,
color: Color(0xFF42A4EF), size: 20), ),
), child: const Icon(
title: Text( Icons.room_service_outlined,
isPro ? 'Nueva solicitud de servicio' : 'Servicio pendiente', color: Color(0xFF42A4EF),
style: TextStyle( size: 20),
fontSize: 13, ),
fontWeight: FontWeight.w600, title: Text(
color: isDark ? Colors.white : Colors.black87, isPro
), ? 'Nueva solicitud de servicio'
), : 'Servicio pendiente',
subtitle: Text( style: const TextStyle(
s.service.address.isNotEmpty ? s.service.address : 'Sin dirección', fontSize: 13, fontWeight: FontWeight.w600),
style: TextStyle( ),
fontSize: 12, subtitle: Text(
color: isDark ? Colors.white54 : Colors.black54, s.service.address.isNotEmpty
), ? s.service.address
maxLines: 1, : 'Sin dirección',
overflow: TextOverflow.ellipsis, style: const TextStyle(fontSize: 12),
), maxLines: 1,
trailing: const Icon(Icons.circle, overflow: TextOverflow.ellipsis,
color: Color(0xFF42A4EF), size: 8), ),
)), trailing: const Icon(Icons.circle,
color: Color(0xFF42A4EF), size: 8),
)),
], ],
), ),
), ),