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

Fix dark/light theme support in redesigned views

Browse Source 
Replace hardcoded colors with Theme.of(context) values via BuildContext
extension (_Th): bg, card, onSurface, muted, subtle, divider, shadow,
inputFill, chipBg. Affects: professional_profile_view, professional_
calendar_view, services_requests_view.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Lizandro Guarnizo
2026-06-29 11:45:38 -05:00
co-authored by Claude Sonnet 4.6
parent 142e3ffafd
commit 2d5ff1581b
3 changed files with 501 additions and 1031 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/ui/views/services_requests_view.dart
+137 -239
View File
@@ -10,8 +10,18 @@ import 'package:prosapp_web_app/providers/auth_provider.dart';
import 'package:prosapp_web_app/providers/services_provider.dart';
const _kPrimary = Color(0xFF1565C0);
const _kBg = Color(0xFFF4F6FA);
const _kCard = Colors.white;
extension _Th on BuildContext {
ThemeData get _t => Theme.of(this);
Color get bg => _t.scaffoldBackgroundColor;
Color get card => _t.cardColor;
Color get onSurface => _t.colorScheme.onSurface;
Color get muted => _t.colorScheme.onSurface.withOpacity(0.55);
Color get subtle => _t.colorScheme.onSurface.withOpacity(0.35);
bool get isDark => _t.brightness == Brightness.dark;
Color get shadow => isDark ? Colors.transparent : Colors.black.withOpacity(0.05);
Color get shadowSm => isDark ? Colors.transparent : Colors.black.withOpacity(0.04);
}
class ServicesRequestsView extends StatelessWidget {
const ServicesRequestsView({super.key});
@@ -23,72 +33,51 @@ class ServicesRequestsView extends StatelessWidget {
Provider.of<AuthProvider>(context, listen: false).user!.id);
return Container(
color: _kBg,
color: context.bg,
child: Consumer<ServicesProvider>(
builder: (context, sp, _) {
if (sp.isLoading) {
return const Center(
child: CircularProgressIndicator(color: _kPrimary),
);
return const Center(child: CircularProgressIndicator(color: _kPrimary));
}
return ListView(
physics: const ClampingScrollPhysics(),
padding: const EdgeInsets.only(bottom: 32),
children: [
// Header
Center(
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 720),
child: Padding(
padding: const EdgeInsets.fromLTRB(16, 20, 16, 4),
child: Row(
children: [
Container(
width: 36,
height: 36,
decoration: BoxDecoration(
color: _kPrimary.withOpacity(0.08),
borderRadius: BorderRadius.circular(10),
),
child: const Icon(Icons.inbox_outlined,
size: 19, color: _kPrimary),
),
const SizedBox(width: 10),
const Text(
'Solicitudes',
child: Row(children: [
Container(
width: 36, height: 36,
decoration: BoxDecoration(
color: _kPrimary.withOpacity(0.08),
borderRadius: BorderRadius.circular(10)),
child: const Icon(Icons.inbox_outlined, size: 19, color: _kPrimary),
),
const SizedBox(width: 10),
Text('Solicitudes',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w800,
color: Color(0xFF1E293B),
),
),
const Spacer(),
if (sp.services.isNotEmpty)
Container(
padding: const EdgeInsets.symmetric(
horizontal: 10, vertical: 4),
decoration: BoxDecoration(
color: _kPrimary.withOpacity(0.1),
borderRadius: BorderRadius.circular(20),
),
child: Text(
'${sp.services.length}',
fontSize: 18, fontWeight: FontWeight.w800, color: context.onSurface)),
const Spacer(),
if (sp.services.isNotEmpty)
Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
decoration: BoxDecoration(
color: _kPrimary.withOpacity(0.1),
borderRadius: BorderRadius.circular(20)),
child: Text('${sp.services.length}',
style: const TextStyle(
fontSize: 13,
fontWeight: FontWeight.w700,
color: _kPrimary,
),
),
),
],
),
fontSize: 13, fontWeight: FontWeight.w700, color: _kPrimary)),
),
]),
),
),
),
if (sp.services.isEmpty)
_emptyState()
_emptyState(context)
else
...sp.services.map((data) => _RequestCard(data: data)),
],
@@ -98,7 +87,7 @@ class ServicesRequestsView extends StatelessWidget {
);
}
Widget _emptyState() {
Widget _emptyState(BuildContext context) {
return Center(
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 720),
@@ -106,49 +95,24 @@ class ServicesRequestsView extends StatelessWidget {
margin: const EdgeInsets.fromLTRB(16, 12, 16, 0),
padding: const EdgeInsets.symmetric(vertical: 56, horizontal: 24),
decoration: BoxDecoration(
color: _kCard,
color: context.card,
borderRadius: BorderRadius.circular(16),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.05),
blurRadius: 12,
offset: const Offset(0, 2),
)
],
boxShadow: [BoxShadow(color: context.shadow, blurRadius: 12, offset: const Offset(0, 2))],
),
child: Column(
children: [
Container(
width: 64,
height: 64,
decoration: BoxDecoration(
color: const Color(0xFF94A3B8).withOpacity(0.1),
shape: BoxShape.circle,
),
child: const Icon(Icons.inbox_outlined,
size: 32, color: Color(0xFF94A3B8)),
),
const SizedBox(height: 16),
const Text(
'Sin solicitudes pendientes',
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w700,
color: Color(0xFF475569),
),
),
const SizedBox(height: 6),
const Text(
'Cuando un cliente solicite tus servicios\naparecerá aquí.',
child: Column(children: [
Container(
width: 64, height: 64,
decoration: BoxDecoration(color: context.subtle.withOpacity(0.1), shape: BoxShape.circle),
child: Icon(Icons.inbox_outlined, size: 32, color: context.subtle),
),
const SizedBox(height: 16),
Text('Sin solicitudes pendientes',
style: TextStyle(fontSize: 15, fontWeight: FontWeight.w700, color: context.muted)),
const SizedBox(height: 6),
Text('Cuando un cliente solicite tus servicios\naparecerá aquí.',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 13,
color: Color(0xFF94A3B8),
height: 1.5,
),
),
],
),
style: TextStyle(fontSize: 13, color: context.subtle, height: 1.5)),
]),
),
),
);
@@ -164,8 +128,7 @@ class _RequestCard extends StatelessWidget {
final service = data.service;
final user = data.user;
final statusInfo = _statusInfo(service.status);
final dateStr = DateFormat('dd MMM yyyy', 'es')
.format(DateTime.parse(service.day));
final dateStr = DateFormat('dd MMM yyyy', 'es').format(DateTime.parse(service.day));
final timeStr = ScheduleEntity.getFormatTime(service.range1Hour1) ?? '';
return Center(
@@ -174,15 +137,9 @@ class _RequestCard extends StatelessWidget {
child: Container(
margin: const EdgeInsets.fromLTRB(16, 8, 16, 0),
decoration: BoxDecoration(
color: _kCard,
color: context.card,
borderRadius: BorderRadius.circular(14),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.05),
blurRadius: 10,
offset: const Offset(0, 2),
)
],
boxShadow: [BoxShadow(color: context.shadowSm, blurRadius: 10, offset: const Offset(0, 2))],
),
child: ClipRRect(
borderRadius: BorderRadius.circular(14),
@@ -192,121 +149,74 @@ class _RequestCard extends StatelessWidget {
onTap: () => NavigationService.replaceTo(
'/dashboard/professional/service/${service.id}'),
child: IntrinsicHeight(
child: Row(
children: [
// Status accent strip
Container(width: 4, color: statusInfo.color),
// Avatar
Padding(
padding: const EdgeInsets.all(14),
child: Stack(
children: [
Container(
width: 52,
height: 52,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: statusInfo.color.withOpacity(0.3),
width: 2,
),
),
child: ClipOval(
child: (user.picture == null ||
user.picture!.isEmpty)
? Container(
color: _kPrimary.withOpacity(0.1),
child: Center(
child: Text(
user.name.isNotEmpty
? user.name[0].toUpperCase()
: '?',
style: const TextStyle(
fontSize: 20,
fontWeight: FontWeight.w700,
color: _kPrimary,
),
),
),
)
: FadeInImage.assetNetwork(
placeholder: 'loader.gif',
image: user.picture!,
fit: BoxFit.cover,
),
),
),
],
),
),
// Content
Expanded(
child: Padding(
padding:
const EdgeInsets.symmetric(vertical: 14),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
user.name,
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w700,
color: Color(0xFF1E293B),
),
),
if (service.description.isNotEmpty) ...[
const SizedBox(height: 2),
Text(
'"${service.description}"',
style: const TextStyle(
fontSize: 12,
color: Color(0xFF64748B),
fontStyle: FontStyle.italic,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
],
const SizedBox(height: 6),
Row(
children: [
const Icon(Icons.calendar_today_outlined,
size: 12,
color: Color(0xFF94A3B8)),
const SizedBox(width: 4),
Text(
'$dateStr · $timeStr',
style: const TextStyle(
fontSize: 12,
color: Color(0xFF64748B),
fontWeight: FontWeight.w500,
child: Row(children: [
Container(width: 4, color: statusInfo.color),
Padding(
padding: const EdgeInsets.all(14),
child: Container(
width: 52, height: 52,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: statusInfo.color.withOpacity(0.3), width: 2)),
child: ClipOval(
child: (user.picture == null || user.picture!.isEmpty)
? Container(
color: _kPrimary.withOpacity(0.1),
child: Center(
child: Text(
user.name.isNotEmpty ? user.name[0].toUpperCase() : '?',
style: const TextStyle(
fontSize: 20, fontWeight: FontWeight.w700, color: _kPrimary),
),
),
],
),
],
),
)
: FadeInImage.assetNetwork(
placeholder: 'loader.gif', image: user.picture!, fit: BoxFit.cover),
),
),
// Status + arrow
Padding(
padding: const EdgeInsets.fromLTRB(8, 14, 12, 14),
),
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 14),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
_StatusBadge(info: statusInfo),
const SizedBox(height: 8),
Icon(Icons.chevron_right,
size: 18,
color: Colors.grey.shade400),
Text(user.name,
style: TextStyle(
fontSize: 14, fontWeight: FontWeight.w700, color: context.onSurface)),
if (service.description.isNotEmpty) ...[
const SizedBox(height: 2),
Text('"${service.description}"',
style: TextStyle(
fontSize: 12, color: context.muted, fontStyle: FontStyle.italic),
maxLines: 1, overflow: TextOverflow.ellipsis),
],
const SizedBox(height: 6),
Row(children: [
Icon(Icons.calendar_today_outlined, size: 12, color: context.subtle),
const SizedBox(width: 4),
Text('$dateStr · $timeStr',
style: TextStyle(
fontSize: 12, color: context.muted, fontWeight: FontWeight.w500)),
]),
],
),
),
],
),
),
Padding(
padding: const EdgeInsets.fromLTRB(8, 14, 12, 14),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
_StatusBadge(info: statusInfo),
const SizedBox(height: 8),
Icon(Icons.chevron_right, size: 18, color: context.subtle),
],
),
),
]),
),
),
),
@@ -324,28 +234,18 @@ class _StatusBadge extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
padding:
const EdgeInsets.symmetric(horizontal: 9, vertical: 4),
padding: const EdgeInsets.symmetric(horizontal: 9, vertical: 4),
decoration: BoxDecoration(
color: info.color.withOpacity(0.1),
borderRadius: BorderRadius.circular(20),
border: Border.all(color: info.color.withOpacity(0.3)),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(info.icon, size: 11, color: info.color),
const SizedBox(width: 4),
Text(
info.label,
style: TextStyle(
fontSize: 11,
fontWeight: FontWeight.w700,
color: info.color,
),
),
],
),
child: Row(mainAxisSize: MainAxisSize.min, children: [
Icon(info.icon, size: 11, color: info.color),
const SizedBox(width: 4),
Text(info.label,
style: TextStyle(fontSize: 11, fontWeight: FontWeight.w700, color: info.color)),
]),
);
}
}
@@ -357,21 +257,19 @@ class _StatusInfo {
const _StatusInfo(this.label, this.color, this.icon);
}
_StatusInfo _statusInfo(ServiceStatus status) {
return switch (status) {
ServiceStatus.pending =>
const _StatusInfo('Pendiente', Color(0xFFD97706), Icons.hourglass_top_outlined),
ServiceStatus.acepted =>
const _StatusInfo('Aceptado', Color(0xFF1565C0), Icons.check_circle_outline),
ServiceStatus.active =>
const _StatusInfo('En curso', Color(0xFF16A34A), Icons.play_circle_outline),
ServiceStatus.completed =>
const _StatusInfo('Completado', Color(0xFF64748B), Icons.task_alt_outlined),
ServiceStatus.denied =>
const _StatusInfo('Rechazado', Color(0xFFDC2626), Icons.cancel_outlined),
ServiceStatus.cancelled =>
const _StatusInfo('Cancelado', Color(0xFF9CA3AF), Icons.remove_circle_outline),
ServiceStatus.selfBooked =>
const _StatusInfo('Reservado', Color(0xFF7C3AED), Icons.bookmark_outline),
};
}
_StatusInfo _statusInfo(ServiceStatus status) => switch (status) {
ServiceStatus.pending =>
const _StatusInfo('Pendiente', Color(0xFFD97706), Icons.hourglass_top_outlined),
ServiceStatus.acepted =>
const _StatusInfo('Aceptado', Color(0xFF1565C0), Icons.check_circle_outline),
ServiceStatus.active =>
const _StatusInfo('En curso', Color(0xFF16A34A), Icons.play_circle_outline),
ServiceStatus.completed =>
const _StatusInfo('Completado', Color(0xFF64748B), Icons.task_alt_outlined),
ServiceStatus.denied =>
const _StatusInfo('Rechazado', Color(0xFFDC2626), Icons.cancel_outlined),
ServiceStatus.cancelled =>
const _StatusInfo('Cancelado', Color(0xFF9CA3AF), Icons.remove_circle_outline),
ServiceStatus.selfBooked =>
const _StatusInfo('Reservado', Color(0xFF7C3AED), Icons.bookmark_outline),
};