Re-Quest/mobile-app
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Enhance professional card display by reducing section height, adding list padding, applying a box shadow, and aligning card content to the top.

Browse Source
This commit is contained in:
pradeepkumar
2026-03-26 00:14:40 +05:30
parent c5f905b4d3
commit e9d069b09b
1 changed files with 237 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

457
lib/features/home/presentation/widgets/top_professionals_section.dart
View File

@@ -68,7 +68,8 @@ class _TopProfessionalsSectionState
Widget build(BuildContext context) { Widget build(BuildContext context) {
// CMS data for title/CTA text only // CMS data for title/CTA text only
final homeState = ref.watch(homeProvider); final homeState = ref.watch(homeProvider);
final cmsContent = homeState.content?.topProfessionals ?? _defaultCmsContent; final cmsContent =
homeState.content?.topProfessionals ?? _defaultCmsContent;
// Dynamic data from database (top-rated agents/lenders, matching web) // Dynamic data from database (top-rated agents/lenders, matching web)
final profState = ref.watch(topProfessionalsProvider); final profState = ref.watch(topProfessionalsProvider);
@@ -107,11 +108,12 @@ class _TopProfessionalsSectionState
else ...[ else ...[
// Professional Cards - horizontal scroll // Professional Cards - horizontal scroll
SizedBox( SizedBox(
height: 540, height: 510,
child: ListView.builder( child: ListView.builder(
controller: _scrollController, controller: _scrollController,
scrollDirection: Axis.horizontal, scrollDirection: Axis.horizontal,
physics: const BouncingScrollPhysics(), physics: const BouncingScrollPhysics(),
padding: const EdgeInsets.only(bottom: 16, left: 10, right: 10),
itemCount: activeList.length, itemCount: activeList.length,
itemBuilder: (context, index) { itemBuilder: (context, index) {
final cardWidth = MediaQuery.of(context).size.width - 48; final cardWidth = MediaQuery.of(context).size.width - 48;
@@ -122,7 +124,13 @@ class _TopProfessionalsSectionState
left: index == 0 ? 0 : 8, left: index == 0 ? 0 : 8,
right: index == activeList.length - 1 ? 0 : 8, right: index == activeList.length - 1 ? 0 : 8,
), ),
child: _buildProfessionalCard(activeList[index], index: index), child: Align(
alignment: Alignment.topCenter,
child: _buildProfessionalCard(
activeList[index],
index: index,
),
),
), ),
); );
}, },
@@ -289,239 +297,254 @@ class _TopProfessionalsSectionState
final expertiseTags = agent.specializations; final expertiseTags = agent.specializations;
final experience = agent.experienceText; final experience = agent.experienceText;
final locationText = agent.location; final locationText = agent.location;
final subtitle = agent.agentType != null ? '(${agent.agentType!.name})' : ''; final subtitle = agent.agentType != null
? '(${agent.agentType!.name})'
: '';
final rawRating = agent.averageRating ?? 0.0; final rawRating = agent.averageRating ?? 0.0;
final rating = rawRating > 0 ? rawRating : 5.0; final rating = rawRating > 0 ? rawRating : 5.0;
return Container( return Container(
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.white, color: Colors.white,
borderRadius: BorderRadius.circular(15), borderRadius: BorderRadius.circular(15),
border: Border.all(color: AppColors.primaryDark, width: 0.1), border: Border.all(color: AppColors.primaryDark, width: 0.1),
), boxShadow: [
clipBehavior: Clip.antiAlias, BoxShadow(
child: Column( color: const Color(0xFFD9D9D9).withValues(alpha: 0.5),
crossAxisAlignment: CrossAxisAlignment.start, offset: const Offset(0, 10),
children: [ blurRadius: 20,
// Image (226px per Figma) ),
SizedBox( ],
width: double.infinity, ),
height: 226, clipBehavior: Clip.antiAlias,
child: ClipRRect( child: Column(
borderRadius: crossAxisAlignment: CrossAxisAlignment.start,
const BorderRadius.vertical(top: Radius.circular(15)), mainAxisSize: MainAxisSize.min,
child: imageUrl.isNotEmpty children: [
? S3Image( // Image (226px per Figma)
imageUrl: imageUrl, SizedBox(
width: double.infinity, width: double.infinity,
height: 226, height: 226,
fit: BoxFit.cover, child: ClipRRect(
alignment: Alignment.topCenter, borderRadius: const BorderRadius.vertical(
errorWidget: (_) => _buildImagePlaceholder(index), top: Radius.circular(15),
)
: _buildImagePlaceholder(index),
), ),
child: imageUrl.isNotEmpty
? S3Image(
imageUrl: imageUrl,
width: double.infinity,
height: 226,
fit: BoxFit.cover,
alignment: Alignment.topCenter,
errorWidget: (_) => _buildImagePlaceholder(index),
)
: _buildImagePlaceholder(index),
), ),
),
// Content // Content
Expanded( Padding(
child: Padding( padding: const EdgeInsets.fromLTRB(16, 12, 16, 14),
padding: const EdgeInsets.fromLTRB(16, 12, 16, 12), child: Column(
child: SingleChildScrollView( crossAxisAlignment: CrossAxisAlignment.start,
physics: const NeverScrollableScrollPhysics(), mainAxisSize: MainAxisSize.min,
child: Column( children: [
crossAxisAlignment: CrossAxisAlignment.start, // Name
children: [ Text(
// Name agent.fullName,
style: const TextStyle(
fontFamily: 'Fractul',
fontSize: 14,
fontWeight: FontWeight.w700,
color: AppColors.primaryDark,
),
overflow: TextOverflow.ellipsis,
),
const SizedBox(height: 4),
// Subtitle (agent type)
if (subtitle.isNotEmpty)
Text( Text(
agent.fullName, subtitle,
style: const TextStyle( style: const TextStyle(
fontFamily: 'SourceSerif4',
fontSize: 10,
fontWeight: FontWeight.w400,
color: AppColors.primaryDark,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
const SizedBox(height: 4),
// Verified badge
if (agent.isVerified)
Row(
children: [
SvgPicture.asset(
'assets/icons/verified_badge_icon.svg',
width: 16,
height: 16,
placeholderBuilder: (_) => const Icon(
Icons.verified,
color: Color(0xFF638559),
size: 16,
),
),
const SizedBox(width: 6),
const Text(
'\u201CVerified local agent\u201D',
style: TextStyle(
fontFamily: 'SourceSerif4',
fontSize: 14,
fontWeight: FontWeight.w500,
color: Color(0xFF638559),
),
),
],
),
const SizedBox(height: 8),
// Location
if (locationText.isNotEmpty) ...[
const Text(
'Location:',
style: TextStyle(
fontFamily: 'Fractul', fontFamily: 'Fractul',
fontSize: 14, fontSize: 14,
fontWeight: FontWeight.w700, fontWeight: FontWeight.w700,
color: AppColors.primaryDark, color: AppColors.primaryDark,
), ),
overflow: TextOverflow.ellipsis,
), ),
const SizedBox(height: 4), const SizedBox(height: 2),
Row(
// Subtitle (agent type) children: [
if (subtitle.isNotEmpty) SvgPicture.asset(
Text( 'assets/icons/location_orange_icon.svg',
subtitle, width: 16,
style: const TextStyle( height: 16,
fontFamily: 'SourceSerif4', placeholderBuilder: (_) => const Icon(
fontSize: 10, Icons.location_on,
fontWeight: FontWeight.w400, color: AppColors.accentOrange,
color: AppColors.primaryDark, size: 16,
),
), ),
maxLines: 1, const SizedBox(width: 4),
overflow: TextOverflow.ellipsis, Expanded(
), child: Text(
const SizedBox(height: 4), locationText,
style: const TextStyle(
fontFamily: 'SourceSerif4',
fontSize: 10,
fontWeight: FontWeight.w400,
color: AppColors.primaryDark,
),
overflow: TextOverflow.ellipsis,
),
),
],
),
const SizedBox(height: 8),
],
// Verified badge // Expertise tags (max 3 visible + "more" pill)
if (agent.isVerified) if (expertiseTags.isNotEmpty) ...[
Row( const Text(
children: [ 'Expertise:',
SvgPicture.asset( style: TextStyle(
'assets/icons/verified_badge_icon.svg', fontFamily: 'Fractul',
width: 16, fontSize: 14,
height: 16, fontWeight: FontWeight.w700,
placeholderBuilder: (_) => const Icon( color: AppColors.primaryDark,
Icons.verified, ),
color: Color(0xFF638559), ),
size: 16, const SizedBox(height: 6),
Wrap(
alignment: WrapAlignment.start,
spacing: 6,
runSpacing: 6,
children: [
...expertiseTags.take(3).map((tag) => _buildTag(tag)),
if (expertiseTags.length > 3)
Container(
padding: const EdgeInsets.symmetric(
horizontal: 10,
vertical: 4,
),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: AppColors.accentOrange.withValues(
alpha: 0.1,
),
border: Border.all(
color: AppColors.accentOrange,
width: 0.7,
),
),
child: Text(
'+${expertiseTags.length - 3} more',
style: const TextStyle(
fontFamily: 'SourceSerif4',
fontSize: 13,
fontWeight: FontWeight.w600,
color: AppColors.accentOrange,
),
), ),
), ),
const SizedBox(width: 6), ],
const Text( ),
'\u201CVerified local agent\u201D', const SizedBox(height: 12),
],
// Experience
if (experience.isNotEmpty) ...[
RichText(
text: TextSpan(
children: [
const TextSpan(
text: 'Experience: ',
style: TextStyle( style: TextStyle(
fontFamily: 'Fractul',
fontSize: 14,
fontWeight: FontWeight.w700,
color: AppColors.primaryDark,
),
),
TextSpan(
text: experience,
style: const TextStyle(
fontFamily: 'SourceSerif4', fontFamily: 'SourceSerif4',
fontSize: 14, fontSize: 14,
fontWeight: FontWeight.w500, fontWeight: FontWeight.w400,
color: Color(0xFF638559), color: AppColors.primaryDark,
), ),
), ),
], ],
), ),
const SizedBox(height: 8), maxLines: 2,
overflow: TextOverflow.ellipsis,
// Location
if (locationText.isNotEmpty) ...[
const Text(
'Location:',
style: TextStyle(
fontFamily: 'Fractul',
fontSize: 14,
fontWeight: FontWeight.w700,
color: AppColors.primaryDark,
),
),
const SizedBox(height: 2),
Row(
children: [
SvgPicture.asset(
'assets/icons/location_orange_icon.svg',
width: 16,
height: 16,
placeholderBuilder: (_) => const Icon(
Icons.location_on,
color: AppColors.accentOrange,
size: 16,
),
),
const SizedBox(width: 4),
Expanded(
child: Text(
locationText,
style: const TextStyle(
fontFamily: 'SourceSerif4',
fontSize: 10,
fontWeight: FontWeight.w400,
color: AppColors.primaryDark,
),
overflow: TextOverflow.ellipsis,
),
),
],
),
const SizedBox(height: 8),
],
// Expertise tags (max 3 visible + "more" pill)
if (expertiseTags.isNotEmpty) ...[
const Text(
'Expertise:',
style: TextStyle(
fontFamily: 'Fractul',
fontSize: 14,
fontWeight: FontWeight.w700,
color: AppColors.primaryDark,
),
),
const SizedBox(height: 6),
Wrap(
alignment: WrapAlignment.start,
spacing: 6,
runSpacing: 6,
children: [
...expertiseTags.take(3).map((tag) => _buildTag(tag)),
if (expertiseTags.length > 3)
Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
color: AppColors.accentOrange.withValues(alpha: 0.1),
border: Border.all(color: AppColors.accentOrange, width: 0.7),
),
child: Text(
'+${expertiseTags.length - 3} more',
style: const TextStyle(
fontFamily: 'SourceSerif4',
fontSize: 13,
fontWeight: FontWeight.w600,
color: AppColors.accentOrange,
),
),
),
],
),
const SizedBox(height: 12),
],
// Experience
if (experience.isNotEmpty) ...[
RichText(
text: TextSpan(
children: [
const TextSpan(
text: 'Experience: ',
style: TextStyle(
fontFamily: 'Fractul',
fontSize: 14,
fontWeight: FontWeight.w700,
color: AppColors.primaryDark,
),
),
TextSpan(
text: experience,
style: const TextStyle(
fontFamily: 'SourceSerif4',
fontSize: 14,
fontWeight: FontWeight.w400,
color: AppColors.primaryDark,
),
),
],
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
const SizedBox(height: 8),
],
// Star Rating
Row(
children: List.generate(rating.round().clamp(0, 5), (i) {
return Padding(
padding: const EdgeInsets.only(right: 4),
child: SvgPicture.asset(
'assets/icons/star_filled_icon.svg',
width: 18,
height: 17,
),
);
}),
), ),
const SizedBox(height: 8),
], ],
),
), // Star Rating
Row(
children: List.generate(rating.round().clamp(0, 5), (i) {
return Padding(
padding: const EdgeInsets.only(right: 4),
child: SvgPicture.asset(
'assets/icons/star_filled_icon.svg',
width: 18,
height: 17,
),
);
}),
),
],
), ),
), ),
], ],
), ),
); );
} }
@@ -603,7 +626,6 @@ class _TopProfessionalsSectionState
); );
} }
Widget _buildAvatarPlaceholder() { Widget _buildAvatarPlaceholder() {
return Container( return Container(
width: double.infinity, width: double.infinity,
@@ -615,11 +637,9 @@ class _TopProfessionalsSectionState
Widget _buildTag(String label) { Widget _buildTag(String label) {
return Container( return Container(
height: 28, padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
padding: const EdgeInsets.symmetric(horizontal: 10),
alignment: Alignment.center,
decoration: BoxDecoration( decoration: BoxDecoration(
borderRadius: BorderRadius.circular(14), borderRadius: BorderRadius.circular(20),
border: Border.all(color: AppColors.primaryDark, width: 0.7), border: Border.all(color: AppColors.primaryDark, width: 0.7),
), ),
child: Text( child: Text(
@@ -629,7 +649,6 @@ class _TopProfessionalsSectionState
fontSize: 13, fontSize: 13,
fontWeight: FontWeight.w400, fontWeight: FontWeight.w400,
color: AppColors.primaryDark, color: AppColors.primaryDark,
height: 1,
), ),
), ),
); );
@@ -638,8 +657,9 @@ class _TopProfessionalsSectionState
Widget _buildProgressIndicator(int totalCards) { Widget _buildProgressIndicator(int totalCards) {
return LayoutBuilder( return LayoutBuilder(
builder: (context, constraints) { builder: (context, constraints) {
final indicatorWidth = final indicatorWidth = totalCards > 0
totalCards > 0 ? constraints.maxWidth / totalCards : 103.0; ? constraints.maxWidth / totalCards
: 103.0;
final offset = totalCards > 0 final offset = totalCards > 0
? (_currentPage * constraints.maxWidth / totalCards) ? (_currentPage * constraints.maxWidth / totalCards)
: 0.0; : 0.0;
@@ -731,11 +751,8 @@ class _TopProfessionalsSectionState
'assets/icons/building_icon.png', 'assets/icons/building_icon.png',
width: 50, width: 50,
height: 38, height: 38,
errorBuilder: (_, __, ___) => const Icon( errorBuilder: (_, __, ___) =>
Icons.business, const Icon(Icons.business, color: Color(0xFF5BA4A4), size: 38),
color: Color(0xFF5BA4A4),
size: 38,
),
), ),
const SizedBox(height: 12), const SizedBox(height: 12),
Text( Text(