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 = []; List<Contact> _contactSuggestions = [];
final ContactService _contactService = ContactService(); final ContactService _contactService = ContactService();
@override @override
void initState() { void initState() {
super.initState(); super.initState();
// Set the TabController length to 3
_tabController = TabController(length: 3, vsync: this, initialIndex: 1); _tabController = TabController(length: 3, vsync: this, initialIndex: 1);
_tabController.addListener(_handleTabIndex); _tabController.addListener(_handleTabIndex);
_fetchContacts(); _fetchContacts();
@ -30,8 +28,6 @@ class _MyHomePageState extends State<MyHomePage>
} }
void _onSearchChanged(String query) { void _onSearchChanged(String query) {
print("Search query: $query");
setState(() { setState(() {
if (query.isEmpty) { if (query.isEmpty) {
_contactSuggestions = List.from(_allContacts); _contactSuggestions = List.from(_allContacts);
@ -62,7 +58,6 @@ class _MyHomePageState extends State<MyHomePage>
backgroundColor: Colors.black, backgroundColor: Colors.black,
body: Column( body: Column(
children: [ children: [
// Persistent Search Bar
Padding( Padding(
padding: const EdgeInsets.only( padding: const EdgeInsets.only(
top: 24.0, top: 24.0,
@ -74,74 +69,62 @@ class _MyHomePageState extends State<MyHomePage>
children: [ children: [
Expanded( Expanded(
child: Container( child: Container(
decoration: BoxDecoration( decoration: BoxDecoration(
color: const Color.fromARGB(255, 30, 30, 30), color: const Color.fromARGB(255, 30, 30, 30),
borderRadius: BorderRadius.circular(12.0), borderRadius: BorderRadius.circular(12.0),
border: Border( border:
top: BorderSide(color: Colors.grey.shade800, width: 1), Border.all(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),
), ),
), child: SearchAnchor(
child: SearchAnchor( builder: (BuildContext context,
builder: SearchController controller) {
(BuildContext context, SearchController controller) { return GestureDetector(
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)),
onTap: () { 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>( PopupMenuButton<String>(
icon: const Icon(Icons.more_vert, color: Colors.white), icon: const Icon(Icons.more_vert, color: Colors.white),
itemBuilder: (BuildContext context) => [ itemBuilder: (BuildContext context) => [