From 4401cba5b51eb2f9d3f028b5a685212dd78c24c8 Mon Sep 17 00:00:00 2001
From: Florian Griffon <florian.griffon@epitech.eu>
Date: Thu, 16 Jan 2025 13:20:54 +0100
Subject: [PATCH] fix: searchBar open and close correctly

---
 dialer/lib/features/home/home_page.dart | 119 ++++++++++--------------
 1 file changed, 51 insertions(+), 68 deletions(-)

diff --git a/dialer/lib/features/home/home_page.dart b/dialer/lib/features/home/home_page.dart
index dbfc84f..886e7c8 100644
--- a/dialer/lib/features/home/home_page.dart
+++ b/dialer/lib/features/home/home_page.dart
@@ -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) => [