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

View File

@@ -105,7 +105,7 @@ class _TopProfessionalsSectionState
else ...[ else ...[
// Professional Cards - horizontal scroll // Professional Cards - horizontal scroll
SizedBox( SizedBox(
height: 430, height: 540,
child: ListView.builder( child: ListView.builder(
controller: _scrollController, controller: _scrollController,
scrollDirection: Axis.horizontal, scrollDirection: Axis.horizontal,
@@ -295,7 +295,6 @@ class _TopProfessionalsSectionState
final rating = item.rating > 0 ? item.rating : 5.0; final rating = item.rating > 0 ? item.rating : 5.0;
return Container( return Container(
constraints: const BoxConstraints(maxHeight: 410),
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.white, color: Colors.white,
borderRadius: BorderRadius.circular(15), borderRadius: BorderRadius.circular(15),
@@ -335,203 +334,208 @@ class _TopProfessionalsSectionState
), ),
// Content // Content
Padding( Flexible(
padding: const EdgeInsets.fromLTRB(16, 12, 16, 14), child: SingleChildScrollView(
child: Column( physics: const NeverScrollableScrollPhysics(),
crossAxisAlignment: CrossAxisAlignment.start, child: Padding(
mainAxisSize: MainAxisSize.min, padding: const EdgeInsets.fromLTRB(16, 12, 16, 14),
children: [ child: Column(
// Name crossAxisAlignment: CrossAxisAlignment.start,
Text( mainAxisSize: MainAxisSize.min,
item.name, children: [
style: const TextStyle( // Name
fontFamily: 'Fractul', Text(
fontSize: 14, item.name,
fontWeight: FontWeight.w700, style: const TextStyle(
color: AppColors.primaryDark, fontFamily: 'Fractul',
), fontSize: 14,
overflow: TextOverflow.ellipsis, fontWeight: FontWeight.w700,
), color: AppColors.primaryDark,
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,
),
), ),
const SizedBox(width: 6), overflow: TextOverflow.ellipsis,
const Text( ),
'\u201CVerified local agent\u201D', const SizedBox(height: 4),
style: TextStyle(
// Subtitle (agent type)
if (subtitle.isNotEmpty)
Text(
subtitle,
style: const TextStyle(
fontFamily: 'SourceSerif4', fontFamily: 'SourceSerif4',
fontSize: 14, fontSize: 10,
fontWeight: FontWeight.w500, fontWeight: FontWeight.w400,
color: Color(0xFF638559), color: AppColors.primaryDark,
), ),
maxLines: 1,
overflow: TextOverflow.ellipsis,
), ),
], const SizedBox(height: 4),
),
const SizedBox(height: 8),
// Location // Verified badge
if (locationText.isNotEmpty) ...[ Row(
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: [ children: [
const TextSpan( SvgPicture.asset(
text: 'Experience: ', 'assets/icons/verified_badge_icon.svg',
style: TextStyle( width: 16,
fontFamily: 'Fractul', height: 16,
fontSize: 14, placeholderBuilder: (_) => const Icon(
fontWeight: FontWeight.w700, Icons.verified,
color: AppColors.primaryDark, color: Color(0xFF638559),
size: 16,
), ),
), ),
TextSpan( const SizedBox(width: 6),
text: experience, const Text(
style: const TextStyle( '\u201CVerified local agent\u201D',
style: TextStyle(
fontFamily: 'SourceSerif4', fontFamily: 'SourceSerif4',
fontSize: 14, fontSize: 14,
fontWeight: FontWeight.w400, fontWeight: FontWeight.w500,
color: AppColors.primaryDark, color: Color(0xFF638559),
), ),
), ),
], ],
), ),
maxLines: 2, const SizedBox(height: 8),
overflow: TextOverflow.ellipsis,
),
const SizedBox(height: 8),
],
// Star Rating // Location
Row( if (locationText.isNotEmpty) ...[
children: List.generate(rating.round().clamp(0, 5), (i) { const Text(
return Padding( 'Location:',
padding: const EdgeInsets.only(right: 4), style: TextStyle(
child: SvgPicture.asset( fontFamily: 'Fractul',
'assets/icons/star_filled_icon.svg', fontSize: 14,
width: 18, fontWeight: FontWeight.w700,
height: 17, 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,
),
);
}),
),
],
), ),
], ),
), ),
), ),
], ],