diff --git a/packages/smooth_app/lib/cards/product_cards/smooth_product_card_found.dart b/packages/smooth_app/lib/cards/product_cards/smooth_product_card_found.dart index 05b014f6c78..8c3f3838160 100644 --- a/packages/smooth_app/lib/cards/product_cards/smooth_product_card_found.dart +++ b/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, diff --git a/packages/smooth_app/lib/cards/product_cards/smooth_product_card_template.dart b/packages/smooth_app/lib/cards/product_cards/smooth_product_card_template.dart new file mode 100644 index 00000000000..c1df29390a1 --- /dev/null +++ b/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: [ + 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: [ + textWidget, + textWidget, + textWidget, + ], + ), + ), + ), + const Padding(padding: EdgeInsets.only(left: VERY_SMALL_SPACE)), + Padding( + padding: const EdgeInsets.all(VERY_SMALL_SPACE), + child: Column( + children: [ + svgWidget, + Container(height: iconSize * .2), + svgWidget, + ], + ), + ), + ], + ), + ), + ); + } +} diff --git a/packages/smooth_app/lib/generic_lib/widgets/smooth_product_image.dart b/packages/smooth_app/lib/generic_lib/widgets/smooth_product_image.dart index 44123e68d29..5b86914093b 100644 --- a/packages/smooth_app/lib/generic_lib/widgets/smooth_product_image.dart +++ b/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,21 +26,13 @@ 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, ), ), ); @@ -47,29 +40,26 @@ class SmoothProductImage extends StatelessWidget { 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( - 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( + Colors.white, ), + value: progress.cumulativeBytesLoaded / + progress.expectedTotalBytes!, ), - ), + ), ), ); } diff --git a/packages/smooth_app/lib/generic_lib/widgets/smooth_product_image_container.dart b/packages/smooth_app/lib/generic_lib/widgets/smooth_product_image_container.dart new file mode 100644 index 00000000000..a7c451fed27 --- /dev/null +++ b/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, + ), + ); +}