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)),
),
builder: (ctx) {
String query = '';
return DraggableScrollableSheet(
initialChildSize: 0.5,
minChildSize: 0.3,
maxChildSize: 0.8,
initialChildSize: 0.7,
minChildSize: 0.4,
maxChildSize: 0.95,
expand: false,
builder: (context, scrollController) {
return SafeArea(
child: Column(
children: [
const SizedBox(height: 12),
Container(
width: 40,
height: 4,
decoration: BoxDecoration(
color: AppColors.divider,
borderRadius: BorderRadius.circular(2),
),
),
const SizedBox(height: 16),
Text(
title,
style: const TextStyle(
fontFamily: 'Fractul',
fontSize: 18,
fontWeight: FontWeight.w700,
color: AppColors.primaryDark,
),
),
const SizedBox(height: 8),
Expanded(
child: ListView(
controller: scrollController,
children: [
// "All" option
ListTile(
title: Text(
'All ${field.name}',
style: const TextStyle(
fontFamily: 'SourceSerif4',
fontSize: 16,
color: AppColors.primaryDark,
return StatefulBuilder(
builder: (context, setModalState) {
final filteredOptions = query.trim().isEmpty
? field.options
: field.options
.where((o) => o.label
.toLowerCase()
.contains(query.trim().toLowerCase()))
.toList();
return SafeArea(
child: Column(
children: [
const SizedBox(height: 12),
Container(
width: 40,
height: 4,
decoration: BoxDecoration(
color: AppColors.divider,
borderRadius: BorderRadius.circular(2),
),
),
const SizedBox(height: 16),
Text(
title,
style: const TextStyle(
fontFamily: 'Fractul',
fontSize: 18,
fontWeight: FontWeight.w700,
color: AppColors.primaryDark,
),
),
const SizedBox(height: 12),
Padding(
padding:
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(
option.label,
style: const TextStyle(
fontFamily: 'SourceSerif4',
fontSize: 16,
color: AppColors.primaryDark,
),
const SizedBox(height: 8),
Expanded(
child: ListView(
controller: scrollController,
children: [
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);
},
)),
],
),
],
),
),
],
),
],
),
);
},
);
},
);