Improve performances for the photos gallery

openfoodfacts · Jun 27, 2024 · 27cd2d8 · 27cd2d8
1 parent b110334
commit 27cd2d8
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 50 deletions.
diff --git a/packages/smooth_app/lib/generic_lib/widgets/images/smooth_image.dart b/packages/smooth_app/lib/generic_lib/widgets/images/smooth_image.dart
@@ -18,7 +18,16 @@ class SmoothImage extends StatelessWidget {
     this.fit = BoxFit.cover,
     this.rounded = true,
     this.heroTag,
-  });
+    this.cacheWidth,
+    this.cacheHeight,
+  })  : assert(
+          cacheWidth == null || imageProvider is NetworkImage,
+          'cacheWidth requires a NetworkImage',
+        ),
+        assert(
+          cacheHeight == null || imageProvider is NetworkImage,
+          'cacheHeight requires a NetworkImage',
+        );
 
   final ImageProvider? imageProvider;
   final double? height;
@@ -28,17 +37,28 @@ class SmoothImage extends StatelessWidget {
   final BoxFit fit;
   final String? heroTag;
   final bool rounded;
+  final int? cacheWidth;
+  final int? cacheHeight;
 
   @override
   Widget build(BuildContext context) {
-    Widget child = imageProvider == null
-        ? const PictureNotFound()
-        : Image(
-            image: imageProvider!,
-            fit: fit,
-            loadingBuilder: _loadingBuilder,
-            errorBuilder: _errorBuilder,
-          );
+    Widget child = switch (imageProvider) {
+      NetworkImage(url: final String url) => Image.network(
+          url,
+          fit: fit,
+          loadingBuilder: _loadingBuilder,
+          errorBuilder: _errorBuilder,
+          cacheWidth: cacheWidth,
+          cacheHeight: cacheHeight,
+        ),
+      ImageProvider<Object>() => Image(
+          image: imageProvider!,
+          fit: fit,
+          loadingBuilder: _loadingBuilder,
+          errorBuilder: _errorBuilder,
+        ),
+      _ => const PictureNotFound(),
+    };
 
     if (heroTag != null) {
       child = Hero(tag: heroTag!, child: child);

diff --git a/packages/smooth_app/lib/pages/image/product_image_widget.dart b/packages/smooth_app/lib/pages/image/product_image_widget.dart
@@ -11,7 +11,7 @@ import 'package:smooth_app/resources/app_icons.dart';
 import 'package:smooth_app/themes/smooth_theme_colors.dart';
 
 /// Displays a product image thumbnail with the upload date on top.
-class ProductImageWidget extends StatefulWidget {
+class ProductImageWidget extends StatelessWidget {
   const ProductImageWidget({
     required this.productImage,
     required this.barcode,
@@ -22,33 +22,6 @@ class ProductImageWidget extends StatefulWidget {
   final String barcode;
   final double squareSize;
 
-  @override
-  State<ProductImageWidget> createState() => _ProductImageWidgetState();
-}
-
-class _ProductImageWidgetState extends State<ProductImageWidget> {
-  @override
-  void initState() {
-    super.initState();
-    _loadImagePalette();
-  }
-
-  Future<void> _loadImagePalette() async {
-    final ColorScheme palette = await ColorScheme.fromImageProvider(
-        provider: NetworkImage(widget.productImage.getUrl(
-      widget.barcode,
-      uriHelper: ProductQuery.uriProductHelper,
-    )));
-
-    setState(() {
-      backgroundColor = palette.primaryContainer;
-      darkBackground = backgroundColor!.computeLuminance() < 0.5;
-    });
-  }
-
-  Color? backgroundColor;
-  bool? darkBackground;
-
   @override
   Widget build(BuildContext context) {
     final SmoothColorsThemeExtension colors =
@@ -57,20 +30,20 @@ class _ProductImageWidgetState extends State<ProductImageWidget> {
     final DateFormat dateFormat =
         DateFormat.yMd(ProductQuery.getLanguage().offTag);
 
-    darkBackground = darkBackground ?? true;
-
     final Widget image = SmoothImage(
-      width: widget.squareSize,
-      height: widget.squareSize,
+      cacheHeight:
+          (squareSize * MediaQuery.devicePixelRatioOf(context)).toInt(),
+      width: squareSize,
+      height: squareSize,
       imageProvider: NetworkImage(
-        widget.productImage.getUrl(
-          widget.barcode,
+        productImage.getUrl(
+          barcode,
           uriHelper: ProductQuery.uriProductHelper,
         ),
       ),
       rounded: false,
     );
-    final DateTime? uploaded = widget.productImage.uploaded;
+    final DateTime? uploaded = productImage.uploaded;
     if (uploaded == null) {
       return image;
     }
@@ -85,7 +58,7 @@ class _ProductImageWidgetState extends State<ProductImageWidget> {
       button: true,
       child: SmoothCard(
         padding: EdgeInsets.zero,
-        color: backgroundColor ?? colors.primaryBlack,
+        color: colors.primaryBlack,
         borderRadius: ANGULAR_BORDER_RADIUS,
         margin: EdgeInsets.zero,
         child: ClipRRect(
@@ -108,11 +81,7 @@ class _ProductImageWidgetState extends State<ProductImageWidget> {
                         child: AutoSizeText(
                           date,
                           maxLines: 1,
-                          style: TextStyle(
-                            color: darkBackground!
-                                ? Colors.white
-                                : colors.primaryDark,
-                          ),
+                          style: const TextStyle(color: Colors.white),
                         ),
                       ),
                       if (expired)