Update contacts filter UI

This commit is contained in:
Janez T
2026-03-12 14:46:36 +01:00
parent 38cb3dc031
commit baa1aa6edd

View File

@@ -511,33 +511,114 @@ class _ContactsTabState extends State<ContactsTab> {
BuildContext context, BuildContext context,
ContactSection section, ContactSection section,
) { ) {
final theme = Theme.of(context);
final colorScheme = theme.colorScheme;
final hasFilter = (_sectionFilters[section] ?? '').isNotEmpty; final hasFilter = (_sectionFilters[section] ?? '').isNotEmpty;
return Padding( return Padding(
padding: const EdgeInsets.only(bottom: 8), padding: const EdgeInsets.only(bottom: 8),
child: TextFormField( child: Material(
key: ValueKey('${section.name}:${_sectionFilters[section] ?? ''}'), color: Colors.transparent,
initialValue: _sectionFilters[section] ?? '', child: Ink(
onChanged: (value) { decoration: BoxDecoration(
setState(() { color: colorScheme.surface,
_sectionFilters[section] = value; borderRadius: BorderRadius.circular(16),
}); border: Border.all(
}, color: hasFilter
decoration: InputDecoration( ? colorScheme.primary.withValues(alpha: 0.38)
isDense: true, : colorScheme.outline.withValues(alpha: 0.32),
prefixIcon: const Icon(Icons.search, size: 18), width: 1.2,
hintText: 'Filter by name', ),
border: const OutlineInputBorder(), boxShadow: [
suffixIcon: hasFilter BoxShadow(
? IconButton( color: colorScheme.shadow.withValues(alpha: 0.025),
icon: const Icon(Icons.close, size: 18), blurRadius: 8,
onPressed: () { offset: const Offset(0, 2),
setState(() { ),
_sectionFilters[section] = ''; ],
}); ),
}, child: ClipRRect(
) borderRadius: BorderRadius.circular(16),
: null, child: SizedBox(
height: 42,
child: Row(
children: [
Padding(
padding: const EdgeInsets.only(left: 12, right: 8),
child: Icon(
Icons.search_rounded,
size: 17,
color: hasFilter
? colorScheme.primary
: colorScheme.onSurfaceVariant,
),
),
Expanded(
child: TextFormField(
key: ValueKey(
'${section.name}:${_sectionFilters[section] ?? ''}',
),
initialValue: _sectionFilters[section] ?? '',
onChanged: (value) {
setState(() {
_sectionFilters[section] = value;
});
},
cursorColor: colorScheme.primary,
style: theme.textTheme.bodyMedium?.copyWith(
fontWeight: FontWeight.w600,
height: 1.1,
),
decoration: InputDecoration(
hintText: 'Search this section',
hintStyle: theme.textTheme.bodyMedium?.copyWith(
color: colorScheme.onSurfaceVariant.withValues(
alpha: 0.85,
),
),
filled: true,
fillColor: Colors.transparent,
border: InputBorder.none,
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none,
disabledBorder: InputBorder.none,
isDense: true,
contentPadding: const EdgeInsets.symmetric(
vertical: 10,
),
),
),
),
if (hasFilter)
Padding(
padding: const EdgeInsets.only(right: 6),
child: Material(
color: colorScheme.primary.withValues(alpha: 0.10),
shape: const CircleBorder(),
child: InkWell(
customBorder: const CircleBorder(),
onTap: () {
setState(() {
_sectionFilters[section] = '';
});
},
child: Padding(
padding: const EdgeInsets.all(6),
child: Icon(
Icons.close_rounded,
size: 14,
color: colorScheme.primary,
),
),
),
),
)
else
const SizedBox(width: 12),
],
),
),
),
), ),
), ),
); );