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

feat: Implement dynamic top professionals section with agent/lender tabs using Riverpod for state management.

Browse Source
This commit is contained in:
pradeepkumar
2026-02-24 03:28:13 +05:30
parent 0bc8852c17
commit 1f48ff3852
8 changed files with 1034 additions and 285 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,12 +1,17 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:real_estate_mobile/core/constants/app_colors.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';
class TopProfessionalsSection extends StatelessWidget {
class TopProfessionalsSection extends ConsumerWidget {
const TopProfessionalsSection({super.key});
@override
Widget build(BuildContext context) {
Widget build(BuildContext context, WidgetRef ref) {
final state = ref.watch(topProfessionalsProvider);
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 24),
child: Column(
@@ -24,15 +29,38 @@ class TopProfessionalsSection extends StatelessWidget {
const SizedBox(height: 24),
// Agents / Lenders Tab
_buildCategoryTab(),
_buildCategoryTab(ref, state.activeTab),
const SizedBox(height: 24),
// Agent Card
_buildAgentCard(),
const SizedBox(height: 12),
// Content
if (state.isLoading)
const Padding(
padding: EdgeInsets.symmetric(vertical: 40),
child: CircularProgressIndicator(
color: AppColors.accentOrange,
),
)
else if (state.error != null)
_buildErrorState(ref, state.error!)
else if (state.activeList.isEmpty)
_buildEmptyState(state.activeTab)
else ...[
// Agent Cards - horizontal scroll
SizedBox(
height: 480,
child: PageView.builder(
controller: PageController(viewportFraction: 1.0),
itemCount: state.activeList.length,
itemBuilder: (context, index) {
return _buildAgentCard(state.activeList[index]);
},
),
),
const SizedBox(height: 12),
// Progress indicator
_buildProgressIndicator(),
// Progress indicator
_buildProgressIndicator(state.activeList.length),
],
const SizedBox(height: 32),
// See All Agents CTA
@@ -42,7 +70,7 @@ class TopProfessionalsSection extends StatelessWidget {
);
}
Widget _buildCategoryTab() {
Widget _buildCategoryTab(WidgetRef ref, String activeTab) {
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
@@ -50,69 +78,95 @@ class TopProfessionalsSection extends StatelessWidget {
),
child: Row(
children: [
// Active tab - Agents
// Agents tab
Expanded(
child: Container(
padding: const EdgeInsets.symmetric(vertical: 12),
decoration: BoxDecoration(
color: AppColors.accentOrange,
borderRadius: BorderRadius.circular(15),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SvgPicture.asset(
'assets/icons/agents_tab_icon.svg',
width: 24,
height: 24,
placeholderBuilder: (_) => const Icon(
Icons.people,
color: Colors.white,
size: 24,
child: GestureDetector(
onTap: () => ref
.read(topProfessionalsProvider.notifier)
.setActiveTab('agents'),
child: Container(
padding: const EdgeInsets.symmetric(vertical: 12),
decoration: BoxDecoration(
color: activeTab == 'agents'
? AppColors.accentOrange
: Colors.transparent,
borderRadius: BorderRadius.circular(15),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SvgPicture.asset(
'assets/icons/agents_tab_icon.svg',
width: 24,
height: 24,
placeholderBuilder: (_) => Icon(
Icons.people,
color: activeTab == 'agents'
? Colors.white
: AppColors.primaryDark,
size: 24,
),
),
),
const SizedBox(width: 8),
const Text(
'Agents',
style: TextStyle(
fontFamily: 'SourceSerif4',
fontSize: 17,
fontWeight: FontWeight.w600,
color: Colors.white,
const SizedBox(width: 8),
Text(
'Agents',
style: TextStyle(
fontFamily: 'SourceSerif4',
fontSize: 17,
fontWeight: FontWeight.w600,
color: activeTab == 'agents'
? Colors.white
: AppColors.primaryDark,
),
),
),
],
],
),
),
),
),
// Inactive tab - Lenders
// Lenders tab
Expanded(
child: Container(
padding: const EdgeInsets.symmetric(vertical: 12),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SvgPicture.asset(
'assets/icons/lenders_tab_icon.svg',
width: 24,
height: 24,
placeholderBuilder: (_) => const Icon(
Icons.calendar_today,
color: AppColors.primaryDark,
size: 24,
child: GestureDetector(
onTap: () => ref
.read(topProfessionalsProvider.notifier)
.setActiveTab('lenders'),
child: Container(
padding: const EdgeInsets.symmetric(vertical: 12),
decoration: BoxDecoration(
color: activeTab == 'lenders'
? AppColors.accentOrange
: Colors.transparent,
borderRadius: BorderRadius.circular(15),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SvgPicture.asset(
'assets/icons/lenders_tab_icon.svg',
width: 24,
height: 24,
placeholderBuilder: (_) => Icon(
Icons.calendar_today,
color: activeTab == 'lenders'
? Colors.white
: AppColors.primaryDark,
size: 24,
),
),
),
const SizedBox(width: 8),
const Text(
'Lenders',
style: TextStyle(
fontFamily: 'SourceSerif4',
fontSize: 17,
fontWeight: FontWeight.w600,
color: AppColors.primaryDark,
const SizedBox(width: 8),
Text(
'Lenders',
style: TextStyle(
fontFamily: 'SourceSerif4',
fontSize: 17,
fontWeight: FontWeight.w600,
color: activeTab == 'lenders'
? Colors.white
: AppColors.primaryDark,
),
),
),
],
],
),
),
),
),
@@ -121,7 +175,7 @@ class TopProfessionalsSection extends StatelessWidget {
);
}
Widget _buildAgentCard() {
Widget _buildAgentCard(AgentProfile agent) {
return Container(
decoration: BoxDecoration(
color: Colors.white,
@@ -133,184 +187,208 @@ class TopProfessionalsSection extends StatelessWidget {
children: [
// Agent image
ClipRRect(
borderRadius: const BorderRadius.vertical(top: Radius.circular(15)),
child: Image.asset(
'assets/images/agent_profile_image.png',
width: double.infinity,
height: 192,
fit: BoxFit.cover,
errorBuilder: (_, __, ___) => Container(
width: double.infinity,
height: 192,
color: AppColors.gradientStart,
child: const Icon(Icons.person, size: 60, color: AppColors.primaryDark),
),
),
borderRadius:
const BorderRadius.vertical(top: Radius.circular(15)),
child: agent.avatar != null && agent.avatar!.isNotEmpty
? Image.network(
agent.avatar!,
width: double.infinity,
height: 192,
fit: BoxFit.cover,
errorBuilder: (_, __, ___) => _buildAvatarPlaceholder(),
)
: _buildAvatarPlaceholder(),
),
Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Name and badges row
Row(
children: [
const Text(
'Arjun Mehta',
style: TextStyle(
fontFamily: 'Fractul',
fontSize: 14,
fontWeight: FontWeight.w700,
color: AppColors.primaryDark,
),
),
const SizedBox(width: 8),
SvgPicture.asset(
'assets/icons/verified_badge_icon.svg',
width: 16,
height: 16,
placeholderBuilder: (_) => const Icon(
Icons.verified,
color: Colors.blue,
size: 16,
),
),
const Spacer(),
SvgPicture.asset(
'assets/icons/star_rating_icon.svg',
width: 16,
height: 16,
placeholderBuilder: (_) => const Icon(
Icons.star,
color: AppColors.accentOrange,
size: 16,
),
),
const SizedBox(width: 4),
const Text(
'4.9 Rating',
style: TextStyle(
fontFamily: 'SourceSerif4',
fontSize: 14,
fontWeight: FontWeight.w400,
color: AppColors.primaryDark,
),
),
],
),
const SizedBox(height: 4),
// Verified and Location
const Text(
'"Verified local agent"',
style: TextStyle(
fontFamily: 'SourceSerif4',
fontSize: 14,
fontWeight: FontWeight.w500,
color: Color(0xFF638559),
),
),
const SizedBox(height: 8),
// Location
Row(
children: [
const Text(
'Location:',
style: TextStyle(
fontFamily: 'Fractul',
fontSize: 14,
fontWeight: FontWeight.w700,
color: AppColors.primaryDark,
),
),
const SizedBox(width: 4),
SvgPicture.asset(
'assets/icons/location_pin_icon.svg',
width: 14,
height: 14,
placeholderBuilder: (_) => const Icon(
Icons.location_on,
color: AppColors.accentOrange,
size: 14,
),
),
const SizedBox(width: 4),
const Text(
'San Francisco, CA',
style: TextStyle(
fontFamily: 'SourceSerif4',
fontSize: 10,
fontWeight: FontWeight.w400,
color: AppColors.primaryDark,
),
),
],
),
const SizedBox(height: 8),
// Expertise
Row(
children: [
const Text(
'Expertise:',
style: TextStyle(
fontFamily: 'Fractul',
fontSize: 14,
fontWeight: FontWeight.w700,
color: AppColors.primaryDark,
),
),
const SizedBox(width: 8),
const Text(
'(Residential Property Expert)',
style: TextStyle(
fontFamily: 'SourceSerif4',
fontSize: 10,
fontWeight: FontWeight.w400,
color: AppColors.primaryDark,
),
),
],
),
const SizedBox(height: 12),
// Tags
Wrap(
spacing: 8,
runSpacing: 8,
children: [
_buildTag('Residential'),
_buildTag('Rental'),
_buildTag('Commercial'),
_buildTag('Inspection'),
_buildTag('Land'),
_buildTag('Rental'),
],
),
const SizedBox(height: 12),
// Experience
RichText(
text: const TextSpan(
Expanded(
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Name and rating row
Row(
children: [
TextSpan(
text: 'Experience: ',
style: TextStyle(
fontFamily: 'Fractul',
fontSize: 14,
fontWeight: FontWeight.w700,
color: AppColors.primaryDark,
Expanded(
child: Row(
children: [
Flexible(
child: Text(
agent.fullName,
style: const TextStyle(
fontFamily: 'Fractul',
fontSize: 14,
fontWeight: FontWeight.w700,
color: AppColors.primaryDark,
),
overflow: TextOverflow.ellipsis,
),
),
if (agent.isVerified) ...[
const SizedBox(width: 8),
SvgPicture.asset(
'assets/icons/verified_badge_icon.svg',
width: 16,
height: 16,
placeholderBuilder: (_) => const Icon(
Icons.verified,
color: Colors.blue,
size: 16,
),
),
],
],
),
),
TextSpan(
text: '10+ years in the real estate industry.',
style: TextStyle(
fontFamily: 'SourceSerif4',
fontSize: 14,
fontWeight: FontWeight.w400,
color: AppColors.primaryDark,
if (agent.rating != null) ...[
SvgPicture.asset(
'assets/icons/star_rating_icon.svg',
width: 16,
height: 16,
placeholderBuilder: (_) => const Icon(
Icons.star,
color: AppColors.accentOrange,
size: 16,
),
),
),
const SizedBox(width: 4),
Text(
'${agent.rating!.toStringAsFixed(1)} Rating',
style: const TextStyle(
fontFamily: 'SourceSerif4',
fontSize: 14,
fontWeight: FontWeight.w400,
color: AppColors.primaryDark,
),
),
],
],
),
),
],
const SizedBox(height: 4),
// Verified text
if (agent.isVerified)
Text(
'"Verified local ${agent.agentType?.name.toLowerCase() ?? 'agent'}"',
style: const TextStyle(
fontFamily: 'SourceSerif4',
fontSize: 14,
fontWeight: FontWeight.w500,
color: Color(0xFF638559),
),
),
const SizedBox(height: 8),
// Location
if (agent.location.isNotEmpty)
Row(
children: [
const Text(
'Location:',
style: TextStyle(
fontFamily: 'Fractul',
fontSize: 14,
fontWeight: FontWeight.w700,
color: AppColors.primaryDark,
),
),
const SizedBox(width: 4),
SvgPicture.asset(
'assets/icons/location_pin_icon.svg',
width: 14,
height: 14,
placeholderBuilder: (_) => const Icon(
Icons.location_on,
color: AppColors.accentOrange,
size: 14,
),
),
const SizedBox(width: 4),
Expanded(
child: Text(
agent.location,
style: const TextStyle(
fontFamily: 'SourceSerif4',
fontSize: 10,
fontWeight: FontWeight.w400,
color: AppColors.primaryDark,
),
overflow: TextOverflow.ellipsis,
),
),
],
),
const SizedBox(height: 8),
// Expertise
if (agent.agentType != null)
Row(
children: [
const Text(
'Expertise:',
style: TextStyle(
fontFamily: 'Fractul',
fontSize: 14,
fontWeight: FontWeight.w700,
color: AppColors.primaryDark,
),
),
const SizedBox(width: 8),
Expanded(
child: Text(
'(${agent.agentType!.name})',
style: const TextStyle(
fontFamily: 'SourceSerif4',
fontSize: 10,
fontWeight: FontWeight.w400,
color: AppColors.primaryDark,
),
overflow: TextOverflow.ellipsis,
),
),
],
),
const SizedBox(height: 12),
// Tags from specializations
if (agent.specializations.isNotEmpty)
Wrap(
spacing: 8,
runSpacing: 8,
children: agent.specializations
.take(6)
.map((tag) => _buildTag(tag))
.toList(),
),
const Spacer(),
// Experience
if (agent.experienceText.isNotEmpty)
RichText(
text: TextSpan(
children: [
const TextSpan(
text: 'Experience: ',
style: TextStyle(
fontFamily: 'Fractul',
fontSize: 14,
fontWeight: FontWeight.w700,
color: AppColors.primaryDark,
),
),
TextSpan(
text: agent.experienceText,
style: const TextStyle(
fontFamily: 'SourceSerif4',
fontSize: 14,
fontWeight: FontWeight.w400,
color: AppColors.primaryDark,
),
),
],
),
),
],
),
),
),
],
@@ -318,6 +396,15 @@ class TopProfessionalsSection extends StatelessWidget {
);
}
Widget _buildAvatarPlaceholder() {
return Container(
width: double.infinity,
height: 192,
color: AppColors.gradientStart,
child: const Icon(Icons.person, size: 60, color: AppColors.primaryDark),
);
}
Widget _buildTag(String label) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
@@ -337,26 +424,97 @@ class TopProfessionalsSection extends StatelessWidget {
);
}
Widget _buildProgressIndicator() {
return Stack(
children: [
Container(
height: 5,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
border: Border.all(color: AppColors.primaryDark, width: 0.1),
Widget _buildProgressIndicator(int totalCards) {
return LayoutBuilder(
builder: (context, constraints) {
final indicatorWidth = totalCards > 0
? constraints.maxWidth / totalCards
: 103.0;
return Stack(
children: [
Container(
height: 5,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
border: Border.all(color: AppColors.primaryDark, width: 0.1),
),
),
Container(
height: 5,
width: indicatorWidth.clamp(40.0, 150.0),
decoration: BoxDecoration(
color: AppColors.primaryDark,
borderRadius: BorderRadius.circular(15),
),
),
],
);
},
);
}
Widget _buildErrorState(WidgetRef ref, String error) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 40),
child: Column(
children: [
const Icon(
Icons.error_outline,
color: AppColors.accentOrange,
size: 48,
),
),
Container(
height: 5,
width: 103,
decoration: BoxDecoration(
color: AppColors.primaryDark,
borderRadius: BorderRadius.circular(15),
const SizedBox(height: 12),
Text(
error,
style: const TextStyle(
fontFamily: 'Fractul',
fontSize: 14,
fontWeight: FontWeight.w400,
color: AppColors.primaryDark,
),
),
),
],
const SizedBox(height: 16),
TextButton(
onPressed: () =>
ref.read(topProfessionalsProvider.notifier).refresh(),
child: const Text(
'Retry',
style: TextStyle(
fontFamily: 'Fractul',
fontSize: 14,
fontWeight: FontWeight.w600,
color: AppColors.accentOrange,
),
),
),
],
),
);
}
Widget _buildEmptyState(String activeTab) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 40),
child: Column(
children: [
Icon(
activeTab == 'agents' ? Icons.people_outline : Icons.account_balance_outlined,
color: AppColors.hintText,
size: 48,
),
const SizedBox(height: 12),
Text(
'No ${activeTab == 'agents' ? 'agents' : 'lenders'} found',
style: const TextStyle(
fontFamily: 'Fractul',
fontSize: 14,
fontWeight: FontWeight.w400,
color: AppColors.hintText,
),
),
],
),
);
}