Improve caching

lib/ui/gallery.dart

@@ -3,12 +3,15 @@ import 'dart:collection';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
+import 'package:myapp/core/thumbnail_cache.dart';
 import 'package:myapp/models/photo.dart';
 import 'package:myapp/photo_loader.dart';
 import 'package:myapp/ui/detail_page.dart';
 import 'package:myapp/ui/thumbnail_widget.dart';
 import 'package:myapp/utils/date_time_util.dart';
 import 'package:provider/provider.dart';
+import 'package:visibility_detector/visibility_detector.dart';
+import 'package:myapp/core/constants.dart';
 
 class Gallery extends StatefulWidget {
   final List<Photo> photos;
@@ -97,7 +100,7 @@ class _GalleryState extends State<Gallery> {
               ? Border.all(width: 4.0, color: Colors.blue)
               : null,
         ),
-        child: ThumbnailWidget(photo),
+        child: GalleryItemWidget(photo),
       ),
     );
   }
@@ -160,3 +163,52 @@ class _GalleryState extends State<Gallery> {
         firstDate.day == secondDate.day;
   }
 }
+
+class GalleryItemWidget extends StatefulWidget {
+  final Photo photo;
+
+  const GalleryItemWidget(
+    this.photo, {
+    Key key,
+  }) : super(key: key);
+
+  @override
+  _GalleryItemWidgetState createState() => _GalleryItemWidgetState();
+}
+
+class _GalleryItemWidgetState extends State<GalleryItemWidget> {
+  bool _isVisible = false;
+  bool _isLoading = false;
+
+  @override
+  Widget build(BuildContext context) {
+    return VisibilityDetector(
+      key: Key(widget.photo.generatedId.toString()),
+      child: ThumbnailWidget(widget.photo),
+      onVisibilityChanged: (info) {
+        _isVisible = info.visibleFraction == 1;
+        if (_isVisible && !_isLoading) {
+          _isLoading = true;
+          _scheduleCaching();
+        }
+      },
+    );
+  }
+
+  void _scheduleCaching() {
+    Future.delayed(Duration(milliseconds: 500), () {
+      if (!_isVisible) {
+        _isLoading = false;
+        return;
+      }
+      if (ThumbnailLruCache.get(widget.photo, THUMBNAIL_LARGE_SIZE) == null) {
+        widget.photo
+            .getAsset()
+            .thumbDataWithSize(THUMBNAIL_LARGE_SIZE, THUMBNAIL_LARGE_SIZE)
+            .then((data) {
+          ThumbnailLruCache.put(widget.photo, THUMBNAIL_LARGE_SIZE, data);
+        });
+      }
+    });
+  }
+}

lib/ui/thumbnail_widget.dart

@@ -1,5 +1,4 @@
 import 'package:flutter/material.dart';
-import 'package:logger/logger.dart';
 import 'package:myapp/core/thumbnail_cache.dart';
 import 'package:myapp/models/photo.dart';
 import 'package:myapp/core/constants.dart';
@@ -34,32 +33,19 @@ class _ThumbnailWidgetState extends State<ThumbnailWidget> {
         _imageProvider = Image.memory(cachedSmallThumbnail).image;
         _loadedSmallThumbnail = true;
       } else {
-        if (mounted) {
-          widget.photo
-              .getAsset()
-              .thumbDataWithSize(THUMBNAIL_SMALL_SIZE, THUMBNAIL_SMALL_SIZE)
-              .then((data) {
-            if (mounted) {
-              setState(() {
-                if (data != null) {
-                  _imageProvider = Image.memory(data).image;
-                }
-                _loadedSmallThumbnail = true;
-              });
-            }
-            ThumbnailLruCache.put(widget.photo, THUMBNAIL_SMALL_SIZE, data);
-          });
-        }
-      }
-    }
-
-    if (!_loadedLargeThumbnail) {
-      if (ThumbnailLruCache.get(widget.photo, THUMBNAIL_LARGE_SIZE) == null) {
         widget.photo
             .getAsset()
-            .thumbDataWithSize(THUMBNAIL_LARGE_SIZE, THUMBNAIL_LARGE_SIZE)
+            .thumbDataWithSize(THUMBNAIL_SMALL_SIZE, THUMBNAIL_SMALL_SIZE)
             .then((data) {
-          ThumbnailLruCache.put(widget.photo, THUMBNAIL_LARGE_SIZE, data);
+          if (mounted) {
+            setState(() {
+              if (data != null) {
+                _imageProvider = Image.memory(data).image;
+              }
+              _loadedSmallThumbnail = true;
+            });
+          }
+          ThumbnailLruCache.put(widget.photo, THUMBNAIL_SMALL_SIZE, data);
         });
       }
     }

pubspec.lock

@@ -357,6 +357,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "2.0.8"
+  visibility_detector:
+    dependency: "direct main"
+    description:
+      name: visibility_detector
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.1.4"
   xml:
     dependency: transitive
     description:
@@ -366,4 +373,4 @@ packages:
     version: "3.5.0"
 sdks:
   dart: ">=2.7.0 <3.0.0"
-  flutter: ">=1.12.13+hotfix.4 <2.0.0"
+  flutter: ">=1.12.13+hotfix.5 <2.0.0"

pubspec.yaml

@@ -38,6 +38,7 @@ dependencies:
   draggable_scrollbar: ^0.0.4
   photo_view: ^0.9.2
   flutter_image_compress: ^0.6.5+1
+  visibility_detector: ^0.1.4
 
 dev_dependencies:
   flutter_test: