feat: add search functionality and adjust dimensions for filter selection modal
This commit is contained in:
@@ -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);
|
|
||||||
},
|
|
||||||
)),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
),
|
||||||
],
|
);
|
||||||
),
|
},
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user