refactor: make manga search page responsive

reyyuuki · Dec 1, 2024 · 077d358 · 077d358
1 parent a981504
commit 077d358
Showing 1 changed file with 89 additions and 97 deletions.
diff --git a/lib/Screens/Manga/searchManga.dart b/lib/Screens/Manga/searchManga.dart
@@ -1,4 +1,3 @@
-
 // ignore_for_file: must_be_immutable, file_names
 
 import 'dart:developer';
@@ -58,116 +57,109 @@ class _SearchpageState extends State<SearchManga> {
     fetchdata();
   }
 
-  void changList(bool list) {
-    setState(() {
-      isGrid = list;
-    });
-  }
-
   @override
   Widget build(BuildContext context) {
-    if (data == null) {
-      return const Center(child: CircularProgressIndicator());
-    }
 
     return Scaffold(
       backgroundColor: Theme.of(context).colorScheme.surface,
-      body: Column(
-        children: [
-          const SizedBox(height: 45),
-          Row(
-            children: [
-              IconButton(
-                onPressed: () {
-                  Navigator.pop(context);
-                },
-                icon: const Icon(
-                  Icons.arrow_back_ios,
-                  size: 30,
-                ),
+      body: Padding(
+        padding: const EdgeInsets.all(10),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            const SizedBox(height: 30,),
+            IconButton(
+              onPressed: () {
+                Navigator.pop(context);
+              },
+              hoverColor: Colors.transparent,
+              alignment: Alignment.topLeft,
+              icon: const Icon(
+                Icons.arrow_back_ios,
+                size: 40,
               ),
-              SizedBox(
-                height: 55,
-                width: 280,
-                child: TextField(
-                  controller: _controller,
-                  onSubmitted: (value) {
-                    handleSearch(value);
-                  },
-                  decoration: InputDecoration(
-                    prefixIcon: const Icon(Iconsax.search_normal),
-                    hintText: 'Search Manga',
-                    labelText: 'Search Manga',
-                    labelStyle: TextStyle(color: Theme.of(context).colorScheme.primary),
-                    focusedBorder: OutlineInputBorder(
-                      borderRadius: BorderRadius.circular(20),
-                      borderSide: BorderSide(
+            ),
+            const SizedBox(height: 30),
+            const Text(
+              "Serach Manga",
+              style: TextStyle(fontFamily: "Poppins-Bold", fontSize: 30),
+            ),
+            const SizedBox(
+              height: 30,
+            ),
+            Row(
+              children: [
+                Expanded(
+                  child: TextField(
+                    controller: _controller,
+                    onSubmitted: (value) {
+                      setState(() {
+                        data = null;
+                      });
+                      handleSearch(value);
+                    },
+                    decoration: InputDecoration(
+                      prefixIcon: const Icon(Iconsax.search_normal),
+                      labelText: "Search Manga",
+                      hintText: 'Search Manga',
+                      labelStyle: TextStyle(
                           color: Theme.of(context).colorScheme.primary),
+                      focusedBorder: OutlineInputBorder(
+                        borderRadius: BorderRadius.circular(20),
+                        borderSide: BorderSide(
+                            color: Theme.of(context).colorScheme.primary),
+                      ),
+                      enabledBorder: OutlineInputBorder(
+                          borderRadius: BorderRadius.circular(20),
+                          borderSide: BorderSide(
+                              color: Theme.of(context).colorScheme.primary,
+                              width: 1)),
+                      disabledBorder: OutlineInputBorder(
+                          borderRadius: BorderRadius.circular(20),
+                          borderSide: BorderSide(
+                              color:
+                                  Theme.of(context).colorScheme.inversePrimary,
+                              width: 1)),
+                      fillColor: Theme.of(context).colorScheme.surface,
+                      filled: true,
                     ),
-                    enabledBorder: OutlineInputBorder(
-                      borderRadius: BorderRadius.circular(20),
-                      borderSide: BorderSide(color: Theme.of(context).colorScheme.primary),
-                    ),
-                    fillColor:
-                        Theme.of(context).colorScheme.surface,
-                    filled: true,
                   ),
                 ),
-              ),
-            ],
-          ),
-          const SizedBox(height: 20),
-          Padding(
-            padding: const EdgeInsets.symmetric(horizontal: 15),
-            child: Row(
-              mainAxisAlignment: MainAxisAlignment.spaceBetween,
-              children: [
-                Text(
-                  "Search Results",
-                  style: TextStyle(
-                      fontSize: 20,
-                      fontFamily: "Poppins-Bold",
+                const SizedBox(
+                  width: 10,
+                ),
+                IconButton(
+                  onPressed: () {
+                    setState(() {
+                      isGrid = !isGrid;
+                    });
+                  },
+                  style: ButtonStyle(
+                      backgroundColor: MaterialStateProperty.all(
+                          Theme.of(context).colorScheme.surfaceContainerHigh),
+                      shape: MaterialStateProperty.all(RoundedRectangleBorder(
+                          borderRadius: BorderRadius.circular(10)))),
+                  iconSize: 30,
+                  icon: Icon(isGrid ? Ionicons.grid : Iconsax.menu_15,
                       color: Theme.of(context).colorScheme.primary),
                 ),
-                Padding(
-                  padding: const EdgeInsets.symmetric(horizontal: 5),
-                  child: Row(
-                    children: [
-                      GestureDetector(
-                          onTap: () {
-                            changList(true);
-                          },
-                          child: Icon(
-                            Iconsax.menu_15,
-                            color: isGrid
-                                ? Theme.of(context).colorScheme.primary
-                                : Colors.grey,
-                          )),
-                      const SizedBox(
-                        width: 10,
-                      ),
-                      GestureDetector(
-                          onTap: () {
-                            changList(false);
-                          },
-                          child: Icon(
-                            Ionicons.grid,
-                            color: !isGrid
-                                ? Theme.of(context).colorScheme.primary
-                                : Colors.grey,
-                          )),
-                    ],
-                  ),
-                )
               ],
             ),
-          ),
-          Expanded(
-            child: isGrid
-                ? GridList(data: data, route: '/mangaDetail',)
-                : MangaSearchList(data: data, ),
-          ),
-        ],
+            const SizedBox(
+              height: 10,
+            ),
+            Expanded(
+              child: data == null ? const Center(child: CircularProgressIndicator(),) : (isGrid
+                  ? GridList(
+                      data: data,
+                      route: '/mangaDetail',
+                    )
+                  : MangaSearchList(
+                      data: data,
+                    )),
+            ),
+          ],
+        ),
       ),
     );
   }