feat: 3129 (New PR) Allow to swipe between product images on the full screen image

packages/smooth_app/lib/generic_lib/widgets/images/smooth_images_sliver_grid.dart

@@ -54,7 +54,11 @@ class SmoothImagesSliverGrid extends SmoothImagesView {
                         image: imageProvider,
                         onTap: onTap == null
                             ? null
-                            : () => onTap!(entry.key, entry.value),
+                            : () => onTap!(
+                                  entry.key,
+                                  entry.value,
+                                  null,
+                                ),
                       ),
                     );
             }),

packages/smooth_app/lib/generic_lib/widgets/images/smooth_images_sliver_list.dart

@@ -36,7 +36,11 @@ class SmoothImagesSliverList extends SmoothImagesView {
           ),
           onTap: onTap == null
               ? null
-              : () => onTap!(imageList[index].key, imageList[index].value),
+              : () => onTap!(
+                    imageList[index].key,
+                    imageList[index].value,
+                    index,
+                  ),
         ),
       ),
     );

packages/smooth_app/lib/generic_lib/widgets/images/smooth_images_view.dart

@@ -10,6 +10,6 @@ abstract class SmoothImagesView extends StatelessWidget {
   });
 
   final Map<ProductImageData, ImageProvider?> imagesData;
-  final void Function(ProductImageData, ImageProvider?)? onTap;
+  final void Function(ProductImageData, ImageProvider?, int?)? onTap;
   final bool loading;
 }

packages/smooth_app/lib/pages/product/product_image_gallery_view.dart

@@ -11,7 +11,7 @@ import 'package:smooth_app/generic_lib/widgets/smooth_back_button.dart';
 import 'package:smooth_app/helpers/product_cards_helper.dart';
 import 'package:smooth_app/pages/image_crop_page.dart';
 import 'package:smooth_app/pages/product/common/product_refresher.dart';
-import 'package:smooth_app/pages/product/product_image_viewer.dart';
+import 'package:smooth_app/pages/product/product_image_swipeable_view.dart';
 import 'package:smooth_app/widgets/smooth_app_bar.dart';
 import 'package:smooth_app/widgets/smooth_scaffold.dart';
 
@@ -97,9 +97,17 @@ class _ProductImageGalleryViewState extends State<ProductImageGalleryView> {
               ),
               SmoothImagesSliverList(
                 imagesData: _selectedImages,
-                onTap: (ProductImageData data, _) =>
+                onTap: (
+                  ProductImageData data,
+                  _,
+                  int? initialProductImageCategoryIndex,
+                ) =>
                     TransientFile.isImageAvailable(data, _barcode)
-                        ? _openImage(data)
+                        ? _openImage(
+                            imageData: data,
+                            initialProductImageCategoryIndex:
+                                initialProductImageCategoryIndex ?? 0,
+                          )
                         : _newImage(data),
               ),
             ],
@@ -120,13 +128,16 @@ class _ProductImageGalleryViewState extends State<ProductImageGalleryView> {
         ),
       );
 
-  Future<void> _openImage(ProductImageData imageData) async =>
-      Navigator.push<void>(
+  Future<void> _openImage({
+    required ProductImageData imageData,
+    required int initialProductImageCategoryIndex,
+  }) async =>
+      Navigator.push(
         context,
         MaterialPageRoute<void>(
-          builder: (_) => ProductImageViewer(
+          builder: (_) => ProductImageSwipeableView(
+            initialProductImageCategoryIndex: initialProductImageCategoryIndex,
             product: _product,
-            imageField: imageData.imageField,
           ),
         ),
       );

packages/smooth_app/lib/pages/product/product_image_swipeable_view.dart

@@ -0,0 +1,109 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_gen/gen_l10n/app_localizations.dart';
+import 'package:openfoodfacts/model/Product.dart';
+import 'package:provider/provider.dart';
+import 'package:smooth_app/data_models/product_image_data.dart';
+import 'package:smooth_app/database/local_database.dart';
+import 'package:smooth_app/database/transient_file.dart';
+import 'package:smooth_app/generic_lib/design_constants.dart';
+import 'package:smooth_app/generic_lib/widgets/smooth_back_button.dart';
+import 'package:smooth_app/helpers/product_cards_helper.dart';
+import 'package:smooth_app/pages/product/product_image_viewer.dart';
+import 'package:smooth_app/widgets/smooth_scaffold.dart';
+
+///Widget to display swipeable product images of particular category,
+///Opens product image with [initialProductImageCategoryIndex].
+class ProductImageSwipeableView extends StatefulWidget {
+  const ProductImageSwipeableView({
+    super.key,
+    required this.product,
+    required this.initialProductImageCategoryIndex,
+  });
+  final Product product;
+  final int initialProductImageCategoryIndex;
+  @override
+  State<ProductImageSwipeableView> createState() =>
+      _ProductImageSwipeableViewState();
+}
+
+class _ProductImageSwipeableViewState extends State<ProductImageSwipeableView> {
+  late final LocalDatabase _localDatabase;
+  final ValueNotifier<int> _currentImageDataIndex = ValueNotifier<int>(0);
+  late Map<ProductImageData, ImageProvider?> _selectedImages;
+  late List<ProductImageData> _imageDataList;
+  late PageController _controller;
+  late final Product _initialProduct;
+  late Product _product;
+
+  ImageProvider? _provideImage(ProductImageData imageData) =>
+      TransientFile.getImageProvider(imageData, _barcode);
+
+  String get _barcode => _initialProduct.barcode!;
+
+  @override
+  void initState() {
+    super.initState();
+    _initialProduct = widget.product;
+    _localDatabase = context.read<LocalDatabase>();
+    _localDatabase.upToDate.showInterest(_barcode);
+    _controller = PageController(
+      initialPage: widget.initialProductImageCategoryIndex,
+    );
+  }
+
+  @override
+  void dispose() {
+    _localDatabase.upToDate.loseInterest(_barcode);
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final AppLocalizations appLocalizations = AppLocalizations.of(context);
+    context.watch<LocalDatabase>();
+    _product = _localDatabase.upToDate.getLocalUpToDate(_initialProduct);
+    final List<ProductImageData> allProductImagesData =
+        getProductMainImagesData(
+      _product,
+      appLocalizations,
+      includeOther: false,
+    );
+    _selectedImages = Map<ProductImageData, ImageProvider?>.fromIterables(
+      allProductImagesData,
+      allProductImagesData.map(_provideImage),
+    );
+    _imageDataList = List<ProductImageData>.from(_selectedImages.keys);
+    return SmoothScaffold(
+      appBar: AppBar(
+        backgroundColor: Colors.black,
+        foregroundColor: WHITE_COLOR,
+        elevation: 0,
+        title: ValueListenableBuilder<int>(
+          valueListenable: _currentImageDataIndex,
+          builder: (_, int index, __) {
+            return Text(
+              _imageDataList[index].title,
+            );
+          },
+        ),
+        leading: SmoothBackButton(
+          iconColor: Colors.white,
+          onPressed: () => Navigator.maybePop(context),
+        ),
+      ),
+      body: PageView.builder(
+        onPageChanged: (int index) {
+          _currentImageDataIndex.value = index;
+        },
+        controller: _controller,
+        itemCount: _selectedImages.keys.length,
+        itemBuilder: (BuildContext context, int index) {
+          return ProductImageViewer(
+            product: widget.product,
+            imageField: _imageDataList[index].imageField,
+          );
+        },
+      ),
+    );
+  }
+}

packages/smooth_app/lib/pages/product/product_image_viewer.dart

@@ -12,9 +12,8 @@ import 'package:smooth_app/data_models/product_image_data.dart';
 import 'package:smooth_app/database/dao_int.dart';
 import 'package:smooth_app/database/local_database.dart';
 import 'package:smooth_app/database/transient_file.dart';
-import 'package:smooth_app/generic_lib/design_constants.dart';
 import 'package:smooth_app/generic_lib/loading_dialog.dart';
-import 'package:smooth_app/generic_lib/widgets/smooth_back_button.dart';
+import 'package:smooth_app/generic_lib/widgets/picture_not_found.dart';
 import 'package:smooth_app/helpers/database_helper.dart';
 import 'package:smooth_app/helpers/product_cards_helper.dart';
 import 'package:smooth_app/pages/image_crop_page.dart';
@@ -75,40 +74,37 @@ class _ProductImageViewerState extends State<ProductImageViewer> {
       extendBodyBehindAppBar: true,
       backgroundColor: Colors.black,
       floatingActionButton: FloatingActionButton.extended(
-        label: Text(appLocalizations.edit_photo_button_label),
-        icon: const Icon(Icons.edit),
+        label: Text(
+          imageProvider == null
+              ? appLocalizations.add
+              : appLocalizations.edit_photo_button_label,
+        ),
+        icon: Icon(
+          imageProvider == null ? Icons.add : Icons.edit,
+        ),
         backgroundColor: Theme.of(context).colorScheme.primary,
         onPressed: () async => _editImage(),
       ),
-      appBar: AppBar(
-        backgroundColor: Colors.black,
-        foregroundColor: WHITE_COLOR,
-        elevation: 0,
-        title: Text(_imageData.title),
-        leading: SmoothBackButton(
-          iconColor: Colors.white,
-          onPressed: () => Navigator.maybePop(context),
-        ),
-      ),
       body: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: <Widget>[
           ConstrainedBox(
             constraints: BoxConstraints.tight(
               Size(double.infinity, MediaQuery.of(context).size.height / 2),
             ),
-            child: PhotoView(
-              minScale: 0.2,
-              imageProvider:
-                  imageProvider, // TODO(monsieurtanuki): what if null?
-              heroAttributes: PhotoViewHeroAttributes(
-                tag: imageProvider ??
-                    Object(), // TODO(monsieurtanuki): what if null?
-              ),
-              backgroundDecoration: const BoxDecoration(
-                color: Colors.black,
-              ),
-            ),
+            // TODO(monsieurtanuki): what if null?
+            child: imageProvider == null
+                ? const PictureNotFound()
+                : PhotoView(
+                    minScale: 0.2,
+                    imageProvider: imageProvider,
+                    heroAttributes: PhotoViewHeroAttributes(
+                      tag: imageProvider,
+                    ),
+                    backgroundDecoration: const BoxDecoration(
+                      color: Colors.black,
+                    ),
+                  ),
           ),
         ],
       ),