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

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

@@ -68,7 +68,8 @@ class _TopProfessionalsSectionState
Widget build(BuildContext context) {
// CMS data for title/CTA text only
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)
final profState = ref.watch(topProfessionalsProvider);
@@ -107,11 +108,12 @@ class _TopProfessionalsSectionState
else ...[
// Professional Cards - horizontal scroll
SizedBox(
height: 540,
height: 510,
child: ListView.builder(
controller: _scrollController,
scrollDirection: Axis.horizontal,
physics: const BouncingScrollPhysics(),
padding: const EdgeInsets.only(bottom: 16, left: 10, right: 10),
itemCount: activeList.length,
itemBuilder: (context, index) {
final cardWidth = MediaQuery.of(context).size.width - 48;
@@ -122,7 +124,13 @@ class _TopProfessionalsSectionState
left: index == 0 ? 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,7 +297,9 @@ class _TopProfessionalsSectionState
final expertiseTags = agent.specializations;
final experience = agent.experienceText;
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 rating = rawRating > 0 ? rawRating : 5.0;
@@ -298,18 +308,27 @@ class _TopProfessionalsSectionState
color: Colors.white,
borderRadius: BorderRadius.circular(15),
border: Border.all(color: AppColors.primaryDark, width: 0.1),
boxShadow: [
BoxShadow(
color: const Color(0xFFD9D9D9).withValues(alpha: 0.5),
offset: const Offset(0, 10),
blurRadius: 20,
),
],
),
clipBehavior: Clip.antiAlias,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
// Image (226px per Figma)
SizedBox(
width: double.infinity,
height: 226,
child: ClipRRect(
borderRadius:
const BorderRadius.vertical(top: Radius.circular(15)),
borderRadius: const BorderRadius.vertical(
top: Radius.circular(15),
),
child: imageUrl.isNotEmpty
? S3Image(
imageUrl: imageUrl,
@@ -324,13 +343,11 @@ class _TopProfessionalsSectionState
),
// Content
Expanded(
child: Padding(
padding: const EdgeInsets.fromLTRB(16, 12, 16, 12),
child: SingleChildScrollView(
physics: const NeverScrollableScrollPhysics(),
Padding(
padding: const EdgeInsets.fromLTRB(16, 12, 16, 14),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
// Name
Text(
@@ -450,11 +467,19 @@ class _TopProfessionalsSectionState
...expertiseTags.take(3).map((tag) => _buildTag(tag)),
if (expertiseTags.length > 3)
Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
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),
color: AppColors.accentOrange.withValues(
alpha: 0.1,
),
border: Border.all(
color: AppColors.accentOrange,
width: 0.7,
),
),
child: Text(
'+${expertiseTags.length - 3} more',
@@ -518,8 +543,6 @@ class _TopProfessionalsSectionState
],
),
),
),
),
],
),
);
@@ -603,7 +626,6 @@ class _TopProfessionalsSectionState
);
}
Widget _buildAvatarPlaceholder() {
return Container(
width: double.infinity,
@@ -615,11 +637,9 @@ class _TopProfessionalsSectionState
Widget _buildTag(String label) {
return Container(
height: 28,
padding: const EdgeInsets.symmetric(horizontal: 10),
alignment: Alignment.center,
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(14),
borderRadius: BorderRadius.circular(20),
border: Border.all(color: AppColors.primaryDark, width: 0.7),
),
child: Text(
@@ -629,7 +649,6 @@ class _TopProfessionalsSectionState
fontSize: 13,
fontWeight: FontWeight.w400,
color: AppColors.primaryDark,
height: 1,
),
),
);
@@ -638,8 +657,9 @@ class _TopProfessionalsSectionState
Widget _buildProgressIndicator(int totalCards) {
return LayoutBuilder(
builder: (context, constraints) {
final indicatorWidth =
totalCards > 0 ? constraints.maxWidth / totalCards : 103.0;
final indicatorWidth = totalCards > 0
? constraints.maxWidth / totalCards
: 103.0;
final offset = totalCards > 0
? (_currentPage * constraints.maxWidth / totalCards)
: 0.0;
@@ -731,11 +751,8 @@ class _TopProfessionalsSectionState
'assets/icons/building_icon.png',
width: 50,
height: 38,
errorBuilder: (_, __, ___) => const Icon(
Icons.business,
color: Color(0xFF5BA4A4),
size: 38,
),
errorBuilder: (_, __, ___) =>
const Icon(Icons.business, color: Color(0xFF5BA4A4), size: 38),
),
const SizedBox(height: 12),
Text(