feat: search bar design

dialer/lib/features/contacts/contact_page.dart

@@ -15,9 +15,6 @@ class _ContactPageState extends State<ContactPage> {
   Widget build(BuildContext context) {
     final contactState = ContactState.of(context);
     return Scaffold(
-      appBar: AppBar(
-        title: const Text('Contacts'),
-      ),
       body: contactState.loading
           ? const LoadingIndicatorWidget()
           // : ContactListWidget(contacts: contactState.contacts),

dialer/lib/features/favorites/favorites_page.dart

@@ -12,10 +12,12 @@ class _FavoritePageState extends State<FavoritePage> {
   Widget build(BuildContext context) {
     return Scaffold(
       backgroundColor: Colors.black,
-      appBar: AppBar(
+      body: Center( // Center the text within the body
-        title: const Text('Favorites'),
+        child: Text(
+          "Hello",
+          style: TextStyle(color: Colors.white), // Change text color for visibility
+        ),
       ),
-      body: Text("Hello")
     );
   }
 }

dialer/lib/features/history/history_page.dart

@@ -17,9 +17,6 @@ class _HistoryPageState extends State<HistoryPage> {
   Widget build(BuildContext context) {
     return Scaffold(
       backgroundColor: Colors.black,
-      appBar: AppBar(
-        title: const Text('History'),
-      ),
       body: ListView.builder(
         itemCount: histories.length,
         itemBuilder: (context, index) {

dialer/lib/features/home/home_page.dart

@@ -1,18 +1,19 @@
-import 'package:dialer/features/composition/composition.dart';
 import 'package:flutter/material.dart';
-import 'package:dialer/features/contacts/contact_page.dart';  // Import ContactPage
+import 'package:dialer/features/contacts/contact_page.dart';
-import 'package:dialer/features/favorites/favorites_page.dart';  // Import FavoritePage
+import 'package:dialer/features/favorites/favorites_page.dart';
-import 'package:dialer/features/history/history_page.dart';  // Import HistoryPage
+import 'package:dialer/features/history/history_page.dart';
+import 'package:dialer/features/composition/composition.dart';
 
-class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
+class _MyHomePageState extends State<MyHomePage>
+    with SingleTickerProviderStateMixin {
   late TabController _tabController;
+  final SearchController _searchController = SearchController();
 
   @override
   void initState() {
     super.initState();
-    _tabController = TabController(length: 4, vsync: this, initialIndex: 1);
+    _tabController = TabController(length: 3, vsync: this, initialIndex: 1);
     _tabController.addListener(_handleTabIndex);
-
   }
 
   @override
@@ -26,67 +27,148 @@ class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateM
     setState(() {});
   }
 
-  @override
+  void _onSearchChanged(String query) {
-Widget build(BuildContext context) {
+    // Use this method to manage search actions if needed
-  return Scaffold(
+  }
-    backgroundColor: Colors.black,
-    body: Stack(
-      children: [
-        TabBarView(
-          controller: _tabController,
-          children: const [
-            FavoritePage(),
-            HistoryPage(),
-            ContactPage(),
-            CompositionPage(),
-          ],
-        ),
-        if (_tabController.index != 3)
-        Positioned(
-          right: 20,
-          bottom: 20,
-          child: FloatingActionButton(
-            onPressed: () {
 
-              _tabController.animateTo(3);
+  @override
-            },
+  Widget build(BuildContext context) {
-            backgroundColor: Colors.blue,
+    return Scaffold(
-            shape: RoundedRectangleBorder(
+      backgroundColor: Colors.black,
-              borderRadius: BorderRadius.circular(45),
+      body: Column(
+        children: [
+          // Persistent Search Bar
+          Padding(
+            padding: const EdgeInsets.only(
+              top: 24.0, // Outside top padding
+              bottom: 10.0, // Outside bottom padding
+              left: 16.0, // Outside left padding
+              right: 16.0, // Outside right padding
             ),
-            child: Padding(
+            child: Container(
-              padding: const EdgeInsets.all(8.0),
+              decoration: BoxDecoration(
-              child: Column(
+                color: const Color.fromARGB(
-                mainAxisSize: MainAxisSize.min,
+                    255, 30, 30, 30), // Background of the SearchBar
-                mainAxisAlignment: MainAxisAlignment.center,
+                borderRadius: BorderRadius.circular(12.0),
-                children: const [
+                border: Border(
-                  Icon(Icons.dialpad, color: Colors.white),
+                  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),
+                ),
+              ),
+              child: SearchAnchor(
+                builder: (BuildContext context, SearchController controller) {
+                  return SearchBar(
+                    controller: controller,
+                    padding: MaterialStateProperty.all<EdgeInsetsGeometry>(
+                      EdgeInsets.only(
+                        top: 10.0, // Inside top padding
+                        bottom: 10.0, // Inside bottom padding
+                        left: 16.0, // Inside left padding
+                        right: 16.0, // Inside right padding
+                      ),
+                    ),
+                    onChanged: _onSearchChanged,
+                    onTap: () {
+                      controller.openView();
+                    },
+                    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),
+                      ),
+                    ),
+                  );
+                },
+                suggestionsBuilder:
+                    (BuildContext context, SearchController controller) {
+                  return List<ListTile>.generate(5, (int index) {
+                    final String item = 'Suggestion $index';
+                    return ListTile(
+                      title: Text(item),
+                      onTap: () {
+                        // Close the search view and select suggestion
+                        controller.closeView(item);
+                      },
+                    );
+                  });
+                },
               ),
             ),
           ),
-        ),
+          // Main content with TabBarView
-      ],
+          Expanded(
-    ),
+            child: Stack(
-    bottomNavigationBar: Container(
+              children: [
-      color: Colors.black,
+                TabBarView(
-      child: TabBar(
+                  controller: _tabController,
-        controller: _tabController,
+                  children: const [
-        tabs: [
+                    FavoritePage(),
-          Tab(icon: Icon(_tabController.index == 0 ? Icons.star : Icons.star_border)),
+                    HistoryPage(),
-          Tab(icon: Icon(_tabController.index == 1 ? Icons.access_time_filled : Icons.access_time_outlined)),
+                    ContactPage(),
-          Tab(icon: Icon(_tabController.index == 2 ? Icons.contacts : Icons.contacts_outlined)),
+                  ],
-          Tab(icon: Icon(_tabController.index == 3 ? Icons.create : Icons.create_outlined)),
+                ),
+                Positioned(
+                  right: 20,
+                  bottom: 20,
+                  child: FloatingActionButton(
+                    onPressed: () {
+                      Navigator.push(
+                        context,
+                        MaterialPageRoute(
+                          builder: (context) => const CompositionPage(),
+                        ),
+                      );
+                    },
+                    backgroundColor: Colors.blue,
+                    shape: RoundedRectangleBorder(
+                      borderRadius: BorderRadius.circular(45),
+                    ),
+                    child: const Icon(Icons.dialpad, color: Colors.white),
+                  ),
+                ),
+              ],
+            ),
+          ),
         ],
-        labelColor: Colors.white,
-        unselectedLabelColor: Colors.grey,
-        indicatorSize: TabBarIndicatorSize.label,
-        indicatorColor: Colors.white,
       ),
-    ),
+      bottomNavigationBar: Container(
-  );
+        color: Colors.black,
-}
+        child: TabBar(
-
+          controller: _tabController,
+          tabs: [
+            Tab(
+                icon: Icon(_tabController.index == 0
+                    ? Icons.star
+                    : Icons.star_border)),
+            Tab(
+                icon: Icon(_tabController.index == 1
+                    ? Icons.access_time_filled
+                    : Icons.access_time_outlined)),
+            Tab(
+                icon: Icon(_tabController.index == 2
+                    ? Icons.contacts
+                    : Icons.contacts_outlined)),
+          ],
+          labelColor: Colors.white,
+          unselectedLabelColor: const Color.fromARGB(255, 158, 158, 158),
+          indicatorSize: TabBarIndicatorSize.label,
+          indicatorColor: Colors.white,
+        ),
+      ),
+    );
+  }
 }
 
 class MyHomePage extends StatefulWidget {