feat: #2396 - new widget SmoothProductCardTemplate

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

@@ -77,9 +77,8 @@ class SmoothProductCardFound extends StatelessWidget {
         child: Ink(
           decoration: BoxDecoration(
             borderRadius: ROUNDED_BORDER_RADIUS,
-            color: Theme.of(context).brightness == Brightness.light
-                ? Colors.white
-                : Colors.black,
+            color:
+                backgroundColor ?? (isDarkMode ? Colors.black : Colors.white),
           ),
           child: SmoothCard(
             elevation: elevation,

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

@@ -0,0 +1,80 @@
+import 'package:flutter/material.dart';
+import 'package:smooth_app/cards/product_cards/smooth_product_card_found.dart';
+import 'package:smooth_app/generic_lib/design_constants.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/helpers/ui_helpers.dart';
+
+/// Empty template for a product card display.
+///
+/// Based on the "real" [SmoothProductCardFound].
+class SmoothProductCardTemplate extends StatelessWidget {
+  const SmoothProductCardTemplate();
+
+  @override
+  Widget build(BuildContext context) {
+    final Size screenSize = MediaQuery.of(context).size;
+    final ThemeData themeData = Theme.of(context);
+    final bool isDarkMode = themeData.colorScheme.brightness == Brightness.dark;
+    final Color itemColor = isDarkMode ? PRIMARY_GREY_COLOR : LIGHT_GREY_COLOR;
+    final Color backgroundColor = isDarkMode ? Colors.black : Colors.white;
+    final double iconSize = IconWidgetSizer.getIconSizeFromContext(context);
+    final Widget textWidget = Container(
+      width: screenSize.width * .4,
+      height: screenSize.width * .05,
+      color: itemColor,
+    );
+    // In the actual display, it's a 240x130 svg resized with iconSize
+    final Widget svgWidget = Container(
+      height: iconSize * .9,
+      width: 240 * iconSize / 130,
+      color: itemColor,
+    );
+    return Container(
+      decoration: BoxDecoration(
+        borderRadius: ROUNDED_BORDER_RADIUS,
+        color: backgroundColor,
+      ),
+      child: SmoothCard(
+        elevation: SmoothProductCardFound.elevation,
+        color: Colors.transparent,
+        padding: const EdgeInsets.all(VERY_SMALL_SPACE),
+        child: Row(
+          children: <Widget>[
+            SmoothProductImageContainer(
+              width: screenSize.width * 0.20,
+              height: screenSize.width * 0.20,
+              child: Container(color: itemColor),
+            ),
+            const Padding(padding: EdgeInsets.only(left: VERY_SMALL_SPACE)),
+            Expanded(
+              child: SizedBox(
+                height: screenSize.width * 0.2,
+                child: Column(
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: <Widget>[
+                    textWidget,
+                    textWidget,
+                    textWidget,
+                  ],
+                ),
+              ),
+            ),
+            const Padding(padding: EdgeInsets.only(left: VERY_SMALL_SPACE)),
+            Padding(
+              padding: const EdgeInsets.all(VERY_SMALL_SPACE),
+              child: Column(
+                children: <Widget>[
+                  svgWidget,
+                  Container(height: iconSize * .2),
+                  svgWidget,
+                ],
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

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

@@ -1,8 +1,9 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/svg.dart';
 import 'package:openfoodfacts/model/Product.dart';
-import 'package:smooth_app/generic_lib/design_constants.dart';
+import 'package:smooth_app/generic_lib/widgets/smooth_product_image_container.dart';
 
+/// Main product image on a product card.
 class SmoothProductImage extends StatelessWidget {
   const SmoothProductImage({
     required this.product,
@@ -25,51 +26,40 @@ class SmoothProductImage extends StatelessWidget {
     if (result != null) {
       return result;
     }
-    return ClipRRect(
-      borderRadius: ROUNDED_BORDER_RADIUS,
-      child: FittedBox(
-        child: Container(
-          width: width,
-          height: height,
-          decoration: const BoxDecoration(
-            borderRadius: ROUNDED_BORDER_RADIUS,
-          ),
-          child: Center(
-            child: SvgPicture.asset(
-              'assets/product/product_not_found.svg',
-              fit: BoxFit.cover,
-            ),
-          ),
+    return SmoothProductImageContainer(
+      width: width,
+      height: height,
+      child: Center(
+        child: SvgPicture.asset(
+          'assets/product/product_not_found.svg',
+          fit: BoxFit.cover,
         ),
       ),
     );
   }
 
   Widget? _buildFromUrl(final String? url) => url == null || url.isEmpty
       ? null
-      : ClipRRect(
-          borderRadius: ROUNDED_BORDER_RADIUS,
-          child: SizedBox(
-            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!,
+      : 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!,
                         ),
-            ),
+                      ),
           ),
         );
 }

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

@@ -0,0 +1,25 @@
+import 'package:flutter/material.dart';
+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,
+  });
+
+  final double height;
+  final double width;
+  final Widget child;
+
+  @override
+  Widget build(BuildContext context) => ClipRRect(
+        borderRadius: ROUNDED_BORDER_RADIUS,
+        child: SizedBox(
+          width: width,
+          height: height,
+          child: child,
+        ),
+      );
+}