feat(directory): refactor contact card layout for improved structure and readability

This commit is contained in:
Vaibhav Surve 2025-07-07 10:13:15 +05:30
parent 087c77bbd2
commit 56b493c909

View File

@ -311,56 +311,63 @@ class DirectoryMainScreen extends StatelessWidget {
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 12.0, vertical: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
// Top Row: Avatar, Info, Icons
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Avatar
Avatar(
firstName: firstName,
lastName: lastName,
size: 35),
MySpacing.width(12),
// Leading Icon
Avatar(
firstName: firstName,
lastName: lastName,
size: 45,
),
MySpacing.width(12),
// Middle: Contact Info (wrap with Flexible instead of Expanded)
Flexible(
fit: FlexFit.tight,
child: Column(
// Middle Content
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
MyText.titleSmall(
contact.name,
fontWeight: 600,
overflow: TextOverflow.ellipsis,
),
MyText.bodySmall(
contact.organization,
color: Colors.grey[700],
overflow: TextOverflow.ellipsis,
),
MySpacing.height(6),
// Launcher Row
Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
MyText.titleSmall(contact.name,
fontWeight: 600,
overflow: TextOverflow.ellipsis),
MyText.bodySmall(contact.organization,
color: Colors.grey[700],
overflow: TextOverflow.ellipsis),
MySpacing.height(6),
// Emails
...contact.contactEmails.map((e) =>
Padding(
padding: const EdgeInsets.only(
bottom: 4),
child: GestureDetector(
onTap: () =>
LauncherUtils.launchEmail(
e.emailAddress),
onLongPress: () =>
LauncherUtils.copyToClipboard(
e.emailAddress,
typeLabel: 'Email'),
GestureDetector(
onTap: () =>
LauncherUtils.launchEmail(
e.emailAddress),
onLongPress: () =>
LauncherUtils.copyToClipboard(
e.emailAddress,
typeLabel: 'Email'),
child: Padding(
padding: const EdgeInsets.only(
bottom: 4),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(
Icons.email_outlined,
size: 16,
color: Colors.indigo),
MySpacing.width(4),
Flexible(
ConstrainedBox(
constraints:
const BoxConstraints(
maxWidth: 180),
child: MyText.labelSmall(
e.emailAddress,
overflow:
@ -374,29 +381,30 @@ class DirectoryMainScreen extends StatelessWidget {
),
),
)),
// Phones
...contact.contactPhones.map((p) =>
Padding(
padding: const EdgeInsets.only(
bottom: 4),
child: GestureDetector(
onTap: () =>
LauncherUtils.launchPhone(
p.phoneNumber),
onLongPress: () =>
LauncherUtils.copyToClipboard(
p.phoneNumber,
typeLabel:
'Phone number'),
GestureDetector(
onTap: () =>
LauncherUtils.launchPhone(
p.phoneNumber),
onLongPress: () =>
LauncherUtils.copyToClipboard(
p.phoneNumber,
typeLabel: 'Phone number'),
child: Padding(
padding: const EdgeInsets.only(
bottom: 4),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(
Icons.phone_outlined,
size: 16,
color: Colors.indigo),
MySpacing.width(4),
Flexible(
ConstrainedBox(
constraints:
const BoxConstraints(
maxWidth: 160),
child: MyText.labelSmall(
p.phoneNumber,
overflow:
@ -412,62 +420,38 @@ class DirectoryMainScreen extends StatelessWidget {
)),
],
),
),
// Right: Arrow + WhatsApp
MySpacing.width(
8), // spacing between content and right column
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
const Icon(Icons.arrow_forward_ios,
color: Colors.grey, size: 16),
MySpacing.height(12),
if (phone != '-')
GestureDetector(
onTap: () =>
LauncherUtils.launchWhatsApp(phone),
child: const FaIcon(
FontAwesomeIcons.whatsapp,
color: Colors.green,
size: 20),
),
if (tags.isNotEmpty) ...[
MySpacing.height(4),
MyText.labelSmall(
tags.join(', '),
color: Colors.grey[500],
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
],
),
],
),
),
// WhatsApp launcher icon
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
const Icon(Icons.arrow_forward_ios,
color: Colors.grey, size: 16),
MySpacing.height(12),
if (phone != '-')
GestureDetector(
onTap: () =>
LauncherUtils.launchWhatsApp(phone),
child: const FaIcon(
FontAwesomeIcons.whatsapp,
color: Colors.green,
size: 20,
),
),
],
),
// Bottom Row: Tags as chips aligned to right
if (tags.isNotEmpty) ...[
MySpacing.height(5),
Align(
alignment: Alignment.centerRight,
child: Wrap(
spacing: 8,
runSpacing: 6,
alignment: WrapAlignment.end,
children: tags
.map(
(tag) => Container(
padding: const EdgeInsets.symmetric(
horizontal: 10, vertical: 5),
decoration: BoxDecoration(
color: Colors.indigo.shade50,
borderRadius:
BorderRadius.circular(8),
),
child: MyText.labelSmall(
tag,
fontWeight: 600,
color: Colors.indigo,
overflow: TextOverflow.ellipsis,
),
),
)
.toList(),
),
),
],
],
),
),