Fix dark/light theme support in redesigned views
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
co-authored by
Claude Sonnet 4.6
Claude Sonnet 4.6
parent
142e3ffafd
commit
2d5ff1581b
@@ -14,13 +14,24 @@ import 'package:prosapp_web_app/services/notifications_service.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
|
||||
// ── Constants ──────────────────────────────────────────────────────────────
|
||||
const _kPrimary = Color(0xFF1565C0);
|
||||
const _kAccent = Color(0xFF42A4EF);
|
||||
const _kBg = Color(0xFFF4F6FA);
|
||||
const _kCard = Colors.white;
|
||||
|
||||
// ── Entry ──────────────────────────────────────────────────────────────────
|
||||
// Theme-aware color helpers
|
||||
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);
|
||||
Color get divider => _t.dividerColor;
|
||||
bool get isDark => _t.brightness == Brightness.dark;
|
||||
Color get shadow => isDark ? Colors.transparent : Colors.black.withOpacity(0.07);
|
||||
Color get shadowSm => isDark ? Colors.transparent : Colors.black.withOpacity(0.04);
|
||||
Color get inputFill => isDark ? _t.cardColor : const Color(0xFFF8FAFC);
|
||||
Color get chipBg => isDark ? _t.colorScheme.onSurface.withOpacity(0.06) : Colors.grey.shade50;
|
||||
}
|
||||
|
||||
class ProfessionalProfileView extends StatefulWidget {
|
||||
const ProfessionalProfileView({super.key});
|
||||
@@ -46,7 +57,7 @@ class _ProfessionalProfileViewState extends State<ProfessionalProfileView> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
color: _kBg,
|
||||
color: context.bg,
|
||||
child: ListView(
|
||||
physics: const ClampingScrollPhysics(),
|
||||
padding: const EdgeInsets.only(bottom: 32),
|
||||
@@ -56,7 +67,7 @@ class _ProfessionalProfileViewState extends State<ProfessionalProfileView> {
|
||||
}
|
||||
}
|
||||
|
||||
// ── Profile header card ───────────────────────────────────────────────────
|
||||
// ── Profile header ────────────────────────────────────────────────────────
|
||||
|
||||
class _ProfileHeader extends StatelessWidget {
|
||||
const _ProfileHeader();
|
||||
@@ -66,7 +77,6 @@ class _ProfileHeader extends StatelessWidget {
|
||||
final auth = Provider.of<AuthProvider>(context).user!;
|
||||
final pfp = Provider.of<ProfileFormProvider>(context);
|
||||
final fp = Provider.of<ProfessionalFormProvider>(context);
|
||||
|
||||
final picture = pfp.user?.picture;
|
||||
final profession = fp.profesional?.profession;
|
||||
|
||||
@@ -76,19 +86,12 @@ class _ProfileHeader extends StatelessWidget {
|
||||
child: Container(
|
||||
margin: const EdgeInsets.fromLTRB(16, 20, 16, 0),
|
||||
decoration: BoxDecoration(
|
||||
color: _kCard,
|
||||
color: context.card,
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.07),
|
||||
blurRadius: 16,
|
||||
offset: const Offset(0, 4),
|
||||
)
|
||||
],
|
||||
boxShadow: [BoxShadow(color: context.shadow, blurRadius: 16, offset: const Offset(0, 4))],
|
||||
),
|
||||
child: Column(
|
||||
children: [
|
||||
// Banner gradient
|
||||
Container(
|
||||
height: 110,
|
||||
decoration: const BoxDecoration(
|
||||
@@ -97,11 +100,9 @@ class _ProfileHeader extends StatelessWidget {
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
),
|
||||
borderRadius:
|
||||
BorderRadius.vertical(top: Radius.circular(16)),
|
||||
borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
|
||||
),
|
||||
),
|
||||
// Avatar overlapping the banner
|
||||
Transform.translate(
|
||||
offset: const Offset(0, -44),
|
||||
child: Column(
|
||||
@@ -114,72 +115,49 @@ class _ProfileHeader extends StatelessWidget {
|
||||
height: 88,
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
border: Border.all(color: _kCard, width: 4),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withOpacity(0.12),
|
||||
blurRadius: 8,
|
||||
)
|
||||
],
|
||||
border: Border.all(color: context.card, width: 4),
|
||||
boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.12), blurRadius: 8)],
|
||||
),
|
||||
child: ClipOval(
|
||||
child: picture != null && picture.isNotEmpty
|
||||
? FadeInImage.assetNetwork(
|
||||
placeholder: 'loader.gif',
|
||||
image: picture,
|
||||
fit: BoxFit.cover,
|
||||
)
|
||||
placeholder: 'loader.gif', image: picture, fit: BoxFit.cover)
|
||||
: Container(
|
||||
color: _kAccent.withOpacity(0.15),
|
||||
child: const Icon(Icons.person,
|
||||
size: 44, color: _kAccent),
|
||||
child: const Icon(Icons.person, size: 44, color: _kAccent),
|
||||
),
|
||||
),
|
||||
),
|
||||
_CameraButton(
|
||||
onTap: () async {
|
||||
final result = await FilePicker.platform
|
||||
.pickFiles(withData: true);
|
||||
final result = await FilePicker.platform.pickFiles(withData: true);
|
||||
if (result == null) return;
|
||||
final bytes = result.files.first.bytes;
|
||||
if (bytes == null) return;
|
||||
if (!context.mounted) return;
|
||||
if (bytes == null || !context.mounted) return;
|
||||
NotificationsService.showBusyIndicator(context);
|
||||
await pfp.uploadPicture(bytes);
|
||||
if (!context.mounted) return;
|
||||
Provider.of<AuthProvider>(context, listen: false)
|
||||
.refreshUser();
|
||||
Provider.of<AuthProvider>(context, listen: false).refreshUser();
|
||||
Navigator.pop(context);
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
auth.name,
|
||||
style: const TextStyle(
|
||||
fontSize: 18,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: Color(0xFF1E293B),
|
||||
),
|
||||
),
|
||||
Text(auth.name,
|
||||
style: TextStyle(
|
||||
fontSize: 18, fontWeight: FontWeight.w700, color: context.onSurface)),
|
||||
if (profession != null && profession.isNotEmpty) ...[
|
||||
const SizedBox(height: 4),
|
||||
Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 12, vertical: 3),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 3),
|
||||
decoration: BoxDecoration(
|
||||
color: _kAccent.withOpacity(0.1),
|
||||
color: _kAccent.withOpacity(0.12),
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
),
|
||||
child: Text(
|
||||
profession,
|
||||
style: const TextStyle(
|
||||
color: _kPrimary,
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
child: Text(profession,
|
||||
style: const TextStyle(
|
||||
color: _kPrimary, fontSize: 12, fontWeight: FontWeight.w600)),
|
||||
),
|
||||
],
|
||||
const SizedBox(height: 16),
|
||||
@@ -208,7 +186,7 @@ class _CameraButton extends StatelessWidget {
|
||||
decoration: BoxDecoration(
|
||||
color: _kPrimary,
|
||||
shape: BoxShape.circle,
|
||||
border: Border.all(color: _kCard, width: 2),
|
||||
border: Border.all(color: context.card, width: 2),
|
||||
),
|
||||
child: const Icon(Icons.camera_alt, size: 14, color: Colors.white),
|
||||
),
|
||||
@@ -252,8 +230,7 @@ class _ProfileFormState extends State<_ProfileForm> {
|
||||
_first = false;
|
||||
_rateEnabled = settings.tarifas ? pro.ratePreferences : false;
|
||||
if (pro.locationPreferences == LocationPreferences.both) {
|
||||
_delivery = true;
|
||||
_office = true;
|
||||
_delivery = true; _office = true;
|
||||
} else if (pro.locationPreferences == LocationPreferences.office) {
|
||||
_office = true;
|
||||
} else {
|
||||
@@ -269,114 +246,91 @@ class _ProfileFormState extends State<_ProfileForm> {
|
||||
autovalidateMode: AutovalidateMode.always,
|
||||
child: Column(
|
||||
children: [
|
||||
// ── Modalidad ──────────────────────────────────────────
|
||||
_SectionCard(
|
||||
icon: Icons.tune_outlined,
|
||||
title: 'Modalidad de servicio',
|
||||
child: Column(
|
||||
children: [
|
||||
_ToggleRow(
|
||||
icon: Icons.delivery_dining_outlined,
|
||||
title: 'Servicio a domicilio',
|
||||
subtitle: 'Vas donde está el cliente',
|
||||
value: _delivery,
|
||||
onChanged: settings.domicilios
|
||||
? (v) => setState(() {
|
||||
_delivery = v;
|
||||
if (!v) _office = true;
|
||||
})
|
||||
: null,
|
||||
),
|
||||
const _Divider(),
|
||||
_ToggleRow(
|
||||
icon: Icons.store_mall_directory_outlined,
|
||||
title: 'Servicio en consultorio / sitio',
|
||||
subtitle: 'El cliente viene a tu local',
|
||||
value: _office,
|
||||
onChanged: (v) => setState(() {
|
||||
if (settings.domicilios == true) {
|
||||
_office = v;
|
||||
if (!v) _delivery = true;
|
||||
} else {
|
||||
_office = true;
|
||||
_delivery = false;
|
||||
}
|
||||
}),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Column(children: [
|
||||
_ToggleRow(
|
||||
icon: Icons.delivery_dining_outlined,
|
||||
title: 'Servicio a domicilio',
|
||||
subtitle: 'Vas donde está el cliente',
|
||||
value: _delivery,
|
||||
onChanged: settings.domicilios
|
||||
? (v) => setState(() { _delivery = v; if (!v) _office = true; })
|
||||
: null,
|
||||
),
|
||||
_Divider(),
|
||||
_ToggleRow(
|
||||
icon: Icons.store_mall_directory_outlined,
|
||||
title: 'Servicio en consultorio / sitio',
|
||||
subtitle: 'El cliente viene a tu local',
|
||||
value: _office,
|
||||
onChanged: (v) => setState(() {
|
||||
if (settings.domicilios == true) {
|
||||
_office = v;
|
||||
if (!v) _delivery = true;
|
||||
} else {
|
||||
_office = true; _delivery = false;
|
||||
}
|
||||
}),
|
||||
),
|
||||
]),
|
||||
),
|
||||
|
||||
// ── Dirección ─────────────────────────────────────────
|
||||
if (_office)
|
||||
_SectionCard(
|
||||
icon: Icons.location_on_outlined,
|
||||
title: 'Dirección del consultorio',
|
||||
child: Column(
|
||||
children: [
|
||||
_Field(
|
||||
initial: pro.address,
|
||||
hint: 'Calle 123 # 45-67',
|
||||
label: 'Dirección principal',
|
||||
icon: Icons.map_outlined,
|
||||
onChanged: (v) =>
|
||||
fp.copyProfesionalWith(address: v),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
_Field(
|
||||
initial: pro.aditionalAddress,
|
||||
hint: 'Piso 2, Consultorio 204',
|
||||
label: 'Piso / Apartamento / Conjunto',
|
||||
icon: Icons.apartment_outlined,
|
||||
onChanged: (v) =>
|
||||
fp.copyProfesionalWith(aditionalAddress: v),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Column(children: [
|
||||
_Field(
|
||||
initial: pro.address,
|
||||
hint: 'Calle 123 # 45-67',
|
||||
label: 'Dirección principal',
|
||||
icon: Icons.map_outlined,
|
||||
onChanged: (v) => fp.copyProfesionalWith(address: v),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
_Field(
|
||||
initial: pro.aditionalAddress,
|
||||
hint: 'Piso 2, Consultorio 204',
|
||||
label: 'Piso / Apartamento / Conjunto',
|
||||
icon: Icons.apartment_outlined,
|
||||
onChanged: (v) => fp.copyProfesionalWith(aditionalAddress: v),
|
||||
),
|
||||
]),
|
||||
),
|
||||
|
||||
// ── Tarifa ────────────────────────────────────────────
|
||||
if (settings.tarifas)
|
||||
_SectionCard(
|
||||
icon: Icons.payments_outlined,
|
||||
title: 'Tarifa del servicio',
|
||||
child: Column(
|
||||
children: [
|
||||
_ToggleRow(
|
||||
icon: Icons.attach_money,
|
||||
title: 'Mostrar tarifa en el perfil',
|
||||
subtitle:
|
||||
'Los clientes verán el precio por consulta',
|
||||
value: _rateEnabled,
|
||||
onChanged: (v) =>
|
||||
setState(() => _rateEnabled = v),
|
||||
child: Column(children: [
|
||||
_ToggleRow(
|
||||
icon: Icons.attach_money,
|
||||
title: 'Mostrar tarifa en el perfil',
|
||||
subtitle: 'Los clientes verán el precio por consulta',
|
||||
value: _rateEnabled,
|
||||
onChanged: (v) => setState(() => _rateEnabled = v),
|
||||
),
|
||||
if (_rateEnabled) ...[
|
||||
_Divider(),
|
||||
_Field(
|
||||
initial: pro.rate,
|
||||
hint: '50000',
|
||||
label: 'Tarifa (COP)',
|
||||
icon: Icons.monetization_on_outlined,
|
||||
keyboardType: TextInputType.number,
|
||||
validator: (v) {
|
||||
if (v == null || v.isEmpty) return 'La tarifa es obligatoria';
|
||||
if (!RegExp(r'^[0-9]+$').hasMatch(v)) return 'Solo números';
|
||||
return null;
|
||||
},
|
||||
onChanged: (v) => fp.copyProfesionalWith(rate: v),
|
||||
),
|
||||
if (_rateEnabled) ...[
|
||||
const _Divider(),
|
||||
_Field(
|
||||
initial: pro.rate,
|
||||
hint: '50000',
|
||||
label: 'Tarifa (COP)',
|
||||
icon: Icons.monetization_on_outlined,
|
||||
keyboardType: TextInputType.number,
|
||||
validator: (v) {
|
||||
if (v == null || v.isEmpty) {
|
||||
return 'La tarifa es obligatoria';
|
||||
}
|
||||
if (!RegExp(r'^[0-9]+$').hasMatch(v)) {
|
||||
return 'Solo números';
|
||||
}
|
||||
return null;
|
||||
},
|
||||
onChanged: (v) =>
|
||||
fp.copyProfesionalWith(rate: v),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
]),
|
||||
),
|
||||
|
||||
// ── Métodos de pago ───────────────────────────────────
|
||||
_SectionCard(
|
||||
icon: Icons.credit_card_outlined,
|
||||
title: 'Métodos de pago',
|
||||
@@ -389,104 +343,70 @@ class _ProfileFormState extends State<_ProfileForm> {
|
||||
label: 'Datáfono',
|
||||
selected: pro.paymentMethods.datafono,
|
||||
onTap: () => fp.copyProfesionalWith(
|
||||
paymentMethods: pro.paymentMethods.copyWith(
|
||||
datafono: !pro.paymentMethods.datafono,
|
||||
),
|
||||
),
|
||||
paymentMethods: pro.paymentMethods.copyWith(datafono: !pro.paymentMethods.datafono)),
|
||||
),
|
||||
_PayChip(
|
||||
icon: Icons.phone_android_outlined,
|
||||
label: 'Nequi',
|
||||
selected: pro.paymentMethods.nequi,
|
||||
onTap: () => fp.copyProfesionalWith(
|
||||
paymentMethods: pro.paymentMethods
|
||||
.copyWith(nequi: !pro.paymentMethods.nequi),
|
||||
),
|
||||
paymentMethods: pro.paymentMethods.copyWith(nequi: !pro.paymentMethods.nequi)),
|
||||
),
|
||||
_PayChip(
|
||||
icon: Icons.account_balance_outlined,
|
||||
label: 'Transferencia',
|
||||
selected: pro.paymentMethods.transferencia,
|
||||
onTap: () => fp.copyProfesionalWith(
|
||||
paymentMethods: pro.paymentMethods.copyWith(
|
||||
transferencia:
|
||||
!pro.paymentMethods.transferencia,
|
||||
),
|
||||
),
|
||||
paymentMethods: pro.paymentMethods.copyWith(transferencia: !pro.paymentMethods.transferencia)),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
// ── Horarios ──────────────────────────────────────────
|
||||
_SectionCard(
|
||||
icon: Icons.schedule_outlined,
|
||||
title: 'Horarios de atención',
|
||||
trailing: TextButton.icon(
|
||||
onPressed: () => NavigationService.replaceTo(
|
||||
Flurorouter.professionalScheduleRoute),
|
||||
icon: const Icon(Icons.edit_outlined,
|
||||
size: 16, color: _kPrimary),
|
||||
label: const Text('Editar',
|
||||
style:
|
||||
TextStyle(color: _kPrimary, fontSize: 13)),
|
||||
),
|
||||
child: Column(
|
||||
children: _buildScheduleRows(pro.schedules),
|
||||
onPressed: () => NavigationService.replaceTo(Flurorouter.professionalScheduleRoute),
|
||||
icon: const Icon(Icons.edit_outlined, size: 16, color: _kPrimary),
|
||||
label: const Text('Editar', style: TextStyle(color: _kPrimary, fontSize: 13)),
|
||||
),
|
||||
child: Column(children: _buildScheduleRows(pro.schedules, context)),
|
||||
),
|
||||
|
||||
// ── Botón guardar ─────────────────────────────────────
|
||||
Padding(
|
||||
padding: const EdgeInsets.fromLTRB(16, 14, 16, 4),
|
||||
child: SizedBox(
|
||||
width: double.infinity,
|
||||
height: 48,
|
||||
child: ElevatedButton(
|
||||
onPressed: _saving
|
||||
? null
|
||||
: () async {
|
||||
setState(() => _saving = true);
|
||||
LocationPreferences lp;
|
||||
if (_delivery && _office) {
|
||||
lp = LocationPreferences.both;
|
||||
} else if (_delivery) {
|
||||
lp = LocationPreferences.delivery;
|
||||
} else {
|
||||
lp = LocationPreferences.office;
|
||||
}
|
||||
fp.copyProfesionalWith(
|
||||
locationPreferences: lp,
|
||||
ratePreferences: _rateEnabled,
|
||||
);
|
||||
await fp.updateProfesionalProfileInfo(user.id);
|
||||
if (mounted) setState(() => _saving = false);
|
||||
},
|
||||
onPressed: _saving ? null : () async {
|
||||
setState(() => _saving = true);
|
||||
LocationPreferences lp;
|
||||
if (_delivery && _office) {
|
||||
lp = LocationPreferences.both;
|
||||
} else if (_delivery) {
|
||||
lp = LocationPreferences.delivery;
|
||||
} else {
|
||||
lp = LocationPreferences.office;
|
||||
}
|
||||
fp.copyProfesionalWith(locationPreferences: lp, ratePreferences: _rateEnabled);
|
||||
await fp.updateProfesionalProfileInfo(user.id);
|
||||
if (mounted) setState(() => _saving = false);
|
||||
},
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: _kPrimary,
|
||||
foregroundColor: Colors.white,
|
||||
disabledBackgroundColor:
|
||||
_kPrimary.withOpacity(0.6),
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
disabledBackgroundColor: _kPrimary.withOpacity(0.6),
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
|
||||
elevation: 0,
|
||||
),
|
||||
child: _saving
|
||||
? const SizedBox(
|
||||
width: 20,
|
||||
height: 20,
|
||||
child: CircularProgressIndicator(
|
||||
color: Colors.white,
|
||||
strokeWidth: 2,
|
||||
),
|
||||
)
|
||||
: const Text(
|
||||
'Guardar cambios',
|
||||
style: TextStyle(
|
||||
fontSize: 15,
|
||||
fontWeight: FontWeight.w600),
|
||||
),
|
||||
width: 20, height: 20,
|
||||
child: CircularProgressIndicator(color: Colors.white, strokeWidth: 2))
|
||||
: const Text('Guardar cambios',
|
||||
style: TextStyle(fontSize: 15, fontWeight: FontWeight.w600)),
|
||||
),
|
||||
),
|
||||
),
|
||||
@@ -499,94 +419,62 @@ class _ProfileFormState extends State<_ProfileForm> {
|
||||
});
|
||||
}
|
||||
|
||||
List<Widget> _buildScheduleRows(dynamic schedules) {
|
||||
List<Widget> _buildScheduleRows(dynamic schedules, BuildContext context) {
|
||||
const days = [
|
||||
('Lunes', 'monday'),
|
||||
('Martes', 'tuesday'),
|
||||
('Miércoles', 'wednesday'),
|
||||
('Jueves', 'thursday'),
|
||||
('Viernes', 'friday'),
|
||||
('Sábado', 'saturday'),
|
||||
('Domingo', 'sunday'),
|
||||
('Lunes', 'monday'), ('Martes', 'tuesday'), ('Miércoles', 'wednesday'),
|
||||
('Jueves', 'thursday'), ('Viernes', 'friday'), ('Sábado', 'saturday'), ('Domingo', 'sunday'),
|
||||
];
|
||||
|
||||
return days.asMap().entries.map((entry) {
|
||||
final i = entry.key;
|
||||
final (name, field) = entry.value;
|
||||
final ScheduleEntity? sch = switch (field) {
|
||||
'monday' => schedules.monday,
|
||||
'tuesday' => schedules.tuesday,
|
||||
'wednesday' => schedules.wednesday,
|
||||
'thursday' => schedules.thursday,
|
||||
'friday' => schedules.friday,
|
||||
'saturday' => schedules.saturday,
|
||||
'monday' => schedules.monday, 'tuesday' => schedules.tuesday,
|
||||
'wednesday' => schedules.wednesday, 'thursday' => schedules.thursday,
|
||||
'friday' => schedules.friday, 'saturday' => schedules.saturday,
|
||||
_ => schedules.sunday,
|
||||
};
|
||||
final time = _formatTime(sch);
|
||||
final active = sch?.enabled == true;
|
||||
|
||||
return Column(
|
||||
children: [
|
||||
if (i > 0) const _Divider(),
|
||||
Padding(
|
||||
padding:
|
||||
const EdgeInsets.symmetric(horizontal: 4, vertical: 6),
|
||||
child: Row(
|
||||
children: [
|
||||
SizedBox(
|
||||
width: 90,
|
||||
child: Text(
|
||||
name,
|
||||
style: TextStyle(
|
||||
return Column(children: [
|
||||
if (i > 0) _Divider(),
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 6),
|
||||
child: Row(children: [
|
||||
SizedBox(
|
||||
width: 90,
|
||||
child: Text(name,
|
||||
style: TextStyle(
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: active
|
||||
? const Color(0xFF1E293B)
|
||||
: Colors.grey.shade400,
|
||||
),
|
||||
),
|
||||
),
|
||||
Container(
|
||||
width: 7,
|
||||
height: 7,
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
color: active
|
||||
? Colors.green.shade400
|
||||
: Colors.grey.shade300,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 10),
|
||||
Expanded(
|
||||
child: Text(
|
||||
time,
|
||||
style: TextStyle(
|
||||
fontSize: 12,
|
||||
color: active
|
||||
? const Color(0xFF475569)
|
||||
: Colors.grey.shade400,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
color: active ? context.onSurface : context.subtle)),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
Container(
|
||||
width: 7, height: 7,
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
color: active ? Colors.green.shade400 : context.subtle,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 10),
|
||||
Expanded(
|
||||
child: Text(time,
|
||||
style: TextStyle(
|
||||
fontSize: 12,
|
||||
color: active ? context.muted : context.subtle)),
|
||||
),
|
||||
]),
|
||||
),
|
||||
]);
|
||||
}).toList();
|
||||
}
|
||||
|
||||
String _formatTime(ScheduleEntity? s) {
|
||||
if (s == null || !s.enabled) return 'No disponible';
|
||||
if (s.range1Hour1 == null || s.range2Hour2 == null) {
|
||||
return 'Sin horario definido';
|
||||
}
|
||||
if (s.range1Hour1 == null || s.range2Hour2 == null) return 'Sin horario definido';
|
||||
if (s.continuousDay) {
|
||||
return '${ScheduleEntity.getFormatTime(s.range1Hour1)} – ${ScheduleEntity.getFormatTime(s.range2Hour2)}';
|
||||
}
|
||||
if (s.range1Hour2 == null || s.range2Hour1 == null) {
|
||||
return 'Sin horario definido';
|
||||
}
|
||||
if (s.range1Hour2 == null || s.range2Hour1 == null) return 'Sin horario definido';
|
||||
return '${ScheduleEntity.getFormatTime(s.range1Hour1)}–${ScheduleEntity.getFormatTime(s.range1Hour2)} · ${ScheduleEntity.getFormatTime(s.range2Hour1)}–${ScheduleEntity.getFormatTime(s.range2Hour2)}';
|
||||
}
|
||||
}
|
||||
@@ -598,64 +486,36 @@ class _SectionCard extends StatelessWidget {
|
||||
final String title;
|
||||
final Widget child;
|
||||
final Widget? trailing;
|
||||
|
||||
const _SectionCard({
|
||||
required this.icon,
|
||||
required this.title,
|
||||
required this.child,
|
||||
this.trailing,
|
||||
});
|
||||
const _SectionCard({required this.icon, required this.title, required this.child, this.trailing});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
margin: const EdgeInsets.fromLTRB(16, 12, 16, 0),
|
||||
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.shadowSm, blurRadius: 12, offset: const Offset(0, 2))],
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.fromLTRB(16, 14, 12, 0),
|
||||
child: Row(
|
||||
children: [
|
||||
Container(
|
||||
width: 32,
|
||||
height: 32,
|
||||
decoration: BoxDecoration(
|
||||
color: _kPrimary.withOpacity(0.08),
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
child: Icon(icon, size: 17, color: _kPrimary),
|
||||
),
|
||||
const SizedBox(width: 10),
|
||||
Expanded(
|
||||
child: Text(
|
||||
title,
|
||||
style: const TextStyle(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: Color(0xFF1E293B),
|
||||
),
|
||||
),
|
||||
),
|
||||
if (trailing != null) trailing!,
|
||||
],
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.fromLTRB(16, 10, 16, 14),
|
||||
child: child,
|
||||
child: Row(children: [
|
||||
Container(
|
||||
width: 32, height: 32,
|
||||
decoration: BoxDecoration(
|
||||
color: _kPrimary.withOpacity(0.08), borderRadius: BorderRadius.circular(8)),
|
||||
child: Icon(icon, size: 17, color: _kPrimary),
|
||||
),
|
||||
const SizedBox(width: 10),
|
||||
Expanded(child: Text(title,
|
||||
style: TextStyle(fontSize: 14, fontWeight: FontWeight.w700, color: context.onSurface))),
|
||||
if (trailing != null) trailing!,
|
||||
]),
|
||||
),
|
||||
Padding(padding: const EdgeInsets.fromLTRB(16, 10, 16, 14), child: child),
|
||||
],
|
||||
),
|
||||
);
|
||||
@@ -668,56 +528,23 @@ class _ToggleRow extends StatelessWidget {
|
||||
final String subtitle;
|
||||
final bool value;
|
||||
final ValueChanged<bool>? onChanged;
|
||||
|
||||
const _ToggleRow({
|
||||
required this.icon,
|
||||
required this.title,
|
||||
required this.subtitle,
|
||||
required this.value,
|
||||
this.onChanged,
|
||||
});
|
||||
const _ToggleRow({required this.icon, required this.title, required this.subtitle,
|
||||
required this.value, this.onChanged});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final enabled = onChanged != null;
|
||||
return Opacity(
|
||||
opacity: enabled ? 1.0 : 0.45,
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(icon,
|
||||
size: 20,
|
||||
color: value ? _kPrimary : Colors.grey.shade400),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
title,
|
||||
style: const TextStyle(
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: Color(0xFF1E293B),
|
||||
),
|
||||
),
|
||||
Text(
|
||||
subtitle,
|
||||
style: const TextStyle(
|
||||
fontSize: 11,
|
||||
color: Color(0xFF94A3B8),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
Switch(
|
||||
value: value,
|
||||
onChanged: onChanged,
|
||||
activeColor: _kPrimary,
|
||||
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
|
||||
),
|
||||
],
|
||||
),
|
||||
opacity: onChanged != null ? 1.0 : 0.45,
|
||||
child: Row(children: [
|
||||
Icon(icon, size: 20, color: value ? _kPrimary : context.subtle),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
|
||||
Text(title, style: TextStyle(fontSize: 13, fontWeight: FontWeight.w600, color: context.onSurface)),
|
||||
Text(subtitle, style: TextStyle(fontSize: 11, color: context.subtle)),
|
||||
])),
|
||||
Switch(value: value, onChanged: onChanged, activeColor: _kPrimary,
|
||||
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap),
|
||||
]),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -727,13 +554,7 @@ class _PayChip extends StatelessWidget {
|
||||
final String label;
|
||||
final bool selected;
|
||||
final VoidCallback onTap;
|
||||
|
||||
const _PayChip({
|
||||
required this.icon,
|
||||
required this.label,
|
||||
required this.selected,
|
||||
required this.onTap,
|
||||
});
|
||||
const _PayChip({required this.icon, required this.label, required this.selected, required this.onTap});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
@@ -743,39 +564,24 @@ class _PayChip extends StatelessWidget {
|
||||
duration: const Duration(milliseconds: 180),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 10),
|
||||
decoration: BoxDecoration(
|
||||
color: selected
|
||||
? _kPrimary.withOpacity(0.08)
|
||||
: Colors.grey.shade50,
|
||||
color: selected ? _kPrimary.withOpacity(0.08) : context.chipBg,
|
||||
border: Border.all(
|
||||
color: selected ? _kPrimary : Colors.grey.shade200,
|
||||
width: 1.5,
|
||||
),
|
||||
color: selected ? _kPrimary : context.divider, width: 1.5),
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(icon,
|
||||
size: 18,
|
||||
color: selected ? _kPrimary : Colors.grey.shade400),
|
||||
const SizedBox(width: 8),
|
||||
Text(
|
||||
label,
|
||||
style: TextStyle(
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: selected ? _kPrimary : Colors.grey.shade500,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 6),
|
||||
AnimatedOpacity(
|
||||
opacity: selected ? 1 : 0,
|
||||
duration: const Duration(milliseconds: 180),
|
||||
child: const Icon(Icons.check_circle_rounded,
|
||||
size: 15, color: _kPrimary),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Row(mainAxisSize: MainAxisSize.min, children: [
|
||||
Icon(icon, size: 18, color: selected ? _kPrimary : context.subtle),
|
||||
const SizedBox(width: 8),
|
||||
Text(label,
|
||||
style: TextStyle(fontSize: 13, fontWeight: FontWeight.w600,
|
||||
color: selected ? _kPrimary : context.muted)),
|
||||
const SizedBox(width: 6),
|
||||
AnimatedOpacity(
|
||||
opacity: selected ? 1 : 0,
|
||||
duration: const Duration(milliseconds: 180),
|
||||
child: const Icon(Icons.check_circle_rounded, size: 15, color: _kPrimary),
|
||||
),
|
||||
]),
|
||||
),
|
||||
);
|
||||
}
|
||||
@@ -789,16 +595,8 @@ class _Field extends StatelessWidget {
|
||||
final TextInputType? keyboardType;
|
||||
final String? Function(String?)? validator;
|
||||
final ValueChanged<String> onChanged;
|
||||
|
||||
const _Field({
|
||||
required this.initial,
|
||||
required this.hint,
|
||||
required this.label,
|
||||
required this.icon,
|
||||
required this.onChanged,
|
||||
this.keyboardType,
|
||||
this.validator,
|
||||
});
|
||||
const _Field({required this.initial, required this.hint, required this.label,
|
||||
required this.icon, required this.onChanged, this.keyboardType, this.validator});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
@@ -807,41 +605,28 @@ class _Field extends StatelessWidget {
|
||||
keyboardType: keyboardType,
|
||||
validator: validator,
|
||||
onChanged: onChanged,
|
||||
style: const TextStyle(fontSize: 13),
|
||||
style: TextStyle(fontSize: 13, color: context.onSurface),
|
||||
decoration: InputDecoration(
|
||||
labelText: label,
|
||||
hintText: hint,
|
||||
prefixIcon:
|
||||
Icon(icon, size: 18, color: Colors.grey.shade500),
|
||||
contentPadding:
|
||||
const EdgeInsets.symmetric(horizontal: 14, vertical: 12),
|
||||
labelStyle: const TextStyle(
|
||||
fontSize: 13,
|
||||
color: Color(0xFF64748B),
|
||||
),
|
||||
prefixIcon: Icon(icon, size: 18, color: context.subtle),
|
||||
contentPadding: const EdgeInsets.symmetric(horizontal: 14, vertical: 12),
|
||||
labelStyle: TextStyle(fontSize: 13, color: context.muted),
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
borderSide: BorderSide(color: Colors.grey.shade200),
|
||||
),
|
||||
borderRadius: BorderRadius.circular(10), borderSide: BorderSide(color: context.divider)),
|
||||
enabledBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
borderSide: BorderSide(color: Colors.grey.shade200),
|
||||
),
|
||||
borderRadius: BorderRadius.circular(10), borderSide: BorderSide(color: context.divider)),
|
||||
focusedBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
borderSide: const BorderSide(color: _kPrimary, width: 1.5),
|
||||
),
|
||||
borderRadius: BorderRadius.circular(10), borderSide: const BorderSide(color: _kPrimary, width: 1.5)),
|
||||
filled: true,
|
||||
fillColor: const Color(0xFFF8FAFC),
|
||||
fillColor: context.inputFill,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _Divider extends StatelessWidget {
|
||||
const _Divider();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) =>
|
||||
Divider(height: 16, color: Colors.grey.shade100);
|
||||
Divider(height: 16, color: context.divider);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user