feat: image list gallery

packages/smooth_app/lib/cards/data_cards/image_upload_card.dart

@@ -48,8 +48,8 @@ class _ImageUploadCardState extends State<ImageUploadCard> {
       }
       final bool isUploaded = await uploadCapturedPicture(
         context,
-        barcode: widget.product
-            .barcode!, //Probably throws an error, but this is not a big problem when we got a product without a barcode
+        barcode: widget.product.barcode!,
+        //Probably throws an error, but this is not a big problem when we got a product without a barcode
         imageField: widget.productImageData.imageField,
         imageUri: croppedImageFile.uri,
       );
@@ -131,9 +131,7 @@ class _ImageUploadCardState extends State<ImageUploadCard> {
             context,
             MaterialPageRoute<bool>(
               builder: (BuildContext context) => ProductImageGalleryView(
-                productImageData: widget.productImageData,
-                allProductImagesData: widget.allProductImagesData,
-                title: widget.productImageData.title,
+                imagesData: widget.allProductImagesData,
                 barcode: widget.product.barcode,
               ),
             ),

packages/smooth_app/lib/cards/product_cards/product_image_carousel.dart

@@ -20,7 +20,7 @@ class ProductImageCarousel extends StatelessWidget {
   Widget build(BuildContext context) {
     final AppLocalizations appLocalizations = AppLocalizations.of(context);
     final List<ProductImageData> allProductImagesData =
-        getAllProductImagesData(product, appLocalizations);
+        getProductMainImagesData(product, appLocalizations);
 
     return SizedBox(
       height: height,

packages/smooth_app/lib/generic_lib/widgets/picture_not_found.dart

@@ -0,0 +1,14 @@
+import 'package:flutter/widgets.dart';
+import 'package:flutter_svg/svg.dart';
+
+class PictureNotFound extends StatelessWidget {
+  const PictureNotFound();
+
+  @override
+  Widget build(BuildContext context) {
+    return SvgPicture.asset(
+      'assets/product/product_not_found.svg',
+      fit: BoxFit.cover,
+    );
+  }
+}

packages/smooth_app/lib/generic_lib/widgets/smooth_image_list.dart

@@ -0,0 +1,45 @@
+import 'package:flutter/material.dart';
+import 'package:smooth_app/data_models/product_image_data.dart';
+import 'package:smooth_app/generic_lib/widgets/smooth_list_tile_card.dart';
+import 'package:smooth_app/generic_lib/widgets/smooth_list_view.dart';
+
+/// Represents a list of [ProductImageData]
+class SmoothImageList extends StatelessWidget {
+  const SmoothImageList({
+    required this.imagesData,
+    this.onTap,
+    this.loading = false,
+  });
+
+  final Map<ProductImageData, ImageProvider?> imagesData;
+  final void Function(ProductImageData, ImageProvider?)? onTap;
+  final bool loading;
+
+  @override
+  Widget build(BuildContext context) {
+    final ThemeData themeData = Theme.of(context);
+    final List<MapEntry<ProductImageData, ImageProvider?>> imageList =
+        imagesData.entries.toList();
+    final int count = imageList.length;
+
+    return Scrollbar(
+      child: SmoothListView.builder(
+        loading: loading,
+        itemCount: count,
+        loadingWidget: (_, __) => SmoothListTileCard.loading(),
+        itemBuilder: (_, int index) => SmoothListTileCard.image(
+          imageProvider: imageList[index].value,
+          title: Text(
+            imageList[index].key.title,
+            style: themeData.textTheme.headline4,
+          ),
+          onTap: () {
+            if (onTap != null) {
+              onTap!(imageList[index].key, imageList[index].value);
+            }
+          },
+        ),
+      ),
+    );
+  }
+}

packages/smooth_app/lib/generic_lib/widgets/smooth_list_tile_card.dart

@@ -0,0 +1,93 @@
+import 'package:flutter/material.dart';
+import 'package:shimmer/shimmer.dart';
+import 'package:smooth_app/generic_lib/design_constants.dart';
+import 'package:smooth_app/generic_lib/widgets/picture_not_found.dart';
+import 'package:smooth_app/generic_lib/widgets/smooth_card.dart';
+import 'package:smooth_app/generic_lib/widgets/smooth_product_image_container.dart';
+import 'package:smooth_app/themes/constant_icons.dart';
+
+class SmoothListTileCard extends StatelessWidget {
+  const SmoothListTileCard({
+    required final this.title,
+    this.subtitle,
+    this.onTap,
+    this.leading,
+    Key? key,
+  }) : super(key: key);
+
+  SmoothListTileCard.image({
+    Widget? title,
+    required ImageProvider? imageProvider,
+    GestureTapCallback? onTap,
+  }) : this(
+          title: title,
+          leading: SmoothProductImageContainer(
+            width: 100,
+            child: imageProvider != null
+                ? Image(
+                    image: imageProvider,
+                    fit: BoxFit.cover,
+                  )
+                : const PictureNotFound(),
+          ),
+          onTap: onTap,
+        );
+
+  SmoothListTileCard.loading()
+      : this(
+          title: Shimmer.fromColors(
+            baseColor: GREY_COLOR,
+            highlightColor: WHITE_COLOR,
+            child: Container(
+                width: 200,
+                height: 10,
+                decoration: const BoxDecoration(
+                  color: GREY_COLOR,
+                  borderRadius: CIRCULAR_BORDER_RADIUS,
+                )),
+          ),
+          leading: Shimmer.fromColors(
+            baseColor: GREY_COLOR,
+            highlightColor: WHITE_COLOR,
+            child: const SmoothProductImageContainer(
+              width: 100,
+              height: 50,
+              color: GREY_COLOR,
+            ),
+          ),
+        );
+
+  SmoothListTileCard.icon({
+    Widget? icon,
+    Widget? title,
+    Widget? subtitle,
+    GestureTapCallback? onTap,
+    Key? key,
+  }) : this(
+          title: title,
+          subtitle: subtitle,
+          // we use a Column to have the icon centered vertically
+          leading: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: <Widget>[icon ?? const Icon(Icons.edit)],
+          ),
+          key: key,
+          onTap: onTap,
+        );
+
+  final Widget? title;
+  final Widget? subtitle;
+  final Widget? leading;
+  final GestureTapCallback? onTap;
+
+  @override
+  Widget build(BuildContext context) => SmoothCard(
+        child: ListTile(
+          onTap: onTap,
+          title: title,
+          subtitle: subtitle,
+          leading: leading,
+          trailing: Icon(ConstantIcons.instance.getForwardIcon()),
+        ),
+      );
+}

packages/smooth_app/lib/generic_lib/widgets/smooth_list_view.dart

@@ -0,0 +1,24 @@
+import 'package:flutter/widgets.dart';
+
+class SmoothListView extends ListView {
+  /// Represents a ListView that can be show progress by displaying a
+  /// [loadingWidget] at the end of the list.
+  ///
+  /// [loading] controls the display of the [loadingWidget] at the end of
+  /// the list.
+  ///
+  SmoothListView.builder({
+    required IndexedWidgetBuilder itemBuilder,
+    required int itemCount,
+    IndexedWidgetBuilder? loadingWidget,
+    bool loading = false,
+  })  : assert(loading == false || loadingWidget != null),
+        super.builder(
+          itemCount: loading ? itemCount + 1 : itemCount,
+          itemBuilder: (BuildContext context, int index) =>
+              loading && (index == itemCount)
+                  // Render a loading card as the last card
+                  ? loadingWidget!(context, index)
+                  : itemBuilder(context, index),
+        );
+}

packages/smooth_app/lib/generic_lib/widgets/smooth_product_image.dart

@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_svg/svg.dart';
 import 'package:openfoodfacts/model/Product.dart';
+import 'package:smooth_app/generic_lib/widgets/picture_not_found.dart';
 import 'package:smooth_app/generic_lib/widgets/smooth_product_image_container.dart';
 
 /// Main product image on a product card.
@@ -17,49 +17,35 @@ class SmoothProductImage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    Widget? result;
-    result = _buildFromUrl(product.imageFrontSmallUrl);
-    if (result != null) {
-      return result;
-    }
-    result = _buildFromUrl(product.imageFrontUrl);
-    if (result != null) {
-      return result;
-    }
+    final Widget child = _buildFromUrl(product.imageFrontSmallUrl) ??
+        _buildFromUrl(product.imageFrontUrl) ??
+        const Center(child: PictureNotFound());
+
     return SmoothProductImageContainer(
       width: width,
       height: height,
-      child: Center(
-        child: SvgPicture.asset(
-          'assets/product/product_not_found.svg',
-          fit: BoxFit.cover,
-        ),
-      ),
+      child: child,
     );
   }
 
-  Widget? _buildFromUrl(final String? url) => url == null || url.isEmpty
+  Image? _buildFromUrl(final String? url) => url == null || url.isEmpty
       ? null
-      : SmoothProductImageContainer(
-          width: width,
-          height: height,
-          child: Image.network(
-            url,
-            fit: BoxFit.contain,
-            loadingBuilder: (BuildContext context, Widget child,
-                    ImageChunkEvent? progress) =>
-                progress == null
-                    ? child
-                    : Center(
-                        child: CircularProgressIndicator(
-                          strokeWidth: 2.5,
-                          valueColor: const AlwaysStoppedAnimation<Color>(
-                            Colors.white,
+      : Image.network(
+          url,
+          fit: BoxFit.contain,
+          loadingBuilder:
+              (BuildContext _, Widget child, ImageChunkEvent? progress) =>
+                  progress == null
+                      ? child
+                      : Center(
+                          child: CircularProgressIndicator(
+                            strokeWidth: 2.5,
+                            valueColor: const AlwaysStoppedAnimation<Color>(
+                              Colors.white,
+                            ),
+                            value: progress.cumulativeBytesLoaded /
+                                progress.expectedTotalBytes!,
                           ),
-                          value: progress.cumulativeBytesLoaded /
-                              progress.expectedTotalBytes!,
                         ),
-                      ),
-          ),
         );
 }

packages/smooth_app/lib/generic_lib/widgets/smooth_product_image_container.dart

@@ -4,21 +4,24 @@ import 'package:smooth_app/generic_lib/design_constants.dart';
 /// Container to display the main product image on a product card.
 class SmoothProductImageContainer extends StatelessWidget {
   const SmoothProductImageContainer({
-    required this.height,
-    required this.width,
-    required this.child,
+    this.child,
+    this.height,
+    this.width,
+    this.color,
   });
 
-  final double height;
-  final double width;
-  final Widget child;
+  final Widget? child;
+  final double? height;
+  final double? width;
+  final Color? color;
 
   @override
   Widget build(BuildContext context) => ClipRRect(
         borderRadius: ROUNDED_BORDER_RADIUS,
-        child: SizedBox(
+        child: Container(
           width: width,
           height: height,
+          color: color,
           child: child,
         ),
       );

packages/smooth_app/lib/helpers/collections_helper.dart

@@ -77,17 +77,6 @@ extension SetExtensions<T> on Set<T> {
   }
 }
 
-extension IterableExtensions<T> on Iterable<T> {
-  T? firstWhereOrNull(bool Function(T element) test) {
-    for (final T element in this) {
-      if (test(element)) {
-        return element;
-      }
-    }
-    return null;
-  }
-}
-
 extension MapStringKeyExtensions<V> on Map<String, V> {
   String? keyStartingWith(String key, {bool ignoreCase = false}) {
     final String searchKey;

packages/smooth_app/lib/helpers/product_cards_helper.dart

@@ -89,9 +89,11 @@ Widget addPanelButton(
       ),
     );
 
-List<ProductImageData> getAllProductImagesData(
-    Product product, AppLocalizations appLocalizations) {
-  final List<ProductImageData> allProductImagesData = <ProductImageData>[
+List<ProductImageData> getProductMainImagesData(
+  Product product,
+  AppLocalizations appLocalizations,
+) {
+  return <ProductImageData>[
     ProductImageData(
       imageField: ImageField.FRONT,
       imageUrl: product.imageFrontUrl,
@@ -123,5 +125,4 @@ List<ProductImageData> getAllProductImagesData(
       buttonText: appLocalizations.more_photos,
     ),
   ];
-  return allProductImagesData;
 }

packages/smooth_app/lib/pages/product/common/product_refresher.dart

@@ -80,8 +80,8 @@ class ProductRefresher {
     await showDialog<void>(
       context: context,
       builder: (BuildContext context) => SmoothAlertDialog(
-        body: Text(appLocalizations
-            .nutrition_page_update_done), // TODO(monsieurtanuki): title as method parameter
+        body: Text(appLocalizations.nutrition_page_update_done),
+        // TODO(monsieurtanuki): title as method parameter
         positiveAction: SmoothActionButton(
           text: appLocalizations.okay,
           onPressed: () => Navigator.of(context).pop(),
@@ -128,6 +128,7 @@ class ProductRefresher {
     return const _MetaProductRefresher.error(null);
   }
 
+  /// Returns `true` if the fetch is successful.
   Future<bool> fetchAndRefresh({
     required final BuildContext context,
     required final LocalDatabase localDatabase,
@@ -177,6 +178,7 @@ class ProductRefresher {
 
 class _MetaProductRefresher {
   const _MetaProductRefresher.error(this.error) : product = null;
+
   const _MetaProductRefresher.product(this.product) : error = null;
 
   final String? error;