From 63f9c3e658f98d1ff971008652569ac299abf727 Mon Sep 17 00:00:00 2001
From: MohammadTaha Basiri <m.taha.basiri@gmail.com>
Date: Fri, 11 Feb 2022 20:10:20 +0330
Subject: [PATCH] D1APP-71 web image caching method applied

---
 lib/widgets/skeleton_image.dart | 81 ++++++---------------------------
 1 file changed, 15 insertions(+), 66 deletions(-)

diff --git a/lib/widgets/skeleton_image.dart b/lib/widgets/skeleton_image.dart
index 71adcae..dcad6af 100644
--- a/lib/widgets/skeleton_image.dart
+++ b/lib/widgets/skeleton_image.dart
@@ -1,15 +1,12 @@
-import 'dart:typed_data';
-
 import 'package:didvan/widgets/shimmer_placeholder.dart';
-import 'package:http/http.dart' as http;
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:didvan/config/design_config.dart';
 import 'package:didvan/services/network/request.dart';
 import 'package:didvan/services/network/request_helper.dart';
-import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
+import 'package:cached_network_image_platform_interface/cached_network_image_platform_interface.dart';
 
-class SkeletonImage extends StatefulWidget {
+class SkeletonImage extends StatelessWidget {
   final String imageUrl;
   final double width;
   final double height;
@@ -24,66 +21,18 @@ class SkeletonImage extends StatefulWidget {
     this.aspectRatio,
   }) : super(key: key);
 
-  @override
-  State<SkeletonImage> createState() => _SkeletonImageState();
-}
-
-class _SkeletonImageState extends State<SkeletonImage> {
-  // late Uint8List _bytes;
-  // bool _isLoading = true;
-  // @override
-  // void initState() {
-  //   if (kIsWeb) _getImage();
-  //   super.initState();
-  // }
-
-  // Future<void> _getImage() async {
-  //   final url = RequestHelper.baseUrl + widget.imageUrl;
-  //   _bytes = (await http.get(
-  //     Uri.parse(url),
-  //     headers: {'Authorization': 'Bearer ${RequestService.token}'},
-  //   ))
-  //       .bodyBytes;
-  //   if (mounted) {
-  //     setState(() {
-  //       _isLoading = false;
-  //     });
-  //   }
-  // }
-
   @override
   Widget build(BuildContext context) {
-    // if (kIsWeb) {
-    //   if (_isLoading) {
-    //     return _aspectRatioGenerator(
-    //       child: ShimmerPlaceholder(
-    //         borderRadius: widget.borderRadius,
-    //         width: widget.aspectRatio == null ? widget.width : null,
-    //         height: widget.aspectRatio == null ? widget.height : null,
-    //       ),
-    //     );
-    //   }
-    //   return _aspectRatioGenerator(
-    //     child: ClipRRect(
-    //       borderRadius: widget.borderRadius,
-    //       child: Image.memory(
-    //         _bytes,
-    //         fit: BoxFit.cover,
-    //         width: widget.width,
-    //         height: widget.height,
-    //       ),
-    //     ),
-    //   );
-    // }
     return _aspectRatioGenerator(
       child: CachedNetworkImage(
+        imageRenderMethodForWeb: ImageRenderMethodForWeb.HttpGet,
         httpHeaders: {'Authorization': 'Bearer ${RequestService.token}'},
-        width: widget.width,
-        height: widget.height,
-        imageUrl: RequestHelper.baseUrl + widget.imageUrl,
+        width: width,
+        height: height,
+        imageUrl: RequestHelper.baseUrl + imageUrl,
         imageBuilder: (context, imageProvider) => Container(
           decoration: BoxDecoration(
-            borderRadius: widget.borderRadius ?? DesignConfig.lowBorderRadius,
+            borderRadius: borderRadius ?? DesignConfig.lowBorderRadius,
             image: DecorationImage(
               image: imageProvider,
               fit: BoxFit.cover,
@@ -92,17 +41,17 @@ class _SkeletonImageState extends State<SkeletonImage> {
         ),
         progressIndicatorBuilder: (context, url, progress) =>
             ShimmerPlaceholder(
-          borderRadius: widget.borderRadius,
+          borderRadius: borderRadius,
         ),
       ),
     );
   }
 
-  Widget _aspectRatioGenerator({required Widget child}) =>
-      widget.aspectRatio == null
-          ? SizedBox(child: child)
-          : AspectRatio(
-              aspectRatio: widget.aspectRatio!,
-              child: child,
-            );
+  Widget _aspectRatioGenerator({required Widget child}) => aspectRatio == null
+      ? SizedBox(key: ValueKey(imageUrl), child: child)
+      : AspectRatio(
+          key: ValueKey(imageUrl),
+          aspectRatio: aspectRatio!,
+          child: child,
+        );
 }