mirror of
https://github.com/dz0ny/meshcore-sar.git
synced 2026-08-11 16:30:28 +00:00
Update contacts filter UI
This commit is contained in:
@@ -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: Material(
|
||||||
|
color: Colors.transparent,
|
||||||
|
child: Ink(
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: colorScheme.surface,
|
||||||
|
borderRadius: BorderRadius.circular(16),
|
||||||
|
border: Border.all(
|
||||||
|
color: hasFilter
|
||||||
|
? colorScheme.primary.withValues(alpha: 0.38)
|
||||||
|
: colorScheme.outline.withValues(alpha: 0.32),
|
||||||
|
width: 1.2,
|
||||||
|
),
|
||||||
|
boxShadow: [
|
||||||
|
BoxShadow(
|
||||||
|
color: colorScheme.shadow.withValues(alpha: 0.025),
|
||||||
|
blurRadius: 8,
|
||||||
|
offset: const Offset(0, 2),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
child: ClipRRect(
|
||||||
|
borderRadius: BorderRadius.circular(16),
|
||||||
|
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(
|
child: TextFormField(
|
||||||
key: ValueKey('${section.name}:${_sectionFilters[section] ?? ''}'),
|
key: ValueKey(
|
||||||
|
'${section.name}:${_sectionFilters[section] ?? ''}',
|
||||||
|
),
|
||||||
initialValue: _sectionFilters[section] ?? '',
|
initialValue: _sectionFilters[section] ?? '',
|
||||||
onChanged: (value) {
|
onChanged: (value) {
|
||||||
setState(() {
|
setState(() {
|
||||||
_sectionFilters[section] = value;
|
_sectionFilters[section] = value;
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
cursorColor: colorScheme.primary,
|
||||||
|
style: theme.textTheme.bodyMedium?.copyWith(
|
||||||
|
fontWeight: FontWeight.w600,
|
||||||
|
height: 1.1,
|
||||||
|
),
|
||||||
decoration: InputDecoration(
|
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,
|
isDense: true,
|
||||||
prefixIcon: const Icon(Icons.search, size: 18),
|
contentPadding: const EdgeInsets.symmetric(
|
||||||
hintText: 'Filter by name',
|
vertical: 10,
|
||||||
border: const OutlineInputBorder(),
|
),
|
||||||
suffixIcon: hasFilter
|
),
|
||||||
? IconButton(
|
),
|
||||||
icon: const Icon(Icons.close, size: 18),
|
),
|
||||||
onPressed: () {
|
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(() {
|
setState(() {
|
||||||
_sectionFilters[section] = '';
|
_sectionFilters[section] = '';
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
child: Padding(
|
||||||
|
padding: const EdgeInsets.all(6),
|
||||||
|
child: Icon(
|
||||||
|
Icons.close_rounded,
|
||||||
|
size: 14,
|
||||||
|
color: colorScheme.primary,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
)
|
)
|
||||||
: null,
|
else
|
||||||
|
const SizedBox(width: 12),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user