feat: add search functionality and adjust dimensions for filter selection modal
This commit is contained in:
@@ -486,12 +486,22 @@ 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 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: [
|
||||
@@ -514,12 +524,39 @@ class _HeroSectionState extends ConsumerState<HeroSection> {
|
||||
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),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Expanded(
|
||||
child: ListView(
|
||||
controller: scrollController,
|
||||
children: [
|
||||
// "All" option
|
||||
if (query.trim().isEmpty)
|
||||
ListTile(
|
||||
title: Text(
|
||||
'All ${field.name}',
|
||||
@@ -538,7 +575,7 @@ class _HeroSectionState extends ConsumerState<HeroSection> {
|
||||
Navigator.pop(ctx);
|
||||
},
|
||||
),
|
||||
...field.options.map((option) => ListTile(
|
||||
...filteredOptions.map((option) => ListTile(
|
||||
title: Text(
|
||||
option.label,
|
||||
style: const TextStyle(
|
||||
@@ -552,10 +589,26 @@ class _HeroSectionState extends ConsumerState<HeroSection> {
|
||||
color: AppColors.accentOrange)
|
||||
: null,
|
||||
onTap: () {
|
||||
onSelect(option.value, option.label);
|
||||
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,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
@@ -566,5 +619,7 @@ class _HeroSectionState extends ConsumerState<HeroSection> {
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user