From 27cd2d820520605daab799edad6e9b90bef64496 Mon Sep 17 00:00:00 2001 From: Edouard Marquez Date: Thu, 27 Jun 2024 09:33:47 +0200 Subject: [PATCH 1/3] Improve performances for the photos gallery --- .../widgets/images/smooth_image.dart | 38 ++++++++++---- .../lib/pages/image/product_image_widget.dart | 51 ++++--------------- 2 files changed, 39 insertions(+), 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 index 3e8a6be7cf1..95e24525693 100644 --- 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() => 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 index c1448413b52..99a6da9d7e6 100644 --- 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 createState() => _ProductImageWidgetState(); -} - -class _ProductImageWidgetState extends State { - @override - void initState() { - super.initState(); - _loadImagePalette(); - } - - Future _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 { 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 { 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 { child: AutoSizeText( date, maxLines: 1, - style: TextStyle( - color: darkBackground! - ? Colors.white - : colors.primaryDark, - ), + style: const TextStyle(color: Colors.white), ), ), if (expired) From 88b07ae4960fcadb599e91f20e95c2b75b38411f Mon Sep 17 00:00:00 2001 From: Edouard Marquez Date: Thu, 27 Jun 2024 10:05:47 +0200 Subject: [PATCH 2/3] Allow to pass an `ImageSize` to `ProductImageWidget` --- .../image/product_image_gallery_other_view.dart | 12 ++++++++++++ .../lib/pages/image/product_image_widget.dart | 5 +++++ 2 files changed, 17 insertions(+) diff --git a/packages/smooth_app/lib/pages/image/product_image_gallery_other_view.dart b/packages/smooth_app/lib/pages/image/product_image_gallery_other_view.dart index 3f40df632f7..6737a3da1e4 100644 --- a/packages/smooth_app/lib/pages/image/product_image_gallery_other_view.dart +++ b/packages/smooth_app/lib/pages/image/product_image_gallery_other_view.dart @@ -1,3 +1,4 @@ +import 'package:collection/collection.dart'; import 'package:flutter/material.dart'; import 'package:flutter_gen/gen_l10n/app_localizations.dart'; import 'package:openfoodfacts/openfoodfacts.dart'; @@ -108,6 +109,8 @@ class _RawGridGallery extends StatelessWidget { @override Widget build(BuildContext context) { final double squareSize = _getSquareSize(context); + final ImageSize? imageSize = _computeImageSize(squareSize); + return SliverGrid( gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: _columns, @@ -137,6 +140,7 @@ class _RawGridGallery extends StatelessWidget { productImage: productImage, barcode: product.barcode!, squareSize: squareSize, + imageSize: imageSize, ), ), ); @@ -146,4 +150,12 @@ class _RawGridGallery extends StatelessWidget { ), ); } + + ImageSize? _computeImageSize(double squareSize) => [ + ImageSize.THUMB, + ImageSize.SMALL, + ImageSize.DISPLAY + ].firstWhereOrNull( + (ImageSize element) => squareSize < int.parse(element.number), + ); } diff --git a/packages/smooth_app/lib/pages/image/product_image_widget.dart b/packages/smooth_app/lib/pages/image/product_image_widget.dart index 99a6da9d7e6..50dd84ded55 100644 --- a/packages/smooth_app/lib/pages/image/product_image_widget.dart +++ b/packages/smooth_app/lib/pages/image/product_image_widget.dart @@ -16,12 +16,16 @@ class ProductImageWidget extends StatelessWidget { required this.productImage, required this.barcode, required this.squareSize, + this.imageSize, }); final ProductImage productImage; final String barcode; final double squareSize; + /// Allows to fetch the optimized version of the image + final ImageSize? imageSize; + @override Widget build(BuildContext context) { final SmoothColorsThemeExtension colors = @@ -39,6 +43,7 @@ class ProductImageWidget extends StatelessWidget { productImage.getUrl( barcode, uriHelper: ProductQuery.uriProductHelper, + imageSize: imageSize, ), ), rounded: false, From fdbbb342ce70d1dba0b312105b5bf382cb70c55c Mon Sep 17 00:00:00 2001 From: Edouard Marquez Date: Thu, 27 Jun 2024 13:55:57 +0200 Subject: [PATCH 3/3] Update packages/smooth_app/lib/pages/image/product_image_gallery_other_view.dart Co-authored-by: monsieurtanuki --- .../lib/pages/image/product_image_gallery_other_view.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/smooth_app/lib/pages/image/product_image_gallery_other_view.dart b/packages/smooth_app/lib/pages/image/product_image_gallery_other_view.dart index 6737a3da1e4..3936ac36b1a 100644 --- a/packages/smooth_app/lib/pages/image/product_image_gallery_other_view.dart +++ b/packages/smooth_app/lib/pages/image/product_image_gallery_other_view.dart @@ -156,6 +156,6 @@ class _RawGridGallery extends StatelessWidget { ImageSize.SMALL, ImageSize.DISPLAY ].firstWhereOrNull( - (ImageSize element) => squareSize < int.parse(element.number), + (ImageSize element) => squareSize <= int.parse(element.number), ); }