Add: images slider

lib/pages/detail.dart

@@ -1,5 +1,7 @@
 import 'dart:convert';
+import 'dart:math';
 
+import 'package:carousel_slider/carousel_slider.dart';
 import 'package:flutter/material.dart';
 import 'package:gymlink_module_web/components/app_bar.dart';
 import 'package:gymlink_module_web/components/heading.dart';
@@ -27,6 +29,8 @@ class _DetailPageState extends State<DetailPage> {
   bool isInCart = false;
   int quantity = 0;
   GymItem? item;
+  final CarouselController _carouselController = CarouselController();
+  int _currentImage = 0;
 
   @override
   void initState() {
@@ -53,6 +57,11 @@ class _DetailPageState extends State<DetailPage> {
       setState(() {
         item = GymItem.fromJson(jsonDecode(utf8.decode(response.bodyBytes)));
       });
+      WidgetsBinding.instance.addPostFrameCallback((_) {
+        for (var element in item!.images) {
+          precacheImage(NetworkImage(element.url), context);
+        }
+      });
     }
   }
 
@@ -173,9 +182,64 @@ class _DetailPageState extends State<DetailPage> {
                         mainAxisAlignment: MainAxisAlignment.spaceAround,
                         crossAxisAlignment: CrossAxisAlignment.center,
                         children: [
-                          Image(
-                            image: NetworkImage(item!.images[0].url),
-                          ),
+                          item!.images.length > 1
+                              ? Column(children: [
+                                  CarouselSlider.builder(
+                                    itemCount: item!.images.length,
+                                    itemBuilder: (context, index, realIdx) {
+                                      return Center(
+                                        child: Image.network(
+                                            item!.images[realIdx].url,
+                                            width: min(
+                                                800,
+                                                MediaQuery.sizeOf(context)
+                                                    .width)),
+                                      );
+                                    },
+                                    carouselController: _carouselController,
+                                    options: CarouselOptions(
+                                        enlargeCenterPage: true,
+                                        aspectRatio: 1,
+                                        enableInfiniteScroll: false,
+                                        onPageChanged: (index, reason) {
+                                          setState(() {
+                                            _currentImage = index;
+                                          });
+                                        }),
+                                  ),
+                                  Row(
+                                    mainAxisAlignment: MainAxisAlignment.center,
+                                    children: item!.images
+                                        .asMap()
+                                        .entries
+                                        .map((entry) {
+                                      return GestureDetector(
+                                        onTap: () => _carouselController
+                                            .animateToPage(entry.key),
+                                        child: Container(
+                                          width: 12.0,
+                                          height: 12.0,
+                                          margin: const EdgeInsets.symmetric(
+                                              vertical: 8.0, horizontal: 4.0),
+                                          decoration: BoxDecoration(
+                                              shape: BoxShape.circle,
+                                              color: (Theme.of(context)
+                                                              .brightness ==
+                                                          Brightness.dark
+                                                      ? Colors.white
+                                                      : Colors.black)
+                                                  .withOpacity(
+                                                      _currentImage == entry.key
+                                                          ? 0.9
+                                                          : 0.4)),
+                                        ),
+                                      );
+                                    }).toList(),
+                                  ),
+                                ])
+                              : Image.network(item!.images[0].url,
+                                  width: min(
+                                      800, MediaQuery.sizeOf(context).width)),
                           item!.description != ''
                               ? Padding(
                                   padding: const EdgeInsetsDirectional.all(30),