image caching test

lib/widgets/skeleton_image.dart

@@ -8,6 +8,7 @@ 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:transparent_image/transparent_image.dart';
 
 class SkeletonImage extends StatefulWidget {
   final String imageUrl;
@@ -29,45 +30,49 @@ class SkeletonImage extends StatefulWidget {
 }
 
 class _SkeletonImageState extends State<SkeletonImage> {
-  late Uint8List _bytes;
-  bool _isLoading = true;
-  @override
-  void initState() {
-    if (kIsWeb) _getImage();
-    super.initState();
-  }
+  // 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;
-      });
-    }
-  }
+  // 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,
-          ),
-        );
-      }
+      // 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,
+          child: FadeInImage(
+            image: NetworkImage(
+              RequestHelper.baseUrl + widget.imageUrl,
+              headers: {'Authorization': 'Bearer ${RequestService.token}'},
+            ),
+            placeholder: MemoryImage(kTransparentImage),
             fit: BoxFit.cover,
             width: widget.width,
             height: widget.height,

pubspec.lock

@@ -649,6 +649,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "0.4.3"
+  transparent_image:
+    dependency: "direct main"
+    description:
+      name: transparent_image
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.0.0"
   typed_data:
     dependency: transitive
     description:

pubspec.yaml

@@ -60,6 +60,7 @@ dependencies:
   flutter_html: ^3.0.0-alpha.2
   crop: ^0.5.2
   url_launcher: ^6.0.18
+  transparent_image: ^2.0.0
   
 
 dev_dependencies: