feat: add search functionality and adjust dimensions for filter selection modal

This commit is contained in:
pradeepkumar
2026-04-20 13:36:49 +05:30
parent d3f23f9c53
commit 6b0fa24b85

View File

@@ -486,81 +486,136 @@ class _HeroSectionState extends ConsumerState<HeroSection> {
borderRadius: BorderRadius.vertical(top: Radius.circular(15)), borderRadius: BorderRadius.vertical(top: Radius.circular(15)),
), ),
builder: (ctx) { builder: (ctx) {
String query = '';
return DraggableScrollableSheet( return DraggableScrollableSheet(
initialChildSize: 0.5, initialChildSize: 0.7,
minChildSize: 0.3, minChildSize: 0.4,
maxChildSize: 0.8, maxChildSize: 0.95,
expand: false, expand: false,
builder: (context, scrollController) { builder: (context, scrollController) {
return SafeArea( return StatefulBuilder(
child: Column( builder: (context, setModalState) {
children: [ final filteredOptions = query.trim().isEmpty
const SizedBox(height: 12), ? field.options
Container( : field.options
width: 40, .where((o) => o.label
height: 4, .toLowerCase()
decoration: BoxDecoration( .contains(query.trim().toLowerCase()))
color: AppColors.divider, .toList();
borderRadius: BorderRadius.circular(2), return SafeArea(
), child: Column(
), children: [
const SizedBox(height: 16), const SizedBox(height: 12),
Text( Container(
title, width: 40,
style: const TextStyle( height: 4,
fontFamily: 'Fractul', decoration: BoxDecoration(
fontSize: 18, color: AppColors.divider,
fontWeight: FontWeight.w700, borderRadius: BorderRadius.circular(2),
color: AppColors.primaryDark, ),
), ),
), const SizedBox(height: 16),
const SizedBox(height: 8), Text(
Expanded( title,
child: ListView( style: const TextStyle(
controller: scrollController, fontFamily: 'Fractul',
children: [ fontSize: 18,
// "All" option fontWeight: FontWeight.w700,
ListTile( color: AppColors.primaryDark,
title: Text( ),
'All ${field.name}', ),
style: const TextStyle( const SizedBox(height: 12),
fontFamily: 'SourceSerif4', Padding(
fontSize: 16, padding:
color: AppColors.primaryDark, const EdgeInsets.symmetric(horizontal: 16),
child: TextField(
autofocus: false,
onChanged: (v) =>
setModalState(() => query = v),
decoration: InputDecoration(
hintText: 'Search...',
prefixIcon: const Icon(Icons.search, size: 20),
isDense: true,
contentPadding: const EdgeInsets.symmetric(
horizontal: 12, vertical: 10),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide(
color: AppColors.divider, width: 1),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide(
color: AppColors.divider, width: 1),
), ),
), ),
trailing: currentValue == null
? const Icon(Icons.check,
color: AppColors.accentOrange)
: null,
onTap: () {
onClear();
Navigator.pop(ctx);
},
), ),
...field.options.map((option) => ListTile( ),
title: Text( const SizedBox(height: 8),
option.label, Expanded(
style: const TextStyle( child: ListView(
fontFamily: 'SourceSerif4', controller: scrollController,
fontSize: 16, children: [
color: AppColors.primaryDark, if (query.trim().isEmpty)
ListTile(
title: Text(
'All ${field.name}',
style: const TextStyle(
fontFamily: 'SourceSerif4',
fontSize: 16,
color: AppColors.primaryDark,
),
),
trailing: currentValue == null
? const Icon(Icons.check,
color: AppColors.accentOrange)
: null,
onTap: () {
onClear();
Navigator.pop(ctx);
},
),
...filteredOptions.map((option) => ListTile(
title: Text(
option.label,
style: const TextStyle(
fontFamily: 'SourceSerif4',
fontSize: 16,
color: AppColors.primaryDark,
),
),
trailing: currentValue == option.value
? const Icon(Icons.check,
color: AppColors.accentOrange)
: null,
onTap: () {
onSelect(
option.value, option.label);
Navigator.pop(ctx);
},
)),
if (filteredOptions.isEmpty &&
query.trim().isNotEmpty)
const Padding(
padding: EdgeInsets.all(24),
child: Center(
child: Text(
'No results found',
style: TextStyle(
fontFamily: 'SourceSerif4',
fontSize: 14,
color: AppColors.primaryDark,
),
),
), ),
), ),
trailing: currentValue == option.value ],
? const Icon(Icons.check, ),
color: AppColors.accentOrange) ),
: null, ],
onTap: () {
onSelect(option.value, option.label);
Navigator.pop(ctx);
},
)),
],
),
), ),
], );
), },
); );
}, },
); );