feat: refactor agent filter sheet to support dynamic API-driven types and update professional card layout

This commit is contained in:
pradeepkumar
2026-04-08 09:42:41 +05:30
parent de58d807ec
commit 6ff1b8e821
3 changed files with 232 additions and 211 deletions

View File

@@ -96,6 +96,11 @@ class _AgentSearchScreenState extends ConsumerState<AgentSearchScreen> {
onClearAll: () {
ref.read(searchAgentsProvider.notifier).clearFilters();
},
onListingTypeChange: (agentTypeId) {
ref
.read(searchAgentsProvider.notifier)
.filterByAgentType(agentTypeId);
},
),
);
}

View File

@@ -10,6 +10,7 @@ class AgentFilterSheet extends StatefulWidget {
final String? selectedAgentTypeId;
final void Function(Map<String, List<String>> filters) onApply;
final VoidCallback onClearAll;
final void Function(String? agentTypeId)? onListingTypeChange;
const AgentFilterSheet({
super.key,
@@ -19,6 +20,7 @@ class AgentFilterSheet extends StatefulWidget {
this.selectedAgentTypeId,
required this.onApply,
required this.onClearAll,
this.onListingTypeChange,
});
@override
@@ -28,6 +30,7 @@ class AgentFilterSheet extends StatefulWidget {
class _AgentFilterSheetState extends State<AgentFilterSheet> {
late Map<String, List<String>> _filters;
final Map<String, bool> _expandedSections = {};
String? _selectedAgentTypeId;
@override
void initState() {
@@ -37,6 +40,7 @@ class _AgentFilterSheetState extends State<AgentFilterSheet> {
for (final entry in widget.currentFilters.entries) {
_filters[entry.key] = List<String>.from(entry.value);
}
_selectedAgentTypeId = widget.selectedAgentTypeId;
// Expand all sections by default
for (final field in widget.filterFields) {
_expandedSections[field.slug] = true;
@@ -231,33 +235,47 @@ class _AgentFilterSheetState extends State<AgentFilterSheet> {
);
}
List<Widget> _buildListingTypeChips() {
// Find "Professional" and "Lender" agent types
final types = <_ListingChip>[];
for (final at in widget.agentTypes) {
final name = at.name.toLowerCase();
if (name == 'professional' || name == 'agent') {
types.add(_ListingChip(label: 'Agents', id: at.id));
} else if (name == 'lender') {
types.add(_ListingChip(label: 'Lenders', id: at.id));
}
}
if (types.isEmpty) {
types.add(const _ListingChip(label: 'Agents', id: null));
types.add(const _ListingChip(label: 'Lenders', id: null));
/// Pluralize an agent type name for display (e.g. "Agent" → "Agents",
/// "Lender" → "Lenders", "Property Manager" → "Property Managers").
/// Falls back to the raw name if it's already plural-looking.
String _displayLabel(String name) {
final trimmed = name.trim();
if (trimmed.isEmpty) return trimmed;
final lower = trimmed.toLowerCase();
if (lower.endsWith('s')) return trimmed; // already plural
if (lower.endsWith('y')) {
return '${trimmed.substring(0, trimmed.length - 1)}ies';
}
return '${trimmed}s';
}
return types.map((chip) {
final isSelected = chip.id == widget.selectedAgentTypeId;
List<Widget> _buildListingTypeChips() {
// Render one chip per backend agent type — fully driven by API data
if (widget.agentTypes.isEmpty) return const [];
return widget.agentTypes.map((at) {
final isSelected = at.id == _selectedAgentTypeId;
return Padding(
padding: const EdgeInsets.only(left: 12),
child: Text(
chip.label,
style: TextStyle(
fontFamily: 'SourceSerif4',
fontSize: 18,
fontWeight: isSelected ? FontWeight.w500 : FontWeight.w400,
color: AppColors.primaryDark,
child: GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () {
setState(() {
// Toggle off when tapping the already-selected chip
_selectedAgentTypeId = isSelected ? null : at.id;
});
widget.onListingTypeChange?.call(_selectedAgentTypeId);
},
child: Text(
_displayLabel(at.name),
style: TextStyle(
fontFamily: 'SourceSerif4',
fontSize: 18,
fontWeight: isSelected ? FontWeight.w700 : FontWeight.w400,
color: isSelected
? AppColors.accentOrange
: AppColors.primaryDark,
),
),
),
);
@@ -322,12 +340,6 @@ class _AgentFilterSheetState extends State<AgentFilterSheet> {
}
}
class _ListingChip {
final String label;
final String? id;
const _ListingChip({required this.label, required this.id});
}
class _FilterOptionsList extends StatefulWidget {
final FilterableField field;
final bool Function(String value) isSelected;

View File

@@ -105,7 +105,7 @@ class _TopProfessionalsSectionState
else ...[
// Professional Cards - horizontal scroll
SizedBox(
height: 430,
height: 540,
child: ListView.builder(
controller: _scrollController,
scrollDirection: Axis.horizontal,
@@ -295,7 +295,6 @@ class _TopProfessionalsSectionState
final rating = item.rating > 0 ? item.rating : 5.0;
return Container(
constraints: const BoxConstraints(maxHeight: 410),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(15),
@@ -335,203 +334,208 @@ class _TopProfessionalsSectionState
),
// Content
Padding(
padding: const EdgeInsets.fromLTRB(16, 12, 16, 14),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
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 (agent type)
if (subtitle.isNotEmpty)
Text(
subtitle,
style: const TextStyle(
fontFamily: 'SourceSerif4',
fontSize: 10,
fontWeight: FontWeight.w400,
color: AppColors.primaryDark,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
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,
),
Flexible(
child: SingleChildScrollView(
physics: const NeverScrollableScrollPhysics(),
child: Padding(
padding: const EdgeInsets.fromLTRB(16, 12, 16, 14),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
// Name
Text(
item.name,
style: const TextStyle(
fontFamily: 'Fractul',
fontSize: 14,
fontWeight: FontWeight.w700,
color: AppColors.primaryDark,
),
const SizedBox(width: 6),
const Text(
'\u201CVerified local agent\u201D',
style: TextStyle(
overflow: TextOverflow.ellipsis,
),
const SizedBox(height: 4),
// 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 (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(
// Verified badge
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: 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),
],
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,
// 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,
),
);
}),
),
],
),
],
),
),
),
],