1422 lines
45 KiB
Dart
1422 lines
45 KiB
Dart
import 'package:flutter/material.dart';
|
||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||
import 'package:go_router/go_router.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/agent_detail_provider.dart';
|
||
import 'package:real_estate_mobile/features/auth/presentation/providers/auth_provider.dart';
|
||
|
||
class AgentDetailScreen extends ConsumerStatefulWidget {
|
||
final String agentId;
|
||
|
||
const AgentDetailScreen({super.key, required this.agentId});
|
||
|
||
@override
|
||
ConsumerState<AgentDetailScreen> createState() => _AgentDetailScreenState();
|
||
}
|
||
|
||
class _AgentDetailScreenState extends ConsumerState<AgentDetailScreen> {
|
||
bool _emailVisible = false;
|
||
bool _phoneVisible = false;
|
||
|
||
@override
|
||
void initState() {
|
||
super.initState();
|
||
_loadConnectionIfAuth();
|
||
}
|
||
|
||
void _loadConnectionIfAuth() {
|
||
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||
final authState = ref.read(authProvider);
|
||
if (authState.status == AuthStatus.authenticated) {
|
||
ref.read(agentDetailProvider(widget.agentId).notifier).loadConnectionStatus();
|
||
}
|
||
});
|
||
}
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
final state = ref.watch(agentDetailProvider(widget.agentId));
|
||
|
||
if (state.isLoading) {
|
||
return const Center(
|
||
child: CircularProgressIndicator(color: AppColors.accentOrange));
|
||
}
|
||
if (state.error != null) {
|
||
return _buildError(state.error!);
|
||
}
|
||
return _buildContent(state);
|
||
}
|
||
|
||
Widget _buildError(String error) {
|
||
return Center(
|
||
child: Padding(
|
||
padding: const EdgeInsets.all(24),
|
||
child: Column(
|
||
mainAxisSize: MainAxisSize.min,
|
||
children: [
|
||
const Icon(Icons.error_outline,
|
||
size: 48, color: AppColors.accentOrange),
|
||
const SizedBox(height: 16),
|
||
const Text('Unable to Load Profile',
|
||
style: TextStyle(
|
||
fontFamily: 'Fractul',
|
||
fontSize: 18,
|
||
fontWeight: FontWeight.w700,
|
||
color: AppColors.primaryDark)),
|
||
const SizedBox(height: 12),
|
||
TextButton(
|
||
onPressed: () => context.pop(),
|
||
child: const Text('Go Back',
|
||
style: TextStyle(color: AppColors.accentOrange)),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
);
|
||
}
|
||
|
||
Widget _buildContent(AgentDetailState state) {
|
||
final agent = state.agent!;
|
||
return SingleChildScrollView(
|
||
child: Column(
|
||
children: [
|
||
// ── Avatar Section ──
|
||
const SizedBox(height: 16),
|
||
_buildAvatarSection(agent),
|
||
|
||
// ── Status + Connect Buttons ──
|
||
const SizedBox(height: 16),
|
||
_buildStatusButtons(state),
|
||
|
||
// ── Contact Info ──
|
||
const SizedBox(height: 12),
|
||
_buildContactInfo(state),
|
||
|
||
// ── Profile Info ──
|
||
const SizedBox(height: 16),
|
||
_buildProfileInfo(agent, state),
|
||
|
||
// ── Experience Section ──
|
||
if (_hasExperience(state)) ...[
|
||
const SizedBox(height: 24),
|
||
_buildExperienceSection(state),
|
||
],
|
||
|
||
// ── Info Cards (Availability, Work Env, Best Experience) ──
|
||
const SizedBox(height: 24),
|
||
_buildInfoCards(state),
|
||
|
||
// ── Specialization Section ──
|
||
if (state.specializationCards.isNotEmpty) ...[
|
||
const SizedBox(height: 24),
|
||
_buildSpecializationSection(state),
|
||
],
|
||
|
||
// ── Testimonials Section ──
|
||
if (state.testimonials.isNotEmpty) ...[
|
||
const SizedBox(height: 24),
|
||
_buildTestimonialsSection(state),
|
||
],
|
||
|
||
const SizedBox(height: 30),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
|
||
// ── Avatar ──
|
||
Widget _buildAvatarSection(AgentProfile agent) {
|
||
final screenWidth = MediaQuery.of(context).size.width;
|
||
final avatarWidth = screenWidth * 0.877; // 377/430 from Figma
|
||
return Center(
|
||
child: ClipRRect(
|
||
borderRadius: BorderRadius.circular(20),
|
||
child: SizedBox(
|
||
width: avatarWidth,
|
||
height: 346,
|
||
child: Stack(
|
||
fit: StackFit.expand,
|
||
children: [
|
||
S3Image(
|
||
imageUrl: agent.avatarUrl,
|
||
width: avatarWidth,
|
||
height: 346,
|
||
fit: BoxFit.cover,
|
||
errorWidget: (_) => Container(
|
||
color: const Color(0xFFC4D9D4),
|
||
child: const Icon(Icons.person,
|
||
size: 80, color: AppColors.primaryDark),
|
||
),
|
||
),
|
||
// Gradient overlay
|
||
Positioned(
|
||
bottom: 0,
|
||
left: 0,
|
||
right: 0,
|
||
height: 100,
|
||
child: Container(
|
||
decoration: BoxDecoration(
|
||
gradient: LinearGradient(
|
||
begin: Alignment.bottomCenter,
|
||
end: Alignment.topCenter,
|
||
colors: [
|
||
Colors.black.withValues(alpha: 0.5),
|
||
Colors.transparent,
|
||
],
|
||
),
|
||
),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
),
|
||
);
|
||
}
|
||
|
||
// ── Status + Connect ──
|
||
Widget _buildStatusButtons(AgentDetailState state) {
|
||
final agent = state.agent!;
|
||
final isAvailable = agent.isAvailable;
|
||
final connState = state.connectionState;
|
||
|
||
return Padding(
|
||
padding: const EdgeInsets.symmetric(horizontal: 38),
|
||
child: Column(
|
||
children: [
|
||
// Available row
|
||
_buildStatusRow(
|
||
isAvailable: true,
|
||
label: 'Available.',
|
||
active: isAvailable,
|
||
connState: connState,
|
||
onConnect: isAvailable
|
||
? () => _handleConnect(state)
|
||
: null,
|
||
),
|
||
const SizedBox(height: 10),
|
||
// Unavailable row
|
||
_buildStatusRow(
|
||
isAvailable: false,
|
||
label: 'Unavailable.',
|
||
active: !isAvailable,
|
||
connState: connState,
|
||
onConnect: !isAvailable
|
||
? () => _handleConnect(state)
|
||
: null,
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
|
||
Widget _buildStatusRow({
|
||
required bool isAvailable,
|
||
required String label,
|
||
required bool active,
|
||
required String connState,
|
||
VoidCallback? onConnect,
|
||
}) {
|
||
return Container(
|
||
height: 55,
|
||
decoration: BoxDecoration(
|
||
borderRadius: BorderRadius.circular(15),
|
||
border: Border.all(
|
||
color: AppColors.primaryDark.withValues(alpha: 0.15), width: 1),
|
||
),
|
||
child: Row(
|
||
children: [
|
||
const SizedBox(width: 20),
|
||
// Status dot
|
||
Container(
|
||
width: 14,
|
||
height: 12,
|
||
decoration: BoxDecoration(
|
||
shape: BoxShape.circle,
|
||
color: active
|
||
? (isAvailable ? const Color(0xFF4CAF50) : Colors.transparent)
|
||
: Colors.transparent,
|
||
border: Border.all(
|
||
color: active
|
||
? (isAvailable
|
||
? const Color(0xFF4CAF50)
|
||
: AppColors.primaryDark.withValues(alpha: 0.3))
|
||
: AppColors.primaryDark.withValues(alpha: 0.15),
|
||
width: 2,
|
||
),
|
||
),
|
||
),
|
||
const SizedBox(width: 12),
|
||
Text(
|
||
label,
|
||
style: TextStyle(
|
||
fontFamily: 'Fractul',
|
||
fontSize: 12,
|
||
fontWeight: FontWeight.w700,
|
||
color: active
|
||
? AppColors.primaryDark
|
||
: AppColors.primaryDark.withValues(alpha: 0.4),
|
||
),
|
||
),
|
||
const Spacer(),
|
||
// Connect button
|
||
if (active) _buildConnectButton(connState, isAvailable, onConnect),
|
||
const SizedBox(width: 4),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
|
||
Widget _buildConnectButton(
|
||
String connState, bool isAvailable, VoidCallback? onConnect) {
|
||
Color bgColor;
|
||
Color textColor;
|
||
String label;
|
||
bool enabled;
|
||
|
||
switch (connState) {
|
||
case 'pending':
|
||
bgColor = const Color(0xFFFFF3CD);
|
||
textColor = const Color(0xFF856404);
|
||
label = 'Pending';
|
||
enabled = false;
|
||
break;
|
||
case 'accepted':
|
||
bgColor = AppColors.primaryDark;
|
||
textColor = const Color(0xFFF0F5FC);
|
||
label = 'Unlink';
|
||
enabled = true;
|
||
break;
|
||
default:
|
||
bgColor = isAvailable ? AppColors.accentOrange : AppColors.primaryDark;
|
||
textColor = isAvailable ? AppColors.primaryDark : const Color(0xFFF0F5FC);
|
||
label = 'Connect';
|
||
enabled = true;
|
||
}
|
||
|
||
return GestureDetector(
|
||
onTap: enabled ? onConnect : null,
|
||
child: Container(
|
||
height: 55,
|
||
width: 164,
|
||
decoration: BoxDecoration(
|
||
color: bgColor,
|
||
borderRadius: BorderRadius.circular(15),
|
||
border: isAvailable && connState == 'none'
|
||
? Border.all(color: AppColors.accentOrange)
|
||
: null,
|
||
),
|
||
alignment: Alignment.center,
|
||
child: Text(
|
||
label,
|
||
style: TextStyle(
|
||
fontFamily: 'Fractul',
|
||
fontSize: 14,
|
||
fontWeight: FontWeight.w400,
|
||
color: textColor,
|
||
),
|
||
),
|
||
),
|
||
);
|
||
}
|
||
|
||
void _handleConnect(AgentDetailState state) {
|
||
final authState = ref.read(authProvider);
|
||
if (authState.status != AuthStatus.authenticated) {
|
||
context.push('/login');
|
||
return;
|
||
}
|
||
if (state.connectionState == 'accepted') {
|
||
ref.read(agentDetailProvider(widget.agentId).notifier).cancelConnection();
|
||
return;
|
||
}
|
||
_showConnectModal(state);
|
||
}
|
||
|
||
void _showConnectModal(AgentDetailState state) {
|
||
final controller = TextEditingController();
|
||
showModalBottomSheet(
|
||
context: context,
|
||
isScrollControlled: true,
|
||
backgroundColor: Colors.transparent,
|
||
builder: (ctx) => Padding(
|
||
padding: EdgeInsets.only(
|
||
bottom: MediaQuery.of(ctx).viewInsets.bottom),
|
||
child: Container(
|
||
decoration: const BoxDecoration(
|
||
color: Colors.white,
|
||
borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
|
||
),
|
||
padding: const EdgeInsets.all(24),
|
||
child: Column(
|
||
mainAxisSize: MainAxisSize.min,
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
Row(
|
||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||
children: [
|
||
Text(
|
||
'Connect with ${state.agent?.fullName ?? ''}',
|
||
style: const TextStyle(
|
||
fontFamily: 'Fractul',
|
||
fontSize: 18,
|
||
fontWeight: FontWeight.w700,
|
||
color: AppColors.primaryDark,
|
||
),
|
||
),
|
||
GestureDetector(
|
||
onTap: () => Navigator.pop(ctx),
|
||
child: const Icon(Icons.close, color: AppColors.primaryDark),
|
||
),
|
||
],
|
||
),
|
||
const SizedBox(height: 8),
|
||
const Text(
|
||
'Send a connection request to this agent.',
|
||
style: TextStyle(
|
||
fontFamily: 'SourceSerif4',
|
||
fontSize: 14,
|
||
color: AppColors.primaryDark,
|
||
),
|
||
),
|
||
const SizedBox(height: 16),
|
||
TextField(
|
||
controller: controller,
|
||
maxLines: 4,
|
||
maxLength: 1000,
|
||
decoration: InputDecoration(
|
||
hintText: 'Introduce yourself... (optional)',
|
||
hintStyle: TextStyle(
|
||
fontFamily: 'SourceSerif4',
|
||
fontSize: 14,
|
||
color: AppColors.primaryDark.withValues(alpha: 0.4),
|
||
),
|
||
border: OutlineInputBorder(
|
||
borderRadius: BorderRadius.circular(10),
|
||
borderSide: BorderSide(
|
||
color: AppColors.primaryDark.withValues(alpha: 0.15)),
|
||
),
|
||
),
|
||
),
|
||
const SizedBox(height: 16),
|
||
SizedBox(
|
||
width: double.infinity,
|
||
height: 50,
|
||
child: ElevatedButton(
|
||
onPressed: () async {
|
||
Navigator.pop(ctx);
|
||
await ref
|
||
.read(agentDetailProvider(widget.agentId).notifier)
|
||
.connect(message: controller.text);
|
||
},
|
||
style: ElevatedButton.styleFrom(
|
||
backgroundColor: AppColors.accentOrange,
|
||
shape: RoundedRectangleBorder(
|
||
borderRadius: BorderRadius.circular(15)),
|
||
),
|
||
child: const Text(
|
||
'Send Request',
|
||
style: TextStyle(
|
||
fontFamily: 'Fractul',
|
||
fontSize: 16,
|
||
fontWeight: FontWeight.w700,
|
||
color: Colors.white,
|
||
),
|
||
),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
),
|
||
);
|
||
}
|
||
|
||
// ── Contact Info ──
|
||
Widget _buildContactInfo(AgentDetailState state) {
|
||
final email = state.contactEmail;
|
||
final phone = state.contactPhone;
|
||
if (email == null && phone == null) return const SizedBox.shrink();
|
||
|
||
return Padding(
|
||
padding: const EdgeInsets.symmetric(horizontal: 38),
|
||
child: Container(
|
||
height: 98,
|
||
padding: const EdgeInsets.symmetric(horizontal: 18, vertical: 16),
|
||
decoration: BoxDecoration(
|
||
borderRadius: BorderRadius.circular(15),
|
||
border: Border.all(
|
||
color: AppColors.primaryDark.withValues(alpha: 0.15), width: 1),
|
||
),
|
||
child: Column(
|
||
mainAxisAlignment: MainAxisAlignment.center,
|
||
children: [
|
||
if (email != null)
|
||
_buildContactRow(
|
||
label: 'Email:',
|
||
value: _emailVisible ? email : state.maskEmail(email),
|
||
onToggle: () => setState(() => _emailVisible = !_emailVisible),
|
||
visible: _emailVisible,
|
||
),
|
||
if (email != null && phone != null) const SizedBox(height: 12),
|
||
if (phone != null)
|
||
_buildContactRow(
|
||
label: 'Ph.No:',
|
||
value: _phoneVisible ? phone : state.maskPhone(phone),
|
||
onToggle: () => setState(() => _phoneVisible = !_phoneVisible),
|
||
visible: _phoneVisible,
|
||
),
|
||
],
|
||
),
|
||
),
|
||
);
|
||
}
|
||
|
||
Widget _buildContactRow({
|
||
required String label,
|
||
required String value,
|
||
required VoidCallback onToggle,
|
||
required bool visible,
|
||
}) {
|
||
return Row(
|
||
children: [
|
||
Text(
|
||
label,
|
||
style: const TextStyle(
|
||
fontFamily: 'Fractul',
|
||
fontSize: 14,
|
||
fontWeight: FontWeight.w700,
|
||
color: AppColors.primaryDark,
|
||
),
|
||
),
|
||
const SizedBox(width: 8),
|
||
Expanded(
|
||
child: Text(
|
||
value,
|
||
style: const TextStyle(
|
||
fontFamily: 'SourceSerif4',
|
||
fontSize: 14,
|
||
color: AppColors.primaryDark,
|
||
),
|
||
),
|
||
),
|
||
const SizedBox(width: 8),
|
||
GestureDetector(
|
||
onTap: onToggle,
|
||
child: Icon(
|
||
visible ? Icons.visibility : Icons.visibility_off,
|
||
size: 18,
|
||
color: AppColors.primaryDark.withValues(alpha: 0.6),
|
||
),
|
||
),
|
||
],
|
||
);
|
||
}
|
||
|
||
// ── Profile Info (Name, Title, Location, Bio) ──
|
||
Widget _buildProfileInfo(AgentProfile agent, AgentDetailState state) {
|
||
return Padding(
|
||
padding: const EdgeInsets.symmetric(horizontal: 38),
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.center,
|
||
children: [
|
||
// Name + Verified badge + (Verified Expert) on same line
|
||
Row(
|
||
mainAxisAlignment: MainAxisAlignment.center,
|
||
crossAxisAlignment: CrossAxisAlignment.baseline,
|
||
textBaseline: TextBaseline.alphabetic,
|
||
children: [
|
||
Text(
|
||
agent.firstName,
|
||
style: const TextStyle(
|
||
fontFamily: 'Fractul',
|
||
fontSize: 18,
|
||
fontWeight: FontWeight.w700,
|
||
color: AppColors.primaryDark,
|
||
),
|
||
),
|
||
const SizedBox(width: 4),
|
||
if (agent.isVerified) ...[
|
||
const Padding(
|
||
padding: EdgeInsets.only(bottom: 1),
|
||
child: Icon(Icons.verified, size: 16, color: Color(0xFF2196F3)),
|
||
),
|
||
const SizedBox(width: 4),
|
||
],
|
||
Text(
|
||
agent.lastName,
|
||
style: const TextStyle(
|
||
fontFamily: 'Fractul',
|
||
fontSize: 18,
|
||
fontWeight: FontWeight.w400,
|
||
color: AppColors.primaryDark,
|
||
),
|
||
),
|
||
if (agent.isVerified) ...[
|
||
const SizedBox(width: 6),
|
||
const Text(
|
||
'(Verified Expert)',
|
||
style: TextStyle(
|
||
fontFamily: 'SourceSerif4',
|
||
fontSize: 14,
|
||
fontWeight: FontWeight.w500,
|
||
color: Color(0xFF638559),
|
||
),
|
||
),
|
||
],
|
||
],
|
||
),
|
||
// Title
|
||
if (agent.agentType != null) ...[
|
||
const SizedBox(height: 6),
|
||
Text(
|
||
agent.headline ?? agent.agentType!.name,
|
||
style: const TextStyle(
|
||
fontFamily: 'Fractul',
|
||
fontSize: 14,
|
||
color: AppColors.primaryDark,
|
||
),
|
||
textAlign: TextAlign.center,
|
||
),
|
||
],
|
||
const SizedBox(height: 8),
|
||
// Location + Member Since
|
||
Row(
|
||
mainAxisAlignment: MainAxisAlignment.center,
|
||
children: [
|
||
if (agent.location.isNotEmpty) ...[
|
||
Icon(Icons.location_on,
|
||
size: 16, color: AppColors.primaryDark.withValues(alpha: 0.7)),
|
||
const SizedBox(width: 4),
|
||
Text(
|
||
agent.location,
|
||
style: const TextStyle(
|
||
fontFamily: 'SourceSerif4',
|
||
fontSize: 14,
|
||
fontWeight: FontWeight.w700,
|
||
color: AppColors.primaryDark,
|
||
),
|
||
),
|
||
const SizedBox(width: 20),
|
||
],
|
||
Icon(Icons.calendar_today,
|
||
size: 14, color: AppColors.primaryDark.withValues(alpha: 0.7)),
|
||
const SizedBox(width: 4),
|
||
Text(
|
||
agent.memberSinceText,
|
||
style: const TextStyle(
|
||
fontFamily: 'SourceSerif4',
|
||
fontSize: 13,
|
||
fontWeight: FontWeight.w500,
|
||
color: AppColors.primaryDark,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
// Bio
|
||
if (agent.description.isNotEmpty) ...[
|
||
const SizedBox(height: 16),
|
||
SizedBox(
|
||
width: 338,
|
||
child: Text(
|
||
agent.description,
|
||
style: const TextStyle(
|
||
fontFamily: 'SourceSerif4',
|
||
fontSize: 14,
|
||
color: AppColors.primaryDark,
|
||
height: 1.43,
|
||
),
|
||
textAlign: TextAlign.center,
|
||
),
|
||
),
|
||
],
|
||
],
|
||
),
|
||
);
|
||
}
|
||
|
||
// ── Experience ──
|
||
bool _hasExperience(AgentDetailState s) =>
|
||
s.yearsInExperience != '-' ||
|
||
s.contractsClosed != '-' ||
|
||
s.licensingAreas.isNotEmpty ||
|
||
s.expertiseYears.isNotEmpty ||
|
||
s.certifications.isNotEmpty;
|
||
|
||
Widget _buildExperienceSection(AgentDetailState state) {
|
||
return Padding(
|
||
padding: const EdgeInsets.symmetric(horizontal: 17),
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
const Center(
|
||
child: Text(
|
||
'Experience',
|
||
style: TextStyle(
|
||
fontFamily: 'Fractul',
|
||
fontSize: 20,
|
||
fontWeight: FontWeight.w700,
|
||
color: AppColors.primaryDark,
|
||
),
|
||
),
|
||
),
|
||
const SizedBox(height: 22),
|
||
// Years
|
||
if (state.yearsInExperience != '-')
|
||
_buildExperienceItem(
|
||
'Years in Experience', [state.yearsInExperience]),
|
||
// Contracts
|
||
if (state.contractsClosed != '-')
|
||
_buildExperienceItem(
|
||
'Number of contracts closed', [state.contractsClosed]),
|
||
// Licensing Areas
|
||
if (state.licensingAreas.isNotEmpty)
|
||
_buildLicensingAreas(state.licensingAreas),
|
||
// Expertise Years
|
||
if (state.expertiseYears.isNotEmpty)
|
||
_buildExpertiseYears(state.expertiseYears),
|
||
// Certifications
|
||
if (state.certifications.isNotEmpty)
|
||
_buildCertifications(state.certifications),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
|
||
Widget _buildExperienceItem(String title, List<String> items) {
|
||
return Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
Text(
|
||
title,
|
||
style: const TextStyle(
|
||
fontFamily: 'Fractul',
|
||
fontSize: 14,
|
||
fontWeight: FontWeight.w700,
|
||
color: AppColors.primaryDark,
|
||
),
|
||
),
|
||
const SizedBox(height: 14),
|
||
...items.map((item) => Padding(
|
||
padding: const EdgeInsets.only(left: 10, bottom: 4),
|
||
child: Row(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
const Padding(
|
||
padding: EdgeInsets.only(top: 2),
|
||
child: Text('\u2022 ',
|
||
style: TextStyle(fontSize: 15, color: AppColors.primaryDark)),
|
||
),
|
||
Expanded(
|
||
child: Text(
|
||
item,
|
||
style: const TextStyle(
|
||
fontFamily: 'SourceSerif4',
|
||
fontSize: 15,
|
||
fontWeight: FontWeight.w500,
|
||
color: AppColors.primaryDark,
|
||
),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
)),
|
||
const SizedBox(height: 16),
|
||
Divider(color: AppColors.primaryDark.withValues(alpha: 0.15), height: 1),
|
||
const SizedBox(height: 10),
|
||
],
|
||
);
|
||
}
|
||
|
||
Widget _buildLicensingAreas(List<String> areas) {
|
||
return _ExpandableChipsSection(
|
||
title: 'Licensing & Areas',
|
||
items: areas,
|
||
initialCount: 6,
|
||
);
|
||
}
|
||
|
||
Widget _buildExpertiseYears(List<Map<String, String>> items) {
|
||
final chips = items.map((e) {
|
||
final years = e['years'] ?? '';
|
||
return years.isNotEmpty ? '${e['area']} – $years' : e['area'] ?? '';
|
||
}).toList();
|
||
return _ExpandableChipsSection(
|
||
title: 'Areas in expertise & Years',
|
||
items: chips,
|
||
initialCount: 4,
|
||
);
|
||
}
|
||
|
||
Widget _buildCertifications(List<Map<String, String>> certs) {
|
||
return Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
const Text(
|
||
'Certifications',
|
||
style: TextStyle(
|
||
fontFamily: 'Fractul',
|
||
fontSize: 14,
|
||
fontWeight: FontWeight.w700,
|
||
color: AppColors.primaryDark,
|
||
),
|
||
),
|
||
const SizedBox(height: 16),
|
||
...certs.map((cert) => Padding(
|
||
padding: const EdgeInsets.only(left: 14, bottom: 16),
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
Row(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
const Padding(
|
||
padding: EdgeInsets.only(top: 2),
|
||
child: Text('\u2022 ',
|
||
style: TextStyle(
|
||
fontSize: 14, color: AppColors.primaryDark)),
|
||
),
|
||
Expanded(
|
||
child: Text(
|
||
cert['name'] ?? '',
|
||
style: const TextStyle(
|
||
fontFamily: 'SourceSerif4',
|
||
fontSize: 14,
|
||
color: AppColors.primaryDark,
|
||
),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
if ((cert['org'] ?? '').isNotEmpty)
|
||
Padding(
|
||
padding: const EdgeInsets.only(left: 20, top: 2),
|
||
child: Text(
|
||
cert['org']!.toUpperCase(),
|
||
style: TextStyle(
|
||
fontFamily: 'SourceSerif4',
|
||
fontSize: 14,
|
||
color: AppColors.primaryDark.withValues(alpha: 0.5),
|
||
),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
)),
|
||
const SizedBox(height: 4),
|
||
],
|
||
);
|
||
}
|
||
|
||
// ── Info Cards (Availability, Work Env, Best Experience) ──
|
||
Widget _buildInfoCards(AgentDetailState state) {
|
||
// Work environment and best experience from fieldValues
|
||
String workEnv = '';
|
||
String bestExp = '';
|
||
for (final fv in state.fieldValues) {
|
||
final slug = fv.fieldSlug.toLowerCase();
|
||
if (slug.contains('work_environment') || slug.contains('preferred_environment')) {
|
||
if (fv.textValue != null) workEnv = fv.textValue!;
|
||
if (fv.jsonValue is List) {
|
||
workEnv = (fv.jsonValue as List).map((e) => e.toString()).join(', ');
|
||
}
|
||
}
|
||
if (slug.contains('best_experience') || slug.contains('amazing_experience')) {
|
||
if (fv.textValue != null) bestExp = fv.textValue!;
|
||
}
|
||
}
|
||
|
||
return Padding(
|
||
padding: const EdgeInsets.symmetric(horizontal: 36),
|
||
child: Column(
|
||
children: [
|
||
// Availability card
|
||
if (state.availabilityType.isNotEmpty)
|
||
_buildInfoCard(
|
||
icon: Icons.access_time_filled,
|
||
title: 'Availability',
|
||
subtitle: state.availabilityType,
|
||
items: state.availabilitySchedule,
|
||
),
|
||
if (workEnv.isNotEmpty) ...[
|
||
const SizedBox(height: 16),
|
||
_buildInfoCard(
|
||
icon: Icons.landscape_outlined,
|
||
title: '',
|
||
subtitle: '',
|
||
description: workEnv,
|
||
),
|
||
],
|
||
if (bestExp.isNotEmpty) ...[
|
||
const SizedBox(height: 16),
|
||
_buildInfoCard(
|
||
icon: Icons.star_rounded,
|
||
title: '',
|
||
subtitle: '',
|
||
description: bestExp,
|
||
),
|
||
],
|
||
],
|
||
),
|
||
);
|
||
}
|
||
|
||
Widget _buildInfoCard({
|
||
required IconData icon,
|
||
required String title,
|
||
required String subtitle,
|
||
List<String>? items,
|
||
String? description,
|
||
}) {
|
||
return Container(
|
||
width: double.infinity,
|
||
constraints: const BoxConstraints(minHeight: 217),
|
||
padding: const EdgeInsets.all(20),
|
||
decoration: BoxDecoration(
|
||
color: Colors.white,
|
||
borderRadius: BorderRadius.circular(10),
|
||
boxShadow: [
|
||
BoxShadow(
|
||
color: const Color(0xFFD9D9D9).withValues(alpha: 0.5),
|
||
offset: const Offset(0, 10),
|
||
blurRadius: 20,
|
||
),
|
||
],
|
||
),
|
||
child: Column(
|
||
mainAxisAlignment: MainAxisAlignment.start,
|
||
children: [
|
||
Icon(icon, size: 36, color: AppColors.accentOrange),
|
||
if (title.isNotEmpty) ...[
|
||
const SizedBox(height: 8),
|
||
Text(
|
||
title,
|
||
style: const TextStyle(
|
||
fontFamily: 'SourceSerif4',
|
||
fontSize: 14,
|
||
fontWeight: FontWeight.w600,
|
||
color: AppColors.primaryDark,
|
||
),
|
||
),
|
||
],
|
||
if (subtitle.isNotEmpty) ...[
|
||
const SizedBox(height: 2),
|
||
Text(
|
||
subtitle,
|
||
style: const TextStyle(
|
||
fontFamily: 'SourceSerif4',
|
||
fontSize: 14,
|
||
fontWeight: FontWeight.w600,
|
||
color: AppColors.primaryDark,
|
||
),
|
||
),
|
||
],
|
||
if (items != null && items.isNotEmpty) ...[
|
||
const SizedBox(height: 8),
|
||
...items.map((item) => Padding(
|
||
padding: const EdgeInsets.symmetric(vertical: 1),
|
||
child: Text(
|
||
item,
|
||
style: const TextStyle(
|
||
fontFamily: 'SourceSerif4',
|
||
fontSize: 14,
|
||
color: AppColors.primaryDark,
|
||
),
|
||
),
|
||
)),
|
||
],
|
||
if (description != null) ...[
|
||
const SizedBox(height: 8),
|
||
Text(
|
||
description,
|
||
style: const TextStyle(
|
||
fontFamily: 'SourceSerif4',
|
||
fontSize: 14,
|
||
fontWeight: FontWeight.w600,
|
||
color: AppColors.primaryDark,
|
||
),
|
||
textAlign: TextAlign.center,
|
||
),
|
||
],
|
||
],
|
||
),
|
||
);
|
||
}
|
||
|
||
// ── Specialization Section ──
|
||
Widget _buildSpecializationSection(AgentDetailState state) {
|
||
return Container(
|
||
width: double.infinity,
|
||
color: const Color(0xFFE6E6E6),
|
||
padding: const EdgeInsets.symmetric(vertical: 24),
|
||
child: Column(
|
||
children: [
|
||
const Text(
|
||
'Specialization',
|
||
style: TextStyle(
|
||
fontFamily: 'Fractul',
|
||
fontSize: 20,
|
||
fontWeight: FontWeight.w700,
|
||
color: AppColors.primaryDark,
|
||
),
|
||
),
|
||
const SizedBox(height: 4),
|
||
const Text(
|
||
'Area Of Expertise and Focus',
|
||
style: TextStyle(
|
||
fontFamily: 'Fractul',
|
||
fontSize: 14,
|
||
fontWeight: FontWeight.w500,
|
||
color: AppColors.primaryDark,
|
||
),
|
||
),
|
||
const SizedBox(height: 16),
|
||
...state.specializationCards
|
||
.map((card) => Padding(
|
||
padding: const EdgeInsets.only(bottom: 12),
|
||
child: _SpecializationCardWidget(card: card),
|
||
)),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
|
||
// ── Testimonials ──
|
||
Widget _buildTestimonialsSection(AgentDetailState state) {
|
||
return Padding(
|
||
padding: const EdgeInsets.symmetric(horizontal: 24),
|
||
child: Column(
|
||
children: [
|
||
const Text(
|
||
'Testimonials',
|
||
style: TextStyle(
|
||
fontFamily: 'Fractul',
|
||
fontSize: 20,
|
||
fontWeight: FontWeight.w700,
|
||
color: AppColors.primaryDark,
|
||
),
|
||
),
|
||
const SizedBox(height: 8),
|
||
Divider(
|
||
color: AppColors.primaryDark.withValues(alpha: 0.15), height: 1),
|
||
const SizedBox(height: 8),
|
||
const Text(
|
||
'Clients rate our real estate services 4.9 out of 5 on average, based on recent client reviews.',
|
||
style: TextStyle(
|
||
fontFamily: 'SourceSerif4',
|
||
fontSize: 14,
|
||
color: AppColors.primaryDark,
|
||
),
|
||
textAlign: TextAlign.center,
|
||
),
|
||
const SizedBox(height: 16),
|
||
SizedBox(
|
||
height: 320,
|
||
child: ListView.separated(
|
||
scrollDirection: Axis.horizontal,
|
||
itemCount: state.testimonials.length,
|
||
separatorBuilder: (_, __) => const SizedBox(width: 12),
|
||
itemBuilder: (_, i) =>
|
||
_TestimonialCard(data: state.testimonials[i]),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
|
||
}
|
||
|
||
// ── Expandable Chips Section ──
|
||
|
||
class _ExpandableChipsSection extends StatefulWidget {
|
||
final String title;
|
||
final List<String> items;
|
||
final int initialCount;
|
||
|
||
const _ExpandableChipsSection({
|
||
required this.title,
|
||
required this.items,
|
||
this.initialCount = 6,
|
||
});
|
||
|
||
@override
|
||
State<_ExpandableChipsSection> createState() =>
|
||
_ExpandableChipsSectionState();
|
||
}
|
||
|
||
class _ExpandableChipsSectionState extends State<_ExpandableChipsSection> {
|
||
bool _expanded = false;
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
final showItems = _expanded
|
||
? widget.items
|
||
: widget.items.take(widget.initialCount).toList();
|
||
final hasMore = widget.items.length > widget.initialCount;
|
||
|
||
return Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
Text(
|
||
widget.title,
|
||
style: const TextStyle(
|
||
fontFamily: 'Fractul',
|
||
fontSize: 14,
|
||
fontWeight: FontWeight.w700,
|
||
color: AppColors.primaryDark,
|
||
),
|
||
),
|
||
const SizedBox(height: 14),
|
||
Wrap(
|
||
spacing: 10,
|
||
runSpacing: 10,
|
||
children: [
|
||
...showItems.map((item) => IntrinsicWidth(
|
||
child: Container(
|
||
height: 28,
|
||
padding: const EdgeInsets.symmetric(horizontal: 10),
|
||
alignment: Alignment.center,
|
||
decoration: BoxDecoration(
|
||
borderRadius: BorderRadius.circular(15),
|
||
border: Border.all(
|
||
color: AppColors.primaryDark,
|
||
width: 0.7),
|
||
),
|
||
child: Text(
|
||
item,
|
||
style: const TextStyle(
|
||
fontFamily: 'SourceSerif4',
|
||
fontSize: 14,
|
||
fontWeight: FontWeight.w500,
|
||
color: AppColors.primaryDark,
|
||
),
|
||
),
|
||
),
|
||
)),
|
||
if (hasMore && !_expanded)
|
||
GestureDetector(
|
||
onTap: () => setState(() => _expanded = true),
|
||
child: IntrinsicWidth(
|
||
child: Container(
|
||
height: 28,
|
||
padding: const EdgeInsets.symmetric(horizontal: 10),
|
||
alignment: Alignment.center,
|
||
decoration: BoxDecoration(
|
||
borderRadius: BorderRadius.circular(15),
|
||
border: Border.all(
|
||
color: AppColors.primaryDark.withValues(alpha: 0.15),
|
||
width: 1),
|
||
),
|
||
child: Text(
|
||
'+${widget.items.length - widget.initialCount} More',
|
||
style: const TextStyle(
|
||
fontFamily: 'SourceSerif4',
|
||
fontSize: 15,
|
||
fontWeight: FontWeight.w300,
|
||
color: AppColors.primaryDark,
|
||
),
|
||
),
|
||
),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
const SizedBox(height: 14),
|
||
Divider(color: AppColors.primaryDark.withValues(alpha: 0.15), height: 1),
|
||
const SizedBox(height: 10),
|
||
],
|
||
);
|
||
}
|
||
}
|
||
|
||
// ── Specialization Card ──
|
||
|
||
class _SpecializationCardWidget extends StatefulWidget {
|
||
final SpecializationCard card;
|
||
|
||
const _SpecializationCardWidget({required this.card});
|
||
|
||
@override
|
||
State<_SpecializationCardWidget> createState() =>
|
||
_SpecializationCardWidgetState();
|
||
}
|
||
|
||
class _SpecializationCardWidgetState extends State<_SpecializationCardWidget> {
|
||
bool _expanded = false;
|
||
static const _initialCount = 3;
|
||
|
||
IconData get _icon {
|
||
final slug = widget.card.slug.toLowerCase();
|
||
if (slug.contains('loan') || slug.contains('price')) {
|
||
return Icons.attach_money;
|
||
}
|
||
if (slug.contains('property')) return Icons.apartment;
|
||
if (slug.contains('hobby') || slug.contains('interest')) {
|
||
return Icons.favorite_border;
|
||
}
|
||
return Icons.home_outlined;
|
||
}
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
final values = _expanded
|
||
? widget.card.values
|
||
: widget.card.values.take(_initialCount).toList();
|
||
final hasMore = widget.card.values.length > _initialCount;
|
||
|
||
return Container(
|
||
width: 298,
|
||
constraints: const BoxConstraints(minHeight: 236),
|
||
padding: const EdgeInsets.symmetric(vertical: 16),
|
||
decoration: BoxDecoration(
|
||
color: Colors.white,
|
||
borderRadius: BorderRadius.circular(15),
|
||
border: Border.all(
|
||
color: AppColors.primaryDark.withValues(alpha: 0.7), width: 0.7),
|
||
),
|
||
child: Column(
|
||
children: [
|
||
Icon(_icon, size: 32, color: AppColors.accentOrange),
|
||
const SizedBox(height: 8),
|
||
Text(
|
||
widget.card.name,
|
||
style: const TextStyle(
|
||
fontFamily: 'Fractul',
|
||
fontSize: 14,
|
||
fontWeight: FontWeight.w700,
|
||
color: AppColors.primaryDark,
|
||
),
|
||
),
|
||
const SizedBox(height: 12),
|
||
...values.map((v) => Padding(
|
||
padding: const EdgeInsets.symmetric(vertical: 4),
|
||
child: Text(
|
||
AgentDetailState.titleCase(v),
|
||
style: const TextStyle(
|
||
fontFamily: 'SourceSerif4',
|
||
fontSize: 14,
|
||
color: AppColors.primaryDark,
|
||
height: 1.6,
|
||
),
|
||
textAlign: TextAlign.center,
|
||
),
|
||
)),
|
||
if (hasMore) ...[
|
||
const SizedBox(height: 10),
|
||
GestureDetector(
|
||
onTap: () => setState(() => _expanded = !_expanded),
|
||
child: Container(
|
||
padding:
|
||
const EdgeInsets.symmetric(horizontal: 14, vertical: 4),
|
||
decoration: BoxDecoration(
|
||
borderRadius: BorderRadius.circular(15),
|
||
border:
|
||
Border.all(color: AppColors.accentOrange, width: 1),
|
||
),
|
||
child: Row(
|
||
mainAxisSize: MainAxisSize.min,
|
||
children: [
|
||
Text(
|
||
_expanded ? 'Show Less' : 'Show More',
|
||
style: const TextStyle(
|
||
fontFamily: 'SourceSerif4',
|
||
fontSize: 10,
|
||
fontWeight: FontWeight.w700,
|
||
color: AppColors.accentOrange,
|
||
),
|
||
),
|
||
const SizedBox(width: 2),
|
||
Icon(
|
||
_expanded
|
||
? Icons.keyboard_arrow_up
|
||
: Icons.keyboard_arrow_down,
|
||
size: 14,
|
||
color: AppColors.accentOrange,
|
||
),
|
||
],
|
||
),
|
||
),
|
||
),
|
||
],
|
||
],
|
||
),
|
||
);
|
||
}
|
||
}
|
||
|
||
// ── Testimonial Card ──
|
||
|
||
class _TestimonialCard extends StatelessWidget {
|
||
final Map<String, dynamic> data;
|
||
|
||
const _TestimonialCard({required this.data});
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
final text = data['text'] as String? ?? '';
|
||
final authorName = data['authorName'] as String? ?? '';
|
||
final authorRole = data['authorRole'] as String? ?? '';
|
||
final rating = (data['rating'] as num?)?.toInt() ?? 5;
|
||
|
||
return SizedBox(
|
||
width: 320,
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
// Main card body with speech bubble shape
|
||
Expanded(
|
||
child: Container(
|
||
width: double.infinity,
|
||
padding: const EdgeInsets.fromLTRB(20, 16, 20, 20),
|
||
decoration: BoxDecoration(
|
||
color: Colors.white,
|
||
borderRadius: BorderRadius.circular(15),
|
||
boxShadow: [
|
||
BoxShadow(
|
||
color: const Color(0xFFD9D9D9).withValues(alpha: 0.5),
|
||
offset: const Offset(0, 10),
|
||
blurRadius: 20,
|
||
),
|
||
],
|
||
),
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
// Quote icon
|
||
const Text(
|
||
'\u201C',
|
||
style: TextStyle(
|
||
fontFamily: 'Fractul',
|
||
fontSize: 36,
|
||
fontWeight: FontWeight.w700,
|
||
color: AppColors.primaryDark,
|
||
height: 0.8,
|
||
),
|
||
),
|
||
const SizedBox(height: 6),
|
||
// Title snippet
|
||
Text(
|
||
text.length > 35 ? '${text.substring(0, 35)} ..' : text,
|
||
style: const TextStyle(
|
||
fontFamily: 'Fractul',
|
||
fontSize: 14,
|
||
fontWeight: FontWeight.w700,
|
||
color: AppColors.primaryDark,
|
||
),
|
||
maxLines: 1,
|
||
overflow: TextOverflow.ellipsis,
|
||
),
|
||
const SizedBox(height: 10),
|
||
// Full text
|
||
Expanded(
|
||
child: Text(
|
||
text,
|
||
style: const TextStyle(
|
||
fontFamily: 'SourceSerif4',
|
||
fontSize: 14,
|
||
color: AppColors.primaryDark,
|
||
height: 1.5,
|
||
),
|
||
overflow: TextOverflow.fade,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
),
|
||
// Speech bubble triangle
|
||
Padding(
|
||
padding: const EdgeInsets.only(left: 30),
|
||
child: CustomPaint(
|
||
size: const Size(16, 10),
|
||
painter: _TrianglePainter(color: Colors.white),
|
||
),
|
||
),
|
||
const SizedBox(height: 6),
|
||
// Stars + Author info
|
||
Padding(
|
||
padding: const EdgeInsets.only(left: 4),
|
||
child: Row(
|
||
children: [
|
||
// Stars
|
||
Row(
|
||
mainAxisSize: MainAxisSize.min,
|
||
children: List.generate(
|
||
5,
|
||
(i) => Icon(
|
||
i < rating ? Icons.star : Icons.star_border,
|
||
size: 16,
|
||
color: i < rating
|
||
? AppColors.accentOrange
|
||
: AppColors.primaryDark.withValues(alpha: 0.3),
|
||
),
|
||
),
|
||
),
|
||
const SizedBox(width: 10),
|
||
// Author
|
||
Expanded(
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
Text(
|
||
authorName,
|
||
style: const TextStyle(
|
||
fontFamily: 'SourceSerif4',
|
||
fontSize: 14,
|
||
fontWeight: FontWeight.w500,
|
||
color: AppColors.primaryDark,
|
||
),
|
||
),
|
||
if (authorRole.isNotEmpty)
|
||
Text(
|
||
authorRole,
|
||
style: const TextStyle(
|
||
fontFamily: 'SourceSerif4',
|
||
fontSize: 14,
|
||
fontWeight: FontWeight.w600,
|
||
color: AppColors.primaryDark,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
}
|
||
|
||
// ── Triangle painter for speech bubble ──
|
||
class _TrianglePainter extends CustomPainter {
|
||
final Color color;
|
||
_TrianglePainter({required this.color});
|
||
|
||
@override
|
||
void paint(Canvas canvas, Size size) {
|
||
final paint = Paint()
|
||
..color = color
|
||
..style = PaintingStyle.fill;
|
||
final shadowPaint = Paint()
|
||
..color = const Color(0xFFD9D9D9).withAlpha(40)
|
||
..maskFilter = const MaskFilter.blur(BlurStyle.normal, 4);
|
||
|
||
final path = Path()
|
||
..moveTo(0, 0)
|
||
..lineTo(size.width, 0)
|
||
..lineTo(size.width / 2, size.height)
|
||
..close();
|
||
|
||
canvas.drawPath(path, shadowPaint);
|
||
canvas.drawPath(path, paint);
|
||
}
|
||
|
||
@override
|
||
bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
|
||
}
|