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
+        //Probably throws an error, but this is not a big problem when we got a product without a barcode
+        barcode: widget.product.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();
+
+  static const String NOT_FOUND_ASSET = 'assets/product/product_not_found.svg';
+
+  @override
+  Widget build(BuildContext context) => SvgPicture.asset(
+        NOT_FOUND_ASSET,
+        fit: BoxFit.cover,
+      );
+}

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

@@ -0,0 +1,19 @@
+import 'package:flutter/material.dart';
+import 'package:smooth_app/themes/constant_icons.dart';
+
+/// Displays an [IconButton] containing the platform-specific default
+/// back button icon
+class SmoothBackButton extends StatelessWidget {
+  const SmoothBackButton({
+    this.onPressed,
+  });
+
+  final void Function()? onPressed;
+
+  @override
+  Widget build(BuildContext context) => IconButton(
+        icon: Icon(ConstantIcons.instance.getBackIcon()),
+        tooltip: MaterialLocalizations.of(context).backButtonTooltip,
+        onPressed: onPressed ?? () => Navigator.maybePop(context),
+      );
+}

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

@@ -0,0 +1,43 @@
+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';
+
+/// Displays 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: onTap == null
+              ? null
+              : () => onTap!(imageList[index].key, imageList[index].value),
+        ),
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,107 @@
+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);
+
+  /// Displays a [ListTile] inside a [SmoothCard] with a leading [Column]
+  /// containing the specified [imageProvider]
+  SmoothListTileCard.image({
+    required ImageProvider? imageProvider,
+    Widget? title,
+    GestureTapCallback? onTap,
+  }) : this(
+          title: title,
+          onTap: onTap,
+          leading: SmoothProductImageContainer(
+            width: VERY_LARGE_SPACE * 5,
+            height: MEDIUM_SPACE * 5,
+            child: imageProvider != null
+                ? Image(
+                    image: imageProvider,
+                    fit: BoxFit.cover,
+                  )
+                : const PictureNotFound(),
+          ),
+        );
+
+  /// Displays a [ListTile] inside a [SmoothCard] with a leading [Column]
+  /// containing the specified [icon]
+  SmoothListTileCard.icon({
+    Widget? icon,
+    Widget? title,
+    Widget? subtitle,
+    GestureTapCallback? onTap,
+    Key? key,
+  }) : this(
+          title: title,
+          subtitle: subtitle,
+          key: key,
+          onTap: onTap,
+          // we use a Column to have the icon centered vertically
+          leading: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: <Widget>[icon ?? const Icon(Icons.edit)],
+          ),
+        );
+
+  /// Displays a loading card with a shimmering effect
+  SmoothListTileCard.loading()
+      : this(
+          title: Shimmer.fromColors(
+            baseColor: GREY_COLOR,
+            highlightColor: WHITE_COLOR,
+            child: Container(
+                width: VERY_LARGE_SPACE * 8,
+                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: VERY_LARGE_SPACE * 5,
+              height: MEDIUM_SPACE * 5,
+              color: GREY_COLOR,
+            ),
+          ),
+        );
+
+  final Widget? title;
+  final Widget? subtitle;
+  final Widget? leading;
+  final GestureTapCallback? onTap;
+
+  @override
+  Widget build(BuildContext context) => SmoothCard(
+        padding: EdgeInsets.zero,
+        child: InkWell(
+          borderRadius: ROUNDED_BORDER_RADIUS,
+          onTap: onTap,
+          child: Padding(
+            padding: const EdgeInsets.all(5.0),
+            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,23 @@
+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,42 @@ 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,
-                          ),
-                          value: progress.cumulativeBytesLoaded /
-                              progress.expectedTotalBytes!,
-                        ),
-                      ),
-          ),
+      : Image.network(
+          url,
+          fit: BoxFit.contain,
+          loadingBuilder: _loadingBuilder,
         );
+
+  Widget _loadingBuilder(
+      BuildContext _, Widget child, ImageChunkEvent? progress) {
+    if (progress == null) {
+      return child;
+    }
+
+    final double progressValue =
+        progress.cumulativeBytesLoaded / progress.expectedTotalBytes!;
+
+    return Center(
+      child: CircularProgressIndicator(
+        strokeWidth: 2.5,
+        valueColor: const AlwaysStoppedAnimation<Color>(
+          Colors.white,
+        ),
+        value: progressValue,
+      ),
+    );
+  }
 }

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;