feat: update app icons and refactor home top professionals section to display dynamic agent profiles.
This commit is contained in:
pradeepkumar
@@ -5,6 +5,8 @@ import 'package:go_router/go_router.dart';
|
||||
import 'package:shimmer/shimmer.dart';
|
||||
import 'package:real_estate_mobile/core/constants/app_colors.dart';
|
||||
import 'package:real_estate_mobile/core/widgets/s3_image.dart';
|
||||
import 'package:real_estate_mobile/features/agents/data/models/agent_profile.dart';
|
||||
import 'package:real_estate_mobile/features/agents/presentation/providers/agents_provider.dart';
|
||||
import 'package:real_estate_mobile/features/home/data/models/landing_page_content.dart';
|
||||
import 'package:real_estate_mobile/features/home/presentation/providers/home_provider.dart';
|
||||
|
||||
@@ -64,14 +66,16 @@ class _TopProfessionalsSectionState
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
// CMS data for everything (title, CTA, agents, lenders)
|
||||
// CMS data for title/CTA text only
|
||||
final homeState = ref.watch(homeProvider);
|
||||
final cmsContent = homeState.content?.topProfessionals ?? _defaultCmsContent;
|
||||
|
||||
// Use CMS agents/lenders list based on active tab
|
||||
// Dynamic data from database (top-rated agents/lenders, matching web)
|
||||
final profState = ref.watch(topProfessionalsProvider);
|
||||
final activeList = _activeTab == 'agents'
|
||||
? cmsContent.agents
|
||||
: cmsContent.lenders;
|
||||
? profState.agents
|
||||
: profState.lenders;
|
||||
final isLoading = profState.isLoading || homeState.isLoading;
|
||||
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 24),
|
||||
@@ -96,7 +100,7 @@ class _TopProfessionalsSectionState
|
||||
const SizedBox(height: 24),
|
||||
|
||||
// Content
|
||||
if (homeState.isLoading)
|
||||
if (isLoading)
|
||||
_buildShimmerCards()
|
||||
else if (activeList.isEmpty)
|
||||
_buildEmptyState(_activeTab)
|
||||
@@ -118,7 +122,7 @@ class _TopProfessionalsSectionState
|
||||
left: index == 0 ? 0 : 8,
|
||||
right: index == activeList.length - 1 ? 0 : 8,
|
||||
),
|
||||
child: _buildCmsProfessionalCard(activeList[index], index: index),
|
||||
child: _buildProfessionalCard(activeList[index], index: index),
|
||||
),
|
||||
);
|
||||
},
|
||||
@@ -279,223 +283,229 @@ class _TopProfessionalsSectionState
|
||||
);
|
||||
}
|
||||
|
||||
// -- Professional Card using CMS ProfessionalItem data --
|
||||
Widget _buildCmsProfessionalCard(ProfessionalItem item, {int index = 0}) {
|
||||
final imageUrl = item.imageUrl;
|
||||
// -- Professional Card using dynamic AgentProfile data (matching web) --
|
||||
Widget _buildProfessionalCard(AgentProfile agent, {int index = 0}) {
|
||||
final imageUrl = agent.avatarUrl ?? '';
|
||||
final expertiseTags = agent.specializations;
|
||||
final experience = agent.experienceText;
|
||||
final locationText = agent.location;
|
||||
final subtitle = agent.agentType != null ? '(${agent.agentType!.name})' : '';
|
||||
final rating = agent.averageRating ?? 5.0;
|
||||
|
||||
return Container(
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white,
|
||||
borderRadius: BorderRadius.circular(15),
|
||||
border: Border.all(color: AppColors.primaryDark, width: 0.1),
|
||||
),
|
||||
clipBehavior: Clip.antiAlias,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// Image (226px per Figma)
|
||||
SizedBox(
|
||||
width: double.infinity,
|
||||
height: 226,
|
||||
child: ClipRRect(
|
||||
borderRadius:
|
||||
const BorderRadius.vertical(top: Radius.circular(15)),
|
||||
child: imageUrl.isNotEmpty
|
||||
? S3Image(
|
||||
imageUrl: imageUrl,
|
||||
width: double.infinity,
|
||||
height: 226,
|
||||
fit: BoxFit.cover,
|
||||
alignment: Alignment.topCenter,
|
||||
placeholder: (_) => _buildImagePlaceholder(index),
|
||||
errorWidget: (_) => _buildImagePlaceholder(index),
|
||||
)
|
||||
: _buildImagePlaceholder(index),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white,
|
||||
borderRadius: BorderRadius.circular(15),
|
||||
border: Border.all(color: AppColors.primaryDark, width: 0.1),
|
||||
),
|
||||
clipBehavior: Clip.antiAlias,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// Image (226px per Figma)
|
||||
SizedBox(
|
||||
width: double.infinity,
|
||||
height: 226,
|
||||
child: ClipRRect(
|
||||
borderRadius:
|
||||
const BorderRadius.vertical(top: Radius.circular(15)),
|
||||
child: imageUrl.isNotEmpty
|
||||
? S3Image(
|
||||
imageUrl: imageUrl,
|
||||
width: double.infinity,
|
||||
height: 226,
|
||||
fit: BoxFit.cover,
|
||||
alignment: Alignment.topCenter,
|
||||
placeholder: (_) => _buildImagePlaceholder(index),
|
||||
errorWidget: (_) => _buildImagePlaceholder(index),
|
||||
)
|
||||
: _buildImagePlaceholder(index),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Content
|
||||
Expanded(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.fromLTRB(16, 12, 16, 12),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// Name
|
||||
Text(
|
||||
item.name,
|
||||
style: const TextStyle(
|
||||
fontFamily: 'Fractul',
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: AppColors.primaryDark,
|
||||
),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
|
||||
// Subtitle
|
||||
if (item.subtitle.isNotEmpty)
|
||||
// Content
|
||||
Expanded(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.fromLTRB(16, 12, 16, 12),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// Name
|
||||
Text(
|
||||
item.subtitle,
|
||||
agent.fullName,
|
||||
style: const TextStyle(
|
||||
fontFamily: 'SourceSerif4',
|
||||
fontSize: 10,
|
||||
fontWeight: FontWeight.w400,
|
||||
fontFamily: 'Fractul',
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: AppColors.primaryDark,
|
||||
),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
const SizedBox(height: 4),
|
||||
|
||||
// Verified badge
|
||||
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(
|
||||
// Subtitle (agent type)
|
||||
if (subtitle.isNotEmpty)
|
||||
Text(
|
||||
subtitle,
|
||||
style: const TextStyle(
|
||||
fontFamily: 'SourceSerif4',
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: Color(0xFF638559),
|
||||
fontSize: 10,
|
||||
fontWeight: FontWeight.w400,
|
||||
color: AppColors.primaryDark,
|
||||
),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
const SizedBox(height: 4),
|
||||
|
||||
// Location
|
||||
if (item.location.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(
|
||||
item.location,
|
||||
style: const TextStyle(
|
||||
fontFamily: 'SourceSerif4',
|
||||
fontSize: 10,
|
||||
fontWeight: FontWeight.w400,
|
||||
color: AppColors.primaryDark,
|
||||
),
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
],
|
||||
|
||||
// Expertise tags
|
||||
if (item.expertise.isNotEmpty) ...[
|
||||
const Text(
|
||||
'Expertise:',
|
||||
style: TextStyle(
|
||||
fontFamily: 'Fractul',
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: AppColors.primaryDark,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 6),
|
||||
Wrap(
|
||||
spacing: 8,
|
||||
runSpacing: 6,
|
||||
children: item.expertise
|
||||
.take(6)
|
||||
.map((tag) => _buildTag(tag))
|
||||
.toList(),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
],
|
||||
|
||||
// Experience
|
||||
if (item.experience.isNotEmpty) ...[
|
||||
RichText(
|
||||
text: TextSpan(
|
||||
// Verified badge
|
||||
if (agent.isVerified)
|
||||
Row(
|
||||
children: [
|
||||
const TextSpan(
|
||||
text: 'Experience: ',
|
||||
style: TextStyle(
|
||||
fontFamily: 'Fractul',
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: AppColors.primaryDark,
|
||||
SvgPicture.asset(
|
||||
'assets/icons/verified_badge_icon.svg',
|
||||
width: 16,
|
||||
height: 16,
|
||||
placeholderBuilder: (_) => const Icon(
|
||||
Icons.verified,
|
||||
color: Color(0xFF638559),
|
||||
size: 16,
|
||||
),
|
||||
),
|
||||
TextSpan(
|
||||
text: item.experience,
|
||||
style: const TextStyle(
|
||||
const SizedBox(width: 6),
|
||||
const Text(
|
||||
'\u201CVerified local agent\u201D',
|
||||
style: TextStyle(
|
||||
fontFamily: 'SourceSerif4',
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w400,
|
||||
color: AppColors.primaryDark,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: Color(0xFF638559),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
],
|
||||
|
||||
// Star Rating
|
||||
Row(
|
||||
children: List.generate(5, (i) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(right: 4),
|
||||
child: Icon(
|
||||
i < item.rating.round()
|
||||
? Icons.star_rounded
|
||||
: Icons.star_outline_rounded,
|
||||
color: const Color(0xFFE5A625),
|
||||
size: 24,
|
||||
// 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
|
||||
if (expertiseTags.isNotEmpty) ...[
|
||||
const Text(
|
||||
'Expertise:',
|
||||
style: TextStyle(
|
||||
fontFamily: 'Fractul',
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: AppColors.primaryDark,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 6),
|
||||
Wrap(
|
||||
spacing: 8,
|
||||
runSpacing: 6,
|
||||
children: expertiseTags
|
||||
.take(6)
|
||||
.map((tag) => _buildTag(tag))
|
||||
.toList(),
|
||||
),
|
||||
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(5, (i) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(right: 4),
|
||||
child: Icon(
|
||||
i < rating.round()
|
||||
? Icons.star_rounded
|
||||
: Icons.star_outline_rounded,
|
||||
color: const Color(0xFFE5A625),
|
||||
size: 24,
|
||||
),
|
||||
);
|
||||
}),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildShimmerCards() {
|
||||
return SizedBox(
|
||||
height: 540,
|
||||
|
||||
Reference in New Issue
Block a user