Add: Lazy loading and refresh on pull down

assets/icon.svg

@@ -0,0 +1,14 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1930_2195)">
+<path d="M13.2378 0.536444C13.2378 0.832951 13.5486 1.07336 13.9311 1.07336C14.9923 1.07336 17.0092 1.07336 18.0698 1.07336C18.4523 1.07336 18.7624 0.83289 18.7624 0.535822C18.7624 0.239315 18.4522 -3.74317e-05 18.0698 -3.74317e-05C17.0099 -3.74317e-05 14.9928 -3.74317e-05 13.9305 -3.74317e-05C13.5486 -3.74317e-05 13.2378 0.239938 13.2378 0.536444Z" fill="black"/>
+<path d="M13.2378 31.4624C13.2378 31.7589 13.5486 32 13.9311 32C14.9935 32 17.0074 32 18.0685 31.9994C18.451 31.9994 18.7612 31.7589 18.7625 31.4624C18.7625 31.1658 18.4523 30.926 18.0698 30.926C17.0093 30.926 14.9929 30.926 13.9305 30.9254C13.5486 30.9254 13.2378 31.1658 13.2378 31.4624Z" fill="black"/>
+<path d="M6.96338 24.3076C6.96338 25.2968 7.89411 26.0993 9.04154 26.0993C12.5199 26.0993 19.4814 26.0987 22.9585 26.0981C24.1059 26.0981 25.0366 25.2968 25.0366 24.3075C25.0366 23.3182 24.1053 22.5157 22.9585 22.5157C21.5944 22.5157 19.6919 22.5157 17.6761 22.5157C17.6761 21.4829 17.6761 12.2383 17.6761 9.4828C19.6925 9.4828 21.5944 9.4828 22.9591 9.4828C24.1059 9.4828 25.0366 8.68032 25.0366 7.69097C25.0366 6.70174 24.1053 5.90038 22.9585 5.90038C19.4801 5.90038 12.5186 5.90038 9.04154 5.90038C7.89354 5.90038 6.96338 6.7018 6.96338 7.69097C6.96338 8.68026 7.8929 9.4828 9.04154 9.4828C10.4056 9.4828 12.3075 9.4828 14.3238 9.4828C14.3238 12.2393 14.3238 21.4829 14.3238 22.5157C12.3075 22.5157 10.4055 22.5157 9.0409 22.5157C7.89296 22.5157 6.96338 23.3177 6.96338 24.3076Z" fill="black"/>
+<path d="M9.73926 3.39964C9.73926 3.45817 9.73926 3.51601 9.73926 3.57504C9.73926 4.32036 10.358 4.92535 11.1235 4.92535C13.5327 4.92535 18.4675 4.92535 20.8766 4.92535C21.6415 4.92535 22.2621 4.32042 22.2621 3.5746C22.2621 3.51607 22.2621 3.45699 22.2621 3.39914C22.2621 2.65332 21.6434 2.04839 20.8778 2.04839C18.4693 2.04839 13.5339 2.04839 11.1246 2.04889C10.3592 2.04827 9.73926 2.65382 9.73926 3.39964Z" fill="black"/>
+<path d="M9.73926 28.424C9.73926 28.4824 9.73926 28.5415 9.73926 28.6C9.73926 29.3458 10.358 29.9503 11.1235 29.9503C13.5327 29.9503 18.4675 29.9503 20.8766 29.9503C21.6422 29.9503 22.2621 29.3458 22.2621 28.6C22.2621 28.5415 22.2621 28.4824 22.2621 28.4246C22.2621 27.6788 21.6434 27.0744 20.8778 27.0744C18.4693 27.0744 13.5339 27.0744 11.1246 27.0744C10.3592 27.0737 9.73926 27.6782 9.73926 28.424Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_1930_2195">
+<rect width="32" height="32" fill="white" transform="matrix(0 -1 1 0 0 32)"/>
+</clipPath>
+</defs>
+</svg>

lib/components/app_bar.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
 
 class GymLinkAppBar extends StatelessWidget implements PreferredSizeWidget {
   const GymLinkAppBar({super.key});
@@ -10,14 +11,18 @@ class GymLinkAppBar extends StatelessWidget implements PreferredSizeWidget {
       shadowColor: null,
       automaticallyImplyLeading: false,
       elevation: 0,
-      scrolledUnderElevation: 4,
+      scrolledUnderElevation: 0,
       title: Row(
         mainAxisAlignment: MainAxisAlignment.spaceBetween,
         children: [
-          const Padding(
+          Padding(
-            padding: EdgeInsets.only(right: 8),
+            padding: const EdgeInsets.only(right: 8),
-            child: Image(
+            child: SvgPicture.asset(
-                image: AssetImage('assets/logo.png'), width: 24, height: 24),
+              'assets/icon.svg',
+              width: 24,
+              height: 24,
+              semanticsLabel: 'GymLink Logo',
+            ),
           ),
           Align(
             alignment: Alignment.centerRight,

lib/pages/basket.dart

@@ -4,6 +4,8 @@ import 'package:gymlink_module_web/components/basket_item_card.dart';
 import 'package:gymlink_module_web/components/heading.dart';
 import 'package:gymlink_module_web/pages/order_confirmation.dart';
 import 'package:gymlink_module_web/tools/prefs.dart';
+import 'package:gymlink_module_web/tools/routes.dart';
+import 'package:lazy_load_scrollview/lazy_load_scrollview.dart';
 
 List<Map<String, dynamic>> cart = [
   {
@@ -195,6 +197,12 @@ class _BasketPageState extends State<BasketPage> {
     return const SizedBox(height: 10);
   }
 
+  void _onLoad() async {
+    await Future.delayed(const Duration(microseconds: 1000));
+
+    setState(() {});
+  }
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
@@ -212,7 +220,7 @@ class _BasketPageState extends State<BasketPage> {
                             style: Theme.of(context).textTheme.bodyLarge),
                         const SizedBox(height: 10),
                         ElevatedButton(
-                          onPressed: () => Navigator.pop(context),
+                          onPressed: () => Navigator.pop(context, true),
                           style: ElevatedButton.styleFrom(
                             backgroundColor: Theme.of(context).primaryColor,
                             shape: const RoundedRectangleBorder(
@@ -232,24 +240,28 @@ class _BasketPageState extends State<BasketPage> {
                     context: context,
                     children: [
                       Expanded(
-                        child: ListView.builder(
+                        child: LazyLoadScrollView(
-                          itemCount: cartItems.length,
+                          onEndOfPage: _onLoad,
-                          itemBuilder: (context, index) {
+                          child: ListView.builder(
-                            final item = cartItems[index];
+                            itemCount: cartItems.length,
-                            return BasketItemCard(
+                            itemBuilder: (context, index) {
-                              name: item['name'],
+                              final item = cartItems[index];
-                              price: item['price'],
+                              return BasketItemCard(
-                              id: item['id'],
+                                name: item['name'],
-                              image: Image(
+                                price: item['price'],
-                                image: AssetImage('assets/${item['image']}'),
+                                id: item['id'],
-                                width: 50,
+                                image: Image(
-                              ),
+                                  image: AssetImage('assets/${item['image']}'),
-                              onTapPlus: () => addItem(item['id'].toString()),
+                                  width: 50,
-                              onTapMinus: () =>
+                                ),
-                                  removeItem(item['id'].toString()),
+                                onTapPlus: () => addItem(item['id'].toString()),
-                              quantity: item['count'].toString(),
+                                onTapMinus: () {
-                            );
+                                  removeItem(item['id'].toString());
-                          },
+                                },
+                                quantity: item['count'].toString(),
+                              );
+                            },
+                          ),
                         ),
                       ),
                       _buildSpacer(),
@@ -263,7 +275,7 @@ class _BasketPageState extends State<BasketPage> {
                             ),
                             ElevatedButton(
                               onPressed: () => Navigator.of(context).push(
-                                MaterialPageRoute(
+                                CustomPageRoute(
                                   builder: (context) =>
                                       const OrderConfirmationPage(),
                                 ),

lib/pages/main.dart

@@ -1,15 +1,20 @@
+import 'dart:math';
+
 import 'package:flutter/material.dart';
 import 'package:gymlink_module_web/components/app_bar.dart';
 import 'package:gymlink_module_web/components/item_card.dart';
 import 'package:gymlink_module_web/pages/basket.dart';
 import 'package:gymlink_module_web/pages/detail.dart';
 import 'package:gymlink_module_web/pages/order_history.dart';
+import 'package:gymlink_module_web/tools/prefs.dart';
 import 'package:gymlink_module_web/tools/relative.dart';
+import 'package:gymlink_module_web/tools/routes.dart';
+import 'package:lazy_load_scrollview/lazy_load_scrollview.dart';
 import 'package:url_launcher/url_launcher.dart';
 
 const List<Map<String, String>> testData = [
   {
-    "name": "Протеин",
+    "name": "Протеин 2",
     "image": "product.png",
     "price": "120",
     "details": "Test details",
@@ -59,6 +64,25 @@ class MainPage extends StatefulWidget {
 }
 
 class _MainPageState extends State<MainPage> {
+  String searchText = '';
+  List<Map<String, String>> filteredData = [];
+  int cartLength = 0;
+
+  @override
+  void initState() {
+    super.initState();
+    filteredData = testData;
+    getCart().then((value) {
+      setState(() {
+        cartLength = value.length;
+      });
+    }).whenComplete(() {
+      if (mounted) {
+        setState(() {});
+      }
+    });
+  }
+
   Future<void> _goToPage() async {
     final Uri url = Uri.parse('https://google.com');
     if (!await launchUrl(url, webOnlyWindowName: '_blank')) {
@@ -66,6 +90,19 @@ class _MainPageState extends State<MainPage> {
     }
   }
 
+  void _onLoad() async {
+    await Future.delayed(const Duration(milliseconds: 1000));
+    debugPrint('aye');
+  }
+
+  void _onSearch() {
+    setState(() {
+      filteredData = testData
+          .where((element) => (element['name']!).contains(searchText))
+          .toList();
+    });
+  }
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
@@ -82,15 +119,18 @@ class _MainPageState extends State<MainPage> {
                     children: [
                       Expanded(
                         child: TextField(
+                          onChanged: (value) => setState(() {
+                            searchText = value;
+                          }),
                           decoration: InputDecoration(
-                            hintText: 'Search',
+                            hintText: 'Поиск',
                             border: OutlineInputBorder(
                               borderRadius: BorderRadius.circular(10),
                             ),
                             suffixIcon: Padding(
                               padding: const EdgeInsets.only(right: 8),
                               child: ElevatedButton(
-                                onPressed: _goToPage,
+                                onPressed: _onSearch,
                                 style: ElevatedButton.styleFrom(
                                   padding: const EdgeInsets.symmetric(
                                     vertical: 8,
@@ -113,35 +153,12 @@ class _MainPageState extends State<MainPage> {
                         ),
                       ),
                       getSpacer(context: context, flex: 2),
-                      ElevatedButton(
-                        onPressed: () {
-                          Navigator.of(context).push(MaterialPageRoute(
-                            builder: (context) => const BasketPage(),
-                          ));
-                        },
-                        style: ElevatedButton.styleFrom(
-                          padding: const EdgeInsets.all(0),
-                          minimumSize: const Size(50, kMinInteractiveDimension),
-                          backgroundColor: Theme.of(context).primaryColor,
-                          shape: const CircleBorder(
-                            side: BorderSide(
-                              color: Colors.black,
-                              width: 1,
-                            ),
-                          ),
-                        ),
-                        child: const Icon(
-                          Icons.shopping_basket,
-                          color: Colors.white,
-                          size: 24,
-                        ),
-                      ),
                       const SizedBox(
                         width: 8,
                       ),
                       ElevatedButton(
                         onPressed: () {
-                          Navigator.of(context).push(MaterialPageRoute(
+                          Navigator.of(context).push(CustomPageRoute(
                             builder: (context) => const HistoryPage(),
                           ));
                         },
@@ -169,41 +186,94 @@ class _MainPageState extends State<MainPage> {
                   ),
                 ),
                 Expanded(
-                  child: GridView.builder(
+                  child: LazyLoadScrollView(
-                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+                    onEndOfPage: _onLoad,
-                      crossAxisCount: (MediaQuery.sizeOf(context).width ~/ 150)
+                    child: Stack(
-                          .floor(), //TODO: Make it adaptive size
+                      children: [
-                    ),
+                        GridView.builder(
-                    itemCount: testData.length,
+                          gridDelegate:
-                    itemBuilder: (context, index) {
+                              SliverGridDelegateWithFixedCrossAxisCount(
-                      final product = testData[index];
+                            crossAxisCount: min(
-                      return ProductCard(
+                                (MediaQuery.sizeOf(context).width ~/ 200)
-                        imagePath: Image(
+                                    .toInt(),
-                          image: AssetImage('assets/${product['image']!}'),
+                                8),
-                          width: 50,
-                        ),
-                        name: product['name']!,
-                        price: product['price']!,
-                        onTap: () => Navigator.of(context).push(
-                          MaterialPageRoute(
-                            builder: (context) => DetailPage(
-                              name: product['name']!,
-                              description: product['details']!,
-                              price: product['price']!,
-                              id: product['id']!,
-                              image: Image(
-                                  image:
-                                      AssetImage('assets/${product['image']!}'),
-                                  width: 300),
-                            ),
                           ),
+                          itemCount: filteredData.length,
+                          itemBuilder: (context, index) {
+                            final product = filteredData[index];
+                            return ProductCard(
+                              imagePath: Image(
+                                image: Image.network(
+                                        'https://rus-sport.net/upload/iblock/311/topb85ez18pq0aavohpa5zipk2sbfxll.jpg')
+                                    .image,
+                                width: 50,
+                              ),
+                              name: product['name']!,
+                              price: product['price']!,
+                              onTap: () => Navigator.of(context).push(
+                                CustomPageRoute(
+                                  builder: (context) => DetailPage(
+                                    name: product['name']!,
+                                    description: product['details']!,
+                                    price: product['price']!,
+                                    id: product['id']!,
+                                    image: Image(
+                                        image: AssetImage(
+                                            'assets/${product['image']!}'),
+                                        width: 300),
+                                  ),
+                                ),
+                              ),
+                            );
+                          },
                         ),
-                      );
+                      ],
-                    },
+                    ),
                   ),
                 ),
               ],
             ),
+      floatingActionButton: SizedBox(
+        height: 80,
+        width: 80,
+        child: FittedBox(
+          child: Stack(
+            children: [
+              FloatingActionButton(
+                onPressed: () => Navigator.of(context).push(CustomPageRoute(
+                  builder: (context) => const BasketPage(),
+                )),
+                backgroundColor: Colors.transparent,
+                elevation: 0,
+                child: CircleAvatar(
+                    radius: 25,
+                    backgroundColor: Theme.of(context).primaryColor,
+                    foregroundColor: Colors.white,
+                    child: const Icon(Icons.shopping_cart_outlined)),
+              ),
+              cartLength > 0
+                  ? Positioned(
+                      right: -3,
+                      bottom: 0,
+                      child: Card(
+                        color: Colors.red,
+                        child: SizedBox(
+                          width: 20,
+                          child: Center(
+                            child: Text(
+                              cartLength.toString(),
+                              style: const TextStyle(color: Colors.white),
+                            ),
+                          ),
+                        ),
+                      ),
+                    )
+                  : const SizedBox.shrink(),
+            ],
+          ),
+        ),
+      ),
+      floatingActionButtonLocation: FloatingActionButtonLocation.startFloat,
     );
   }
 }

lib/pages/order_confirmation.dart

@@ -75,6 +75,7 @@ class _OrderConfirmationPageState extends State<OrderConfirmationPage> {
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: const GymLinkAppBar(),
+      resizeToAvoidBottomInset: false,
       body: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: [
@@ -117,6 +118,17 @@ class _OrderConfirmationPageState extends State<OrderConfirmationPage> {
                     ),
                   ),
                 ),
+                Expanded(
+                  child: TextField(
+                    decoration: InputDecoration(
+                      hintText: 'Электронная почта',
+                      border: OutlineInputBorder(
+                        borderRadius: BorderRadius.circular(10),
+                      ),
+                    ),
+                    keyboardType: TextInputType.emailAddress,
+                  ),
+                ),
                 Expanded(
                   child: TextField(
                     decoration: InputDecoration(
@@ -129,7 +141,7 @@ class _OrderConfirmationPageState extends State<OrderConfirmationPage> {
                 ),
                 ElevatedButton(
                   onPressed: () {
-                    print('debugprint');
+                    debugPrint('debugprint');
                     // if (kIsWeb) {
                     //   Navigator.of(context).push(
                     //     MaterialPageRoute(

lib/pages/order_history.dart

@@ -3,6 +3,7 @@ import 'package:gymlink_module_web/components/app_bar.dart';
 import 'package:gymlink_module_web/components/heading.dart';
 import 'package:gymlink_module_web/components/history_item_card.dart';
 import 'package:gymlink_module_web/tools/relative.dart';
+import 'package:lazy_load_scrollview/lazy_load_scrollview.dart';
 
 List<Map<String, String>> orders = [
   {"image": "product.png", "price": "120", "id": "66", "date": "11.09.2001"},
@@ -32,11 +33,42 @@ List<Map<String, String>> orders = [
   }
 ];
 
-class HistoryPage extends StatelessWidget {
+class HistoryPage extends StatefulWidget {
   const HistoryPage({
     super.key,
   });
 
+  @override
+  State<HistoryPage> createState() => _HistoryPageState();
+}
+
+class _HistoryPageState extends State<HistoryPage> {
+  List<Map<String, String>> my_orders = [];
+
+  @override
+  void initState() {
+    super.initState();
+    my_orders = orders;
+  }
+
+  void _onLoad() async {
+    await Future.delayed(const Duration(milliseconds: 1000));
+    setState(() {
+      my_orders.add(
+        {
+          "image": "product.png",
+          "price": "120",
+          "id": "666666",
+          "date": "11.09.2001"
+        },
+      );
+    });
+  }
+
+  Future<void> _onRefresh() async {
+    await Future.delayed(const Duration(milliseconds: 1000));
+  }
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
@@ -49,21 +81,33 @@ class HistoryPage extends StatelessWidget {
             child: Row(
               children: [
                 Expanded(
-                  child: ListView.builder(
+                  child: LazyLoadScrollView(
-                    itemCount: orders.length,
+                    onEndOfPage: _onLoad,
-                    itemBuilder: (context, index) {
+                    scrollOffset: 200,
-                      final item = orders[index];
+                    child: RefreshIndicator(
-                      return HistoryItemCard(
+                      edgeOffset: 55,
-                        id: item['id']!,
+                      onRefresh: _onRefresh,
-                        cost: item['price']!,
+                      child: Stack(
-                        date: item['date']!,
+                        children: [
-                        image: Image(
+                          ListView.builder(
-                          image: AssetImage('assets/${item['image']!}'),
+                            itemCount: my_orders.length,
-                          width: 50,
+                            itemBuilder: (context, index) {
-                        ),
+                              final item = my_orders[index];
-                        status: OrderStatus.completed,
+                              return HistoryItemCard(
-                      );
+                                id: item['id']!,
-                    },
+                                cost: item['price']!,
+                                date: item['date']!,
+                                image: Image(
+                                  image: AssetImage('assets/${item['image']!}'),
+                                  width: 50,
+                                ),
+                                status: OrderStatus.completed,
+                              );
+                            },
+                          ),
+                        ],
+                      ),
+                    ),
                   ),
                 ),
                 getSpacer(context: context)

lib/tools/routes.dart

@@ -0,0 +1,8 @@
+import 'package:flutter/material.dart';
+
+class CustomPageRoute extends MaterialPageRoute {
+  CustomPageRoute({builder}) : super(builder: builder);
+
+  @override
+  Duration get transitionDuration => const Duration(milliseconds: 0);
+}

pubspec.yaml

@@ -31,16 +31,15 @@ dependencies:
   flutter:
     sdk: flutter
 
-
-  # The following adds the Cupertino Icons font to your application.
-  # Use with the CupertinoIcons class for iOS style icons.
-  cupertino_icons: ^1.0.6
   url_launcher: ^6.2.6
   shared_preferences: ^2.2.3
   flutter_markdown: ^0.7.1
   http: ^1.2.1
   universal_html: ^2.2.4
   provider: ^6.1.2
+  lazy_load_scrollview: ^1.3.0
+  cupertino_icons: ^1.0.8
+  flutter_svg: ^2.0.10+1
 
 dev_dependencies:
   flutter_test:
@@ -66,6 +65,7 @@ flutter:
   assets:
     - assets/logo.png
     - assets/product.png
+    - assets/icon.svg
 
   # To add assets to your application, add an assets section, like this:
   # assets: