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 structure and readability

Browse Source
This commit is contained in:
Vaibhav Surve 2025-07-07 10:13:15 +05:30
parent 087c77bbd2
commit 56b493c909
1 changed files with 88 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -311,41 +311,41 @@ 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: Column( child: Row(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.center,
children: [ children: [
// Top Row: Avatar, Info, Icons // Leading Icon
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Avatar
Avatar( Avatar(
firstName: firstName, firstName: firstName,
lastName: lastName, lastName: lastName,
size: 35), size: 45,
),
MySpacing.width(12), MySpacing.width(12),
// Middle: Contact Info (wrap with Flexible instead of Expanded) // Middle Content
Flexible( Expanded(
fit: FlexFit.tight,
child: Column( 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:
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) =>
Padding( GestureDetector(
padding: const EdgeInsets.only(
bottom: 4),
child: GestureDetector(
onTap: () => onTap: () =>
LauncherUtils.launchEmail( LauncherUtils.launchEmail(
e.emailAddress), e.emailAddress),
@ -353,14 +353,21 @@ class DirectoryMainScreen extends StatelessWidget {
LauncherUtils.copyToClipboard( LauncherUtils.copyToClipboard(
e.emailAddress, e.emailAddress,
typeLabel: 'Email'), typeLabel: 'Email'),
child: Padding(
padding: const EdgeInsets.only(
bottom: 4),
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),
Flexible( ConstrainedBox(
constraints:
const BoxConstraints(
maxWidth: 180),
child: MyText.labelSmall( child: MyText.labelSmall(
e.emailAddress, e.emailAddress,
overflow: overflow:
@ -374,29 +381,30 @@ class DirectoryMainScreen extends StatelessWidget {
), ),
), ),
)), )),
// Phones
...contact.contactPhones.map((p) => ...contact.contactPhones.map((p) =>
Padding( GestureDetector(
padding: const EdgeInsets.only(
bottom: 4),
child: GestureDetector(
onTap: () => onTap: () =>
LauncherUtils.launchPhone( LauncherUtils.launchPhone(
p.phoneNumber), p.phoneNumber),
onLongPress: () => onLongPress: () =>
LauncherUtils.copyToClipboard( LauncherUtils.copyToClipboard(
p.phoneNumber, p.phoneNumber,
typeLabel: typeLabel: 'Phone number'),
'Phone number'), child: Padding(
padding: const EdgeInsets.only(
bottom: 4),
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),
Flexible( ConstrainedBox(
constraints:
const BoxConstraints(
maxWidth: 160),
child: MyText.labelSmall( child: MyText.labelSmall(
p.phoneNumber, p.phoneNumber,
overflow: overflow:
@ -412,13 +420,22 @@ class DirectoryMainScreen extends StatelessWidget {
)), )),
], ],
), ),
),
// Right: Arrow + WhatsApp if (tags.isNotEmpty) ...[
MySpacing.width( MySpacing.height(4),
8), // spacing between content and right column MyText.labelSmall(
tags.join(', '),
color: Colors.grey[500],
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
],
],
),
),
// WhatsApp launcher icon
Column( Column(
crossAxisAlignment: CrossAxisAlignment.end, mainAxisAlignment: MainAxisAlignment.start,
children: [ children: [
const Icon(Icons.arrow_forward_ios, const Icon(Icons.arrow_forward_ios,
color: Colors.grey, size: 16), color: Colors.grey, size: 16),
@ -430,44 +447,11 @@ class DirectoryMainScreen extends StatelessWidget {
child: const FaIcon( child: const FaIcon(
FontAwesomeIcons.whatsapp, FontAwesomeIcons.whatsapp,
color: Colors.green, color: Colors.green,
size: 20), 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(),
), ),
), ),
], ],
),
], ],
), ),
), ),