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
+91 -92
View File
@@ -14,46 +14,44 @@ 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 professionalProvider =
Provider.of<ProfessionalProvider>(context, listen: false);
WidgetsBinding.instance.addPostFrameCallback((_) {
scoreProvider.loadReputation(
context.read<AuthProvider>().user!.id);
});
final reputation = scoreProvider.reputation; final reputation = scoreProvider.reputation;
return AnimatedContainer( return Container(
duration: const Duration(milliseconds: 250),
width: double.infinity, width: double.infinity,
height: 56, height: 56,
decoration: BoxDecoration( decoration: BoxDecoration(
color: isDark ? const Color(0xFF1E293B) : Colors.white, color: bgColor,
boxShadow: [ boxShadow: [BoxShadow(color: shadowColor, blurRadius: 6)],
BoxShadow(
color: isDark ? Colors.black45 : Colors.black12,
blurRadius: 6,
),
],
), ),
child: Row( child: Row(
children: [ children: [
// Menú hamburguesa (móvil)
if (size.width <= 700) if (size.width <= 700)
IconButton( IconButton(
icon: Icon(Icons.menu_outlined, icon: Icon(Icons.menu, color: iconColor),
color: isDark ? Colors.white70 : Colors.black54),
onPressed: () => SideMenuProvider.openMenu(), onPressed: () => SideMenuProvider.openMenu(),
), ),
const SizedBox(width: 8),
const Spacer(), const Spacer(),
// Puntuación // Puntuación
Row( Icon(Icons.star_rounded, color: Colors.amber, size: 17),
children: [
Icon(Icons.star, color: Colors.amber[600], size: 16),
const SizedBox(width: 3), const SizedBox(width: 3),
Text( Text(
professionalProvider.isProModeActive professionalProvider.isProModeActive
@@ -62,98 +60,94 @@ class Navbar extends StatelessWidget {
style: TextStyle( style: TextStyle(
fontSize: 14, fontSize: 14,
fontWeight: FontWeight.w600, fontWeight: FontWeight.w600,
color: isDark ? Colors.white70 : Colors.black87, color: isDark ? Colors.white70 : const Color(0xFF1E293B),
), ),
), ),
],
),
const SizedBox(width: 4), const SizedBox(width: 8),
// Toggle día / noche // Toggle día / noche
Tooltip( Tooltip(
message: isDark ? 'Modo día' : 'Modo noche', message: isDark ? 'Cambiar a modo día' : 'Cambiar a modo noche',
child: IconButton( child: InkWell(
onPressed: themeProvider.toggle, borderRadius: BorderRadius.circular(20),
icon: AnimatedSwitcher( onTap: themeProvider.toggle,
duration: const Duration(milliseconds: 300), child: Padding(
transitionBuilder: (child, anim) => RotationTransition( padding: const EdgeInsets.all(8),
turns: anim,
child: FadeTransition(opacity: anim, child: child),
),
child: Icon( child: Icon(
isDark ? Icons.light_mode_rounded : Icons.dark_mode_rounded, isDark ? Icons.light_mode : Icons.dark_mode,
key: ValueKey(isDark), color: isDark ? Colors.amber : iconColor,
color: isDark ? Colors.amber : const Color(0xFF64748B),
size: 22, size: 22,
), ),
), ),
), ),
), ),
// Campana // Campana de notificaciones
_NotificationBell(isDark: isDark), _NotificationBell(isDark: isDark, iconColor: iconColor),
const SizedBox(width: 4),
// Avatar // Avatar
const NavbarAvatar(), const NavbarAvatar(),
const SizedBox(width: 12), 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(
message: 'Notificaciones',
child: Stack(
clipBehavior: Clip.none, clipBehavior: Clip.none,
children: [ children: [
IconButton( InkWell(
tooltip: 'Notificaciones', borderRadius: BorderRadius.circular(20),
icon: AnimatedSwitcher( onTap: () => _showSheet(context, sp),
duration: const Duration(milliseconds: 300), child: Padding(
padding: const EdgeInsets.all(8),
child: Icon( child: Icon(
pending > 0 pendingCount > 0
? Icons.notifications_active_rounded ? Icons.notifications_active
: Icons.notifications_outlined, : Icons.notifications_outlined,
key: ValueKey(pending > 0), color: pendingCount > 0
color: pending > 0
? const Color(0xFF42A4EF) ? const Color(0xFF42A4EF)
: (isDark ? Colors.white54 : const Color(0xFF64748B)), : iconColor,
size: 22, size: 22,
), ),
), ),
onPressed: () => _showSheet(context, professionalProvider.isProModeActive, sp),
), ),
if (pending > 0) if (pendingCount > 0)
Positioned( Positioned(
top: 6, top: 4,
right: 6, right: 4,
child: Container( child: Container(
width: 16, width: 15,
height: 16, 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(
pending > 9 ? '9+' : '$pending', pendingCount > 9 ? '9+' : '$pendingCount',
style: const TextStyle( style: const TextStyle(
color: Colors.white, color: Colors.white,
fontSize: 9, fontSize: 8,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
), ),
), ),
@@ -161,13 +155,17 @@ class _NotificationBell extends StatelessWidget {
), ),
), ),
], ],
),
); );
}); });
} }
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)),
), ),
], ],
), ),
@@ -233,28 +230,30 @@ class _NotificationBell extends StatelessWidget {
...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,
height: 40,
decoration: BoxDecoration( decoration: BoxDecoration(
color: const Color(0xFF42A4EF).withOpacity(0.12), color:
const Color(0xFF42A4EF).withOpacity(0.12),
shape: BoxShape.circle, shape: BoxShape.circle,
), ),
child: const Icon(Icons.room_service_outlined, child: const Icon(
color: Color(0xFF42A4EF), size: 20), Icons.room_service_outlined,
color: Color(0xFF42A4EF),
size: 20),
), ),
title: Text( title: Text(
isPro ? 'Nueva solicitud de servicio' : 'Servicio pendiente', isPro
style: TextStyle( ? 'Nueva solicitud de servicio'
fontSize: 13, : 'Servicio pendiente',
fontWeight: FontWeight.w600, style: const TextStyle(
color: isDark ? Colors.white : Colors.black87, fontSize: 13, fontWeight: FontWeight.w600),
),
), ),
subtitle: Text( subtitle: Text(
s.service.address.isNotEmpty ? s.service.address : 'Sin dirección', s.service.address.isNotEmpty
style: TextStyle( ? s.service.address
fontSize: 12, : 'Sin dirección',
color: isDark ? Colors.white54 : Colors.black54, style: const TextStyle(fontSize: 12),
),
maxLines: 1, maxLines: 1,
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,
), ),