SolarNetwork/App
3
3
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

💄 Optimize the search message a step further

Browse Source
This commit is contained in:
LittleSheep
2025-10-10 00:43:49 +08:00
parent 4321aa621a
commit b43b70df3f
1 changed files with 171 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

327
lib/screens/chat/search_messages.dart
View File

@@ -82,6 +82,9 @@ class _SearchFilters extends StatelessWidget {
withLinks.value = value!; withLinks.value = value!;
performSearch(searchController.text); performSearch(searchController.text);
}, },
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
), ),
const SizedBox(width: 8), const SizedBox(width: 8),
FilterChip( FilterChip(
@@ -92,6 +95,9 @@ class _SearchFilters extends StatelessWidget {
withAttachments.value = value!; withAttachments.value = value!;
performSearch(searchController.text); performSearch(searchController.text);
}, },
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
), ),
], ],
); );
@@ -193,169 +199,178 @@ class SearchMessagesScreen extends HookConsumerWidget {
children: [ children: [
// Search input section // Search input section
Container( Container(
decoration: BoxDecoration( margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
color: Theme.of(context).cardColor, child: Material(
borderRadius: const BorderRadius.vertical( elevation: 2,
bottom: Radius.circular(8), color: Theme.of(context).colorScheme.surfaceContainerHighest,
), borderRadius: BorderRadius.circular(32),
), child: Padding(
child: padding: const EdgeInsets.symmetric(vertical: 6, horizontal: 8),
isLarge child:
? Row( isLarge
children: [ ? Row(
Expanded( children: [
child: TextField( Expanded(
controller: searchController, child: TextField(
autofocus: true, controller: searchController,
decoration: InputDecoration( autofocus: true,
hintText: 'searchMessagesHint'.tr(), decoration: InputDecoration(
border: InputBorder.none, hintText: 'searchMessagesHint'.tr(),
isDense: true, border: InputBorder.none,
contentPadding: const EdgeInsets.only( isDense: true,
left: 16, contentPadding: const EdgeInsets.symmetric(
right: 16, horizontal: 12,
top: 12, vertical: 12,
bottom: 16, ),
suffixIcon: Row(
mainAxisSize: MainAxisSize.min,
children: [
if (searchResultCount.value != null &&
searchState.value ==
SearchState.results)
Container(
margin: const EdgeInsets.only(
right: 8,
),
padding: const EdgeInsets.symmetric(
horizontal: 8,
vertical: 2,
),
decoration: BoxDecoration(
color: Theme.of(context)
.colorScheme
.primary
.withOpacity(0.1),
borderRadius: BorderRadius.circular(
12,
),
),
child: Text(
'${searchResultCount.value}',
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color:
Theme.of(
context,
).colorScheme.primary,
),
),
),
if (searchController.text.isNotEmpty)
IconButton(
iconSize: 18,
visualDensity: VisualDensity.compact,
icon: const Icon(Icons.clear),
onPressed: () {
searchController.clear();
performSearch('');
},
),
],
),
),
onChanged: performSearch,
), ),
suffixIcon: Row( ),
mainAxisSize: MainAxisSize.min, const SizedBox(width: 16),
children: [ SingleChildScrollView(
if (searchResultCount.value != null && scrollDirection: Axis.horizontal,
searchState.value == SearchState.results) child: _SearchFilters(
Container( withLinks: withLinks,
margin: const EdgeInsets.only(right: 8), withAttachments: withAttachments,
padding: const EdgeInsets.symmetric( performSearch: performSearch,
horizontal: 8, searchController: searchController,
vertical: 2, isLarge: isLarge,
), ),
decoration: BoxDecoration( ),
color: Theme.of( ],
context, )
).colorScheme.primary.withOpacity(0.1), : Column(
borderRadius: BorderRadius.circular(12), children: [
), TextField(
child: Text( controller: searchController,
'${searchResultCount.value}', autofocus: true,
style: TextStyle( decoration: InputDecoration(
fontSize: 12, hintText: 'searchMessagesHint'.tr(),
fontWeight: FontWeight.bold, border: InputBorder.none,
color: isDense: true,
Theme.of( contentPadding: const EdgeInsets.symmetric(
context, horizontal: 12,
).colorScheme.primary, vertical: 12,
),
suffixIcon: Row(
mainAxisSize: MainAxisSize.min,
children: [
if (searchResultCount.value != null &&
searchState.value ==
SearchState.results)
Container(
margin: const EdgeInsets.only(right: 8),
padding: const EdgeInsets.symmetric(
horizontal: 8,
vertical: 2,
),
decoration: BoxDecoration(
color: Theme.of(context)
.colorScheme
.primary
.withOpacity(0.1),
borderRadius: BorderRadius.circular(
12,
),
),
child: Text(
'${searchResultCount.value}',
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color:
Theme.of(
context,
).colorScheme.primary,
),
), ),
), ),
), if (searchController.text.isNotEmpty)
if (searchController.text.isNotEmpty) IconButton(
IconButton( iconSize: 18,
iconSize: 18, visualDensity: VisualDensity.compact,
visualDensity: VisualDensity.compact, icon: const Icon(Icons.clear),
icon: const Icon(Icons.clear), onPressed: () {
onPressed: () { searchController.clear();
searchController.clear(); performSearch('');
performSearch(''); },
}, ),
), ],
),
),
onChanged: performSearch,
),
Padding(
padding: const EdgeInsets.only(
left: 8,
right: 8,
top: 8,
bottom: 8,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
_SearchFilters(
withLinks: withLinks,
withAttachments: withAttachments,
performSearch: performSearch,
searchController: searchController,
isLarge: false,
),
], ],
), ),
), ),
onChanged: performSearch, ],
),
), ),
const SizedBox(width: 16), ),
SingleChildScrollView( ),
scrollDirection: Axis.horizontal,
child: Padding(
padding: const EdgeInsets.only(
bottom: 8,
right: 12,
),
child: _SearchFilters(
withLinks: withLinks,
withAttachments: withAttachments,
performSearch: performSearch,
searchController: searchController,
isLarge: isLarge,
),
),
),
],
)
: Column(
children: [
TextField(
controller: searchController,
autofocus: true,
decoration: InputDecoration(
hintText: 'searchMessagesHint'.tr(),
border: InputBorder.none,
isDense: true,
contentPadding: const EdgeInsets.only(
left: 16,
right: 16,
top: 12,
bottom: 16,
),
suffixIcon: Row(
mainAxisSize: MainAxisSize.min,
children: [
if (searchResultCount.value != null &&
searchState.value == SearchState.results)
Container(
margin: const EdgeInsets.only(right: 8),
padding: const EdgeInsets.symmetric(
horizontal: 8,
vertical: 2,
),
decoration: BoxDecoration(
color: Theme.of(
context,
).colorScheme.primary.withOpacity(0.1),
borderRadius: BorderRadius.circular(12),
),
child: Text(
'${searchResultCount.value}',
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color:
Theme.of(
context,
).colorScheme.primary,
),
),
),
if (searchController.text.isNotEmpty)
IconButton(
iconSize: 18,
visualDensity: VisualDensity.compact,
icon: const Icon(Icons.clear),
onPressed: () {
searchController.clear();
performSearch('');
},
),
],
),
),
onChanged: performSearch,
),
Padding(
padding: const EdgeInsets.only(
left: 16,
right: 16,
bottom: 8,
),
child: _SearchFilters(
withLinks: withLinks,
withAttachments: withAttachments,
performSearch: performSearch,
searchController: searchController,
isLarge: false,
),
),
],
),
), ),
// Search results section // Search results section