fix: searchBar open and close correctly
All checks were successful
/ mirror (push) Successful in 4s

This commit is contained in:
Florian Griffon 2025-01-16 13:20:54 +01:00
parent 8b1eb1d709
commit 4401cba5b5

View File

@ -14,11 +14,9 @@ class _MyHomePageState extends State<MyHomePage>
List<Contact> _contactSuggestions = [];
final ContactService _contactService = ContactService();
@override
void initState() {
super.initState();
// Set the TabController length to 3
_tabController = TabController(length: 3, vsync: this, initialIndex: 1);
_tabController.addListener(_handleTabIndex);
_fetchContacts();
@ -30,8 +28,6 @@ class _MyHomePageState extends State<MyHomePage>
}
void _onSearchChanged(String query) {
print("Search query: $query");
setState(() {
if (query.isEmpty) {
_contactSuggestions = List.from(_allContacts);
@ -62,7 +58,6 @@ class _MyHomePageState extends State<MyHomePage>
backgroundColor: Colors.black,
body: Column(
children: [
// Persistent Search Bar
Padding(
padding: const EdgeInsets.only(
top: 24.0,
@ -74,74 +69,62 @@ class _MyHomePageState extends State<MyHomePage>
children: [
Expanded(
child: Container(
decoration: BoxDecoration(
color: const Color.fromARGB(255, 30, 30, 30),
borderRadius: BorderRadius.circular(12.0),
border: Border(
top: BorderSide(color: Colors.grey.shade800, width: 1),
left: BorderSide(color: Colors.grey.shade800, width: 1),
right: BorderSide(color: Colors.grey.shade800, width: 1),
bottom:
BorderSide(color: Colors.grey.shade800, width: 2),
decoration: BoxDecoration(
color: const Color.fromARGB(255, 30, 30, 30),
borderRadius: BorderRadius.circular(12.0),
border:
Border.all(color: Colors.grey.shade800, width: 1),
),
),
child: SearchAnchor(
builder:
(BuildContext context, SearchController controller) {
return SearchBar(
controller: controller,
padding:
MaterialStateProperty.all<EdgeInsetsGeometry>(
const EdgeInsets.only(
top: 6.0,
bottom: 6.0,
left: 16.0,
right: 16.0,
),
),
onTap: () {
controller.openView();
_onSearchChanged('');
},
backgroundColor: MaterialStateProperty.all(
const Color.fromARGB(255, 30, 30, 30)),
hintText: 'Search contacts',
hintStyle: MaterialStateProperty.all(
const TextStyle(color: Colors.grey, fontSize: 16.0),
),
leading: const Icon(
Icons.search,
color: Colors.grey,
size: 24.0,
),
shape:
MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12.0),
),
),
);
},
viewOnChanged: (query) {
_onSearchChanged(query);
},
suggestionsBuilder:
(BuildContext context, SearchController controller) {
return _contactSuggestions.map((contact) {
return ListTile(
key: ValueKey(contact.id),
title: Text(contact.displayName,
style: const TextStyle(color: Colors.white)),
child: SearchAnchor(
builder: (BuildContext context,
SearchController controller) {
return GestureDetector(
onTap: () {
controller.closeView(contact.displayName);
controller.openView(); // Open the search view
},
child: Container(
decoration: BoxDecoration(
color: const Color.fromARGB(255, 30, 30, 30),
borderRadius: BorderRadius.circular(12.0),
border: Border.all(
color: Colors.grey.shade800, width: 1),
),
padding: const EdgeInsets.symmetric(
vertical: 12.0, horizontal: 16.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: const [
Icon(Icons.search,
color: Colors.grey, size: 24.0),
SizedBox(width: 8.0),
Text(
'Search contacts',
style: TextStyle(
color: Colors.grey, fontSize: 16.0),
),
],
),
),
);
}).toList();
},
),
),
},
viewOnChanged: (query) {
_onSearchChanged(query);
},
suggestionsBuilder: (BuildContext context,
SearchController controller) {
return _contactSuggestions.map((contact) {
return ListTile(
key: ValueKey(contact.id),
title: Text(contact.displayName,
style: const TextStyle(color: Colors.white)),
onTap: () {
controller.closeView(contact.displayName);
},
);
}).toList();
},
)),
),
// 3-dot menu
PopupMenuButton<String>(
icon: const Icon(Icons.more_vert, color: Colors.white),
itemBuilder: (BuildContext context) => [