Add product search functionality

Author: codewith-usama

lib/controllers/home_controller.dart

@@ -6,6 +6,8 @@ class HomeController extends GetxController {
 
   var userName = '';
 
+  TextEditingController searchController = TextEditingController();
+
   @override
   void onInit() {
     getUserName();

lib/services/firestore_service.dart

@@ -83,4 +83,8 @@ class FirestoreService {
       .collection(productsCollection)
       .where('p_is_featured', isEqualTo: true)
       .get();
+
+  // get search products
+  static getSearchProducts(title) =>
+      firestore.collection(productsCollection).get();
 }

lib/views/home_screen_view/home_screen.dart

@@ -5,16 +5,20 @@ import 'package:emart/common_widgets/home_buttons.dart';
 import 'package:emart/common_widgets/loading_indicator.dart';
 import 'package:emart/consts/consts.dart';
 import 'package:emart/consts/list.dart';
+import 'package:emart/controllers/home_controller.dart';
 import 'package:emart/services/firestore_service.dart';
 import 'package:emart/views/category_screen_view/item_details.dart';
 import 'package:emart/views/home_screen_view/components/featured_button.dart';
+import 'package:emart/views/home_screen_view/search_screen.dart';
 import 'package:get/get.dart';
 
 class HomeScreen extends StatelessWidget {
   const HomeScreen({super.key});
 
   @override
   Widget build(BuildContext context) {
+    // TODO: work on message screen (seller buyer messages)
+    var controller = Get.find<HomeController>();
     return Container(
       color: lightGolden,
       padding: const EdgeInsets.all(12),
@@ -28,13 +32,22 @@ class HomeScreen extends StatelessWidget {
               alignment: Alignment.center,
               color: lightGrey,
               child: TextFormField(
-                decoration: const InputDecoration(
+                controller: controller.searchController,
+                decoration: InputDecoration(
                   border: InputBorder.none,
-                  suffix: Icon(Icons.search),
+                  suffix: const Icon(Icons.search).onTap(() {
+                    if (controller.searchController.text.isNotEmptyAndNotNull) {
+                      Get.to(() => SearchScreen(
+                            title: controller.searchController.text,
+                          ));
+                      controller.searchController.clear();
+                      FocusScope.of(context).unfocus();
+                    }
+                  }),
                   fillColor: whiteColor,
                   filled: true,
                   hintText: searchanyThing,
-                  hintStyle: TextStyle(color: textfieldGrey),
+                  hintStyle: const TextStyle(color: textfieldGrey),
                 ),
               ),
             ),

lib/views/home_screen_view/search_screen.dart

@@ -0,0 +1,94 @@
+// ignore_for_file: curly_braces_in_flow_control_structures
+
+import 'package:cloud_firestore/cloud_firestore.dart';
+import 'package:emart/common_widgets/loading_indicator.dart';
+import 'package:emart/consts/consts.dart';
+import 'package:emart/services/firestore_service.dart';
+import 'package:emart/views/category_screen_view/item_details.dart';
+import 'package:get/get.dart';
+
+class SearchScreen extends StatelessWidget {
+  final String? title;
+  const SearchScreen({
+    super.key,
+    required this.title,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: whiteColor,
+      appBar: AppBar(title: title!.text.color(darkFontGrey).make()),
+      body: FutureBuilder(
+        future: FirestoreService.getSearchProducts(title),
+        builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
+          if (!snapshot.hasData)
+            return loadingIndicator();
+          else if (snapshot.data!.docs.isEmpty)
+            return "No such product".text.color(darkFontGrey).makeCentered();
+          var data = snapshot.data!.docs;
+          var filteredData = data
+              .where((element) => element['p_name']
+                  .toString()
+                  .toLowerCase()
+                  .contains(title!.toLowerCase()))
+              .toList();
+          return Padding(
+            padding: const EdgeInsets.all(8.0),
+            child: GridView(
+              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+                crossAxisCount: 2,
+                mainAxisSpacing: 8,
+                crossAxisSpacing: 8,
+                mainAxisExtent: 300,
+              ),
+              children: filteredData
+                  .mapIndexed(
+                    (currentValue, index) => Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: [
+                        Image.network(
+                          filteredData[index]['p_images'][0],
+                          width: 200,
+                          height: 200,
+                          fit: BoxFit.cover,
+                        ),
+                        const Spacer(),
+                        "${filteredData[index]['p_name']}"
+                            .text
+                            .fontFamily(semibold)
+                            .color(darkFontGrey)
+                            .make(),
+                        10.heightBox,
+                        "${filteredData[index]['p_price']}"
+                            .numCurrency
+                            .text
+                            .color(redColor)
+                            .fontFamily(bold)
+                            .size(16)
+                            .make(),
+                      ],
+                    )
+                        .box
+                        .white
+                        .roundedSM
+                        .shadowSm
+                        .margin(const EdgeInsets.all(4))
+                        .padding(const EdgeInsets.all(12))
+                        .make()
+                        .onTap(() {
+                      Get.to(
+                        () => ItemDetails(
+                            title: filteredData[index]['p_name'],
+                            data: filteredData[index]),
+                      );
+                    }),
+                  )
+                  .toList(),
+            ),
+          );
+        },
+      ),
+    );
+  }
+}