admin/marco.pms.mobileapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Vaibhav Surve 2025-07-05 17:29:35 +05:30
parent e7940941ed
commit 606c5e5971
1 changed files with 105 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

193
lib/view/directory/directory_main_screen.dart
View File

@ -303,6 +303,7 @@ class DirectoryMainScreen extends StatelessWidget {
final firstName = nameParts.first; final firstName = nameParts.first;
final lastName = nameParts.length > 1 ? nameParts.last : ""; final lastName = nameParts.length > 1 ? nameParts.last : "";
final tags = contact.tags.map((tag) => tag.name).toList(); final tags = contact.tags.map((tag) => tag.name).toList();
return InkWell( return InkWell(
onTap: () { onTap: () {
Get.to(() => ContactDetailScreen(contact: contact)); Get.to(() => ContactDetailScreen(contact: contact));
@ -310,63 +311,56 @@ class DirectoryMainScreen extends StatelessWidget {
child: Padding( child: Padding(
padding: const EdgeInsets.symmetric( padding: const EdgeInsets.symmetric(
horizontal: 12.0, vertical: 10), horizontal: 12.0, vertical: 10),
child: Row( child: Column(
crossAxisAlignment: CrossAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
// Leading Icon // Top Row: Avatar, Info, Icons
Avatar( Row(
firstName: firstName, crossAxisAlignment: CrossAxisAlignment.start,
lastName: lastName, children: [
size: 45, // Avatar
), Avatar(
MySpacing.width(12), firstName: firstName,
lastName: lastName,
size: 35),
MySpacing.width(12),
// Middle Content // Middle: Contact Info (wrap with Flexible instead of Expanded)
Expanded( Flexible(
child: Column( fit: FlexFit.tight,
crossAxisAlignment: CrossAxisAlignment.start, child: Column(
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:
CrossAxisAlignment.start, CrossAxisAlignment.start,
children: [ 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) => ...contact.contactEmails.map((e) =>
GestureDetector( Padding(
onTap: () => padding: const EdgeInsets.only(
LauncherUtils.launchEmail( bottom: 4),
e.emailAddress), child: GestureDetector(
onLongPress: () => onTap: () =>
LauncherUtils.copyToClipboard( LauncherUtils.launchEmail(
e.emailAddress, e.emailAddress),
typeLabel: 'Email'), onLongPress: () =>
child: Padding( LauncherUtils.copyToClipboard(
padding: const EdgeInsets.only( e.emailAddress,
bottom: 4), typeLabel: 'Email'),
child: Row( child: Row(
mainAxisSize: MainAxisSize.min,
children: [ children: [
const Icon( const Icon(
Icons.email_outlined, Icons.email_outlined,
size: 16, size: 16,
color: Colors.indigo), color: Colors.indigo),
MySpacing.width(4), MySpacing.width(4),
ConstrainedBox( Flexible(
constraints:
const BoxConstraints(
maxWidth: 180),
child: MyText.labelSmall( child: MyText.labelSmall(
e.emailAddress, e.emailAddress,
overflow: overflow:
@ -380,30 +374,29 @@ class DirectoryMainScreen extends StatelessWidget {
), ),
), ),
)), )),
// Phones
...contact.contactPhones.map((p) => ...contact.contactPhones.map((p) =>
GestureDetector( Padding(
onTap: () => padding: const EdgeInsets.only(
LauncherUtils.launchPhone( bottom: 4),
p.phoneNumber), child: GestureDetector(
onLongPress: () => onTap: () =>
LauncherUtils.copyToClipboard( LauncherUtils.launchPhone(
p.phoneNumber, p.phoneNumber),
typeLabel: 'Phone number'), onLongPress: () =>
child: Padding( LauncherUtils.copyToClipboard(
padding: const EdgeInsets.only( p.phoneNumber,
bottom: 4), typeLabel:
'Phone number'),
child: Row( child: Row(
mainAxisSize: MainAxisSize.min,
children: [ children: [
const Icon( const Icon(
Icons.phone_outlined, Icons.phone_outlined,
size: 16, size: 16,
color: Colors.indigo), color: Colors.indigo),
MySpacing.width(4), MySpacing.width(4),
ConstrainedBox( Flexible(
constraints:
const BoxConstraints(
maxWidth: 160),
child: MyText.labelSmall( child: MyText.labelSmall(
p.phoneNumber, p.phoneNumber,
overflow: overflow:
@ -419,38 +412,62 @@ class DirectoryMainScreen extends StatelessWidget {
)), )),
], ],
), ),
),
if (tags.isNotEmpty) ...[ // Right: Arrow + WhatsApp
MySpacing.height(4), MySpacing.width(
MyText.labelSmall( 8), // spacing between content and right column
tags.join(', '), Column(
color: Colors.grey[500], crossAxisAlignment: CrossAxisAlignment.end,
maxLines: 1, children: [
overflow: TextOverflow.ellipsis, 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),
),
], ],
], ),
),
),
// WhatsApp launcher icon
Column(
mainAxisAlignment: MainAxisAlignment.center,
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(),
),
),
],
], ],
), ),
), ),