From 27da063c34ab9621e5f11456881f274234430306 Mon Sep 17 00:00:00 2001
From: Sergey Elpashev <elpashevs@bk.ru>
Date: Wed, 12 Jun 2024 02:03:20 +0300
Subject: [PATCH] Fix: some design fixes

---
 android/app/src/main/AndroidManifest.xml |  2 +-
 lib/components/item_card.dart            | 13 ++--
 lib/pages/main.dart                      | 87 ++++++++++++++----------
 3 files changed, 59 insertions(+), 43 deletions(-)

diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml
index 1152de4..905fe75 100644
--- a/android/app/src/main/AndroidManifest.xml
+++ b/android/app/src/main/AndroidManifest.xml
@@ -1,4 +1,5 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android">
+    <uses-permission android:name="android.permission.INTERNET" /> 
     <application
         android:label="Example Gym App"
         android:name="${applicationName}"
@@ -31,7 +32,6 @@
             android:name="flutterEmbedding"
             android:value="2" />
     </application>
-    <uses-permission android:name="android.permission.INTERNET" /> 
     <!-- Required to query activities that can process text, see:
          https://developer.android.com/training/package-visibility?hl=en and
          https://developer.android.com/reference/android/content/Intent#ACTION_PROCESS_TEXT.
diff --git a/lib/components/item_card.dart b/lib/components/item_card.dart
index a44a963..c9b7f01 100644
--- a/lib/components/item_card.dart
+++ b/lib/components/item_card.dart
@@ -15,10 +15,10 @@ class ProductCard extends StatelessWidget {
   });
 
   double getCardHeight({required BuildContext context}) {
-    if (MediaQuery.of(context).size.width > 600) {
-      return 200;
+    if (MediaQuery.of(context).size.width > 400) {
+      return 300;
     }
-    return 100;
+    return 160;
   }
 
   @override
@@ -27,7 +27,9 @@ class ProductCard extends StatelessWidget {
       onTap: onTap,
       child: ConstrainedBox(
         constraints: BoxConstraints(
-            minHeight: 80, maxHeight: getCardHeight(context: context)),
+          minHeight: 160,
+          maxHeight: getCardHeight(context: context),
+        ),
         child: Card(
           elevation: 3,
           color: Theme.of(context).scaffoldBackgroundColor,
@@ -42,7 +44,8 @@ class ProductCard extends StatelessWidget {
               const SizedBox(height: 16),
               Text(
                 name,
-                style: Theme.of(context).textTheme.titleLarge,
+                style: Theme.of(context).textTheme.titleMedium,
+                maxLines: 2,
               ),
               const SizedBox(height: 8),
               Text(
diff --git a/lib/pages/main.dart b/lib/pages/main.dart
index 869cbb8..4d17e98 100644
--- a/lib/pages/main.dart
+++ b/lib/pages/main.dart
@@ -154,10 +154,10 @@ class _MainPageState extends State<MainPage> {
                     decoration: InputDecoration(
                       hintText: 'Поиск',
                       border: OutlineInputBorder(
-                        borderRadius: BorderRadius.circular(10),
+                        borderRadius: BorderRadius.circular(50),
                       ),
                       suffixIcon: Padding(
-                        padding: const EdgeInsets.only(right: 8),
+                        padding: const EdgeInsets.only(right: 5),
                         child: ElevatedButton(
                           onPressed: _onSearch,
                           style: ElevatedButton.styleFrom(
@@ -213,38 +213,41 @@ class _MainPageState extends State<MainPage> {
               ],
             ),
           ),
-          SizedBox(
-            height: 60,
-            child: ListView.builder(
-                scrollDirection: Axis.horizontal,
-                shrinkWrap: true,
-                itemCount: categories.length,
-                itemBuilder: (context, index) {
-                  final category = categories[index];
-                  return GestureDetector(
-                    onTap: () {
-                      setState(() {
-                        selectedCategory =
-                            selectedCategory == category ? null : category;
-                      });
-                      _onSearch();
-                    },
-                    child: Padding(
-                      padding: const EdgeInsets.symmetric(
-                          horizontal: 10, vertical: 10),
-                      child: Chip(
-                        label: Text(category.name),
-                        backgroundColor: selectedCategory == category
-                            ? Theme.of(context).primaryColor
-                            : Colors.white,
-                        labelStyle: TextStyle(
-                            color: selectedCategory == category
-                                ? Colors.white
-                                : Colors.black),
+          Align(
+            alignment: Alignment.centerLeft,
+            child: SizedBox(
+              height: 60,
+              child: ListView.builder(
+                  scrollDirection: Axis.horizontal,
+                  shrinkWrap: true,
+                  itemCount: categories.length,
+                  itemBuilder: (context, index) {
+                    final category = categories[index];
+                    return GestureDetector(
+                      onTap: () {
+                        setState(() {
+                          selectedCategory =
+                              selectedCategory == category ? null : category;
+                        });
+                        _onSearch();
+                      },
+                      child: Padding(
+                        padding: const EdgeInsets.symmetric(
+                            horizontal: 10, vertical: 10),
+                        child: Chip(
+                          label: Text(category.name),
+                          backgroundColor: selectedCategory == category
+                              ? Theme.of(context).primaryColor
+                              : Colors.white,
+                          labelStyle: TextStyle(
+                              color: selectedCategory == category
+                                  ? Colors.white
+                                  : Colors.black),
+                        ),
                       ),
-                    ),
-                  );
-                }),
+                    );
+                  }),
+            ),
           ),
           Expanded(
             child: LazyLoadScrollView(
@@ -271,7 +274,9 @@ class _MainPageState extends State<MainPage> {
                                                     200)
                                                 .toInt(),
                                             8),
-                                        childAspectRatio: 1.0),
+                                        childAspectRatio: 0.8,
+                                        mainAxisSpacing: 10.0,
+                                        crossAxisSpacing: 40.0),
                                 itemCount: itemViewCount,
                                 itemBuilder: (context, index) {
                                   final product = filteredData[index];
@@ -280,7 +285,7 @@ class _MainPageState extends State<MainPage> {
                                       image:
                                           Image.network(product.images[0].url)
                                               .image,
-                                      width: 50,
+                                      width: 120,
                                     ),
                                     name: shortString(product.title),
                                     price: product.price.toStringAsFixed(2),
@@ -310,9 +315,17 @@ class _MainPageState extends State<MainPage> {
                                                   Radius.circular(50)),
                                             ),
                                             foregroundColor: Colors.white,
+                                            fixedSize: const Size(180, 40),
                                           ),
-                                          child: const Text('Загрузить ещё'),
-                                        )
+                                          child: const Row(
+                                            mainAxisSize: MainAxisSize.min,
+                                            children: [
+                                              Text('Загрузить ещё'),
+                                              Spacer(),
+                                              Icon(Icons.arrow_downward),
+                                              Spacer()
+                                            ],
+                                          ))
                                       : const CircularProgressIndicator()
                                   : const Text(
                                       'Конец списка',