feat: Common layout for welcome / product not found / error cards (#2955)

g123k · monsieurtanuki · teolemon · web-flow · commit 77569bfb13f9 · 2022-09-07T22:02:38.000+02:00
* Common layout for welcome / product not found / error cards

* Change the opacity for the main/welcome card

* Update packages/smooth_app/lib/widgets/smooth_product_carousel.dart

Co-authored-by: monsieurtanuki &lt;fabrice_fontaine@hotmail.com&gt;

* SmoothBaseCard move to a better named file + some doc about this Widget

* Fix build issue

Co-authored-by: monsieurtanuki &lt;fabrice_fontaine@hotmail.com&gt;
Co-authored-by: Pierre Slamich &lt;pierre@openfoodfacts.org&gt;
diff --git a/packages/smooth_app/lib/cards/product_cards/smooth_product_base_card.dart b/packages/smooth_app/lib/cards/product_cards/smooth_product_base_card.dart
@@ -0,0 +1,49 @@
+import 'package:flutter/material.dart';
+import 'package:smooth_app/generic_lib/widgets/smooth_card.dart';
+
+/// A common Widget for carrousel item cards.
+/// It allows to have the correct width/height and also a scale down feature,
+/// in the case where the content is too big.
+///
+/// An optional [backgroundColorOpacity] can be used (mainly for the "main" card).
+class SmoothProductBaseCard extends StatelessWidget {
+  const SmoothProductBaseCard({
+    required this.child,
+    this.backgroundColorOpacity,
+    super.key,
+  });
+
+  final Widget child;
+  final double? backgroundColorOpacity;
+
+  @override
+  Widget build(BuildContext context) {
+    final ThemeData themeData = Theme.of(context);
+
+    return SizedBox.expand(
+      child: LayoutBuilder(
+        builder: (BuildContext context, BoxConstraints constraints) {
+          final EdgeInsets padding = EdgeInsets.symmetric(
+            vertical: constraints.maxHeight * 0.05,
+            horizontal: constraints.maxWidth * 0.05,
+          );
+
+          return SmoothCard(
+            color: themeData.brightness == Brightness.light
+                ? Colors.white.withOpacity(backgroundColorOpacity ?? 1.0)
+                : Colors.black.withOpacity(backgroundColorOpacity ?? 1.0),
+            padding: padding,
+            child: FittedBox(
+              fit: BoxFit.scaleDown,
+              child: SizedBox(
+                width: constraints.maxWidth - padding.horizontal,
+                height: constraints.maxHeight - padding.vertical,
+                child: child,
+              ),
+            ),
+          );
+        },
+      ),
+    );
+  }
+}
diff --git a/packages/smooth_app/lib/cards/product_cards/smooth_product_card_error.dart b/packages/smooth_app/lib/cards/product_cards/smooth_product_card_error.dart
@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:provider/provider.dart';
+import 'package:smooth_app/cards/product_cards/smooth_product_base_card.dart';
 import 'package:smooth_app/data_models/continuous_scan_model.dart';
 import 'package:smooth_app/generic_lib/design_constants.dart';
 import 'package:smooth_app/pages/product/common/product_dialog_helper.dart';
@@ -19,32 +20,22 @@ class SmoothProductCardError extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final AppLocalizations appLocalizations = AppLocalizations.of(context);
-    final ThemeData themeData = Theme.of(context);
 
-    return Container(
-      decoration: BoxDecoration(
-        color: themeData.brightness == Brightness.light
-            ? Colors.white
-            : Colors.black,
-        borderRadius: ROUNDED_BORDER_RADIUS,
-      ),
+    return SmoothProductBaseCard(
       child: Column(
         mainAxisSize: MainAxisSize.max,
         mainAxisAlignment: MainAxisAlignment.center,
         children: <Widget>[
-          Padding(
-            padding: const EdgeInsets.all(SMALL_SPACE),
-            child: SvgPicture.asset(
-              'assets/misc/error.svg',
-              width: MINIMUM_TOUCH_SIZE * 2,
-            ),
+          SvgPicture.asset(
+            'assets/misc/error.svg',
+            width: MINIMUM_TOUCH_SIZE * 2,
+          ),
+          const SizedBox(
+            height: SMALL_SPACE,
           ),
-          Row(
-            mainAxisSize: MainAxisSize.max,
-            mainAxisAlignment: MainAxisAlignment.center,
-            children: <Widget>[
-              Text(barcode, style: Theme.of(context).textTheme.subtitle1),
-            ],
+          Text(
+            barcode,
+            style: Theme.of(context).textTheme.subtitle1,
           ),
           const SizedBox(
             height: MEDIUM_SPACE,
diff --git a/packages/smooth_app/lib/cards/product_cards/smooth_product_card_not_found.dart b/packages/smooth_app/lib/cards/product_cards/smooth_product_card_not_found.dart
@@ -1,82 +1,79 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
+import 'package:smooth_app/cards/product_cards/smooth_product_base_card.dart';
 import 'package:smooth_app/generic_lib/buttons/smooth_large_button_with_icon.dart';
 import 'package:smooth_app/generic_lib/design_constants.dart';
-import 'package:smooth_app/generic_lib/widgets/smooth_card.dart';
 import 'package:smooth_app/pages/product/add_new_product_page.dart';
 
 class SmoothProductCardNotFound extends StatelessWidget {
-  const SmoothProductCardNotFound({
+  SmoothProductCardNotFound({
     required this.barcode,
     this.callback,
-    this.elevation = 0.0,
-  });
+  }) : assert(barcode.isNotEmpty);
 
-  final Function(String?)? callback;
-  final double elevation;
+  final Future<void> Function(String?)? callback;
   final String barcode;
 
   @override
   Widget build(BuildContext context) {
     final AppLocalizations appLocalizations = AppLocalizations.of(context);
-    final ThemeData themeData = Theme.of(context);
+    final TextTheme textTheme = Theme.of(context).textTheme;
 
-    return LayoutBuilder(
-        builder: (BuildContext context, BoxConstraints constraints) {
-      return SmoothCard(
-        elevation: elevation,
-        color: themeData.brightness == Brightness.light
-            ? Colors.white
-            : Colors.black,
-        child: Padding(
-          padding: EdgeInsets.symmetric(
-            vertical: constraints.maxHeight * 0.10,
-            horizontal: constraints.maxWidth * 0.05,
-          ),
-          child: Column(
-            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-            crossAxisAlignment: CrossAxisAlignment.center,
-            children: <Widget>[
-              Text(
-                appLocalizations.missing_product,
-                textAlign: TextAlign.center,
-                style: Theme.of(context).textTheme.headline2,
-              ),
-              Text(
-                appLocalizations.add_product_take_photos,
-                textAlign: TextAlign.center,
-                style: Theme.of(context).textTheme.bodyText2,
-              ),
-              Text(
-                '(${appLocalizations.barcode_barcode(barcode)})',
-                textAlign: TextAlign.center,
-                style: Theme.of(context).textTheme.bodyText2,
-              ),
-              Padding(
-                padding: const EdgeInsetsDirectional.only(top: LARGE_SPACE),
-                child: SmoothLargeButtonWithIcon(
-                  text: appLocalizations.add_product_information_button_label,
-                  icon: Icons.add,
-                  padding: const EdgeInsets.symmetric(vertical: LARGE_SPACE),
-                  onPressed: () async {
-                    // TODO(monsieurtanuki): careful, waiting for pop'ed value
-                    final String? result = await Navigator.push<String>(
-                      context,
-                      MaterialPageRoute<String>(
-                        builder: (BuildContext context) =>
-                            AddNewProductPage(barcode),
-                      ),
-                    );
-                    if (callback != null) {
-                      await callback!(result);
-                    }
-                  },
+    return SmoothProductBaseCard(
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+        crossAxisAlignment: CrossAxisAlignment.center,
+        children: <Widget>[
+          RichText(
+            textAlign: TextAlign.center,
+            text: TextSpan(
+              style: textTheme.headline5,
+              children: <InlineSpan>[
+                TextSpan(
+                  text: appLocalizations.missing_product,
+                  style: textTheme.headline2,
+                ),
+                const WidgetSpan(
+                  alignment: PlaceholderAlignment.belowBaseline,
+                  baseline: TextBaseline.alphabetic,
+                  child: SizedBox(
+                    height: LARGE_SPACE,
+                  ),
+                ),
+                TextSpan(
+                  text: '\n${appLocalizations.add_product_take_photos}\n',
+                  style: textTheme.bodyText2,
                 ),
-              ),
-            ],
+                TextSpan(
+                  text: '(${appLocalizations.barcode_barcode(barcode)})',
+                  style: textTheme.bodyText2,
+                ),
+              ],
+            ),
+          ),
+          Padding(
+            padding: const EdgeInsetsDirectional.only(top: LARGE_SPACE),
+            child: SmoothLargeButtonWithIcon(
+              text: appLocalizations.add_product_information_button_label,
+              icon: Icons.add,
+              padding: const EdgeInsets.symmetric(vertical: LARGE_SPACE),
+              onPressed: () async {
+                // TODO(monsieurtanuki): careful, waiting for pop'ed value
+                final String? result = await Navigator.push<String>(
+                  context,
+                  MaterialPageRoute<String>(
+                    builder: (BuildContext context) =>
+                        AddNewProductPage(barcode),
+                  ),
+                );
+                if (callback != null) {
+                  await callback!(result);
+                }
+              },
+            ),
           ),
-        ),
-      );
-    });
+        ],
+      ),
+    );
   }
 }
diff --git a/packages/smooth_app/lib/pages/product/common/product_dialog_helper.dart b/packages/smooth_app/lib/pages/product/common/product_dialog_helper.dart
@@ -4,6 +4,7 @@ import 'package:openfoodfacts/openfoodfacts.dart';
 import 'package:smooth_app/data_models/fetched_product.dart';
 import 'package:smooth_app/database/dao_product.dart';
 import 'package:smooth_app/database/local_database.dart';
+import 'package:smooth_app/generic_lib/design_constants.dart';
 import 'package:smooth_app/generic_lib/dialogs/smooth_alert_dialog.dart';
 import 'package:smooth_app/generic_lib/loading_dialog.dart';
 import 'package:smooth_app/pages/product/add_new_product_page.dart';
@@ -70,9 +71,12 @@ class ProductDialogHelper {
         },
       );
 
-  static Widget getErrorMessage(final String message) => ListTile(
-        leading: const Icon(Icons.error_outline, color: Colors.red),
-        title: Text(message),
+  static Widget getErrorMessage(final String message) => Row(
+        children: <Widget>[
+          const Icon(Icons.error_outline, color: Colors.red),
+          const SizedBox(width: SMALL_SPACE),
+          Expanded(child: Text(message))
+        ],
       );
 
   void _openErrorMessage(final String message) => showDialog<void>(
diff --git a/packages/smooth_app/lib/widgets/smooth_product_carousel.dart b/packages/smooth_app/lib/widgets/smooth_product_carousel.dart
@@ -6,6 +6,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:provider/provider.dart';
+import 'package:smooth_app/cards/product_cards/smooth_product_base_card.dart';
 import 'package:smooth_app/cards/product_cards/smooth_product_card_error.dart';
 import 'package:smooth_app/cards/product_cards/smooth_product_card_loading.dart';
 import 'package:smooth_app/cards/product_cards/smooth_product_card_not_found.dart';
@@ -14,7 +15,6 @@ import 'package:smooth_app/data_models/continuous_scan_model.dart';
 import 'package:smooth_app/data_models/tagline.dart';
 import 'package:smooth_app/data_models/user_preferences.dart';
 import 'package:smooth_app/generic_lib/design_constants.dart';
-import 'package:smooth_app/generic_lib/widgets/smooth_card.dart';
 import 'package:smooth_app/pages/inherited_data_manager.dart';
 import 'package:smooth_app/pages/scan/scan_product_card_loader.dart';
 import 'package:smooth_app/pages/scan/search_page.dart';
@@ -141,7 +141,7 @@ class _SmoothProductCarouselState extends State<SmoothProductCarousel> {
   /// instead in the meanwhile.
   Widget _getWidget(final int index) {
     if (index >= barcodes.length) {
-      return Container();
+      return EMPTY_WIDGET;
     }
     final String barcode = barcodes[index];
     switch (_model.getBarcodeState(barcode)!) {
@@ -188,54 +188,47 @@ class SearchCard extends StatelessWidget {
     final AppLocalizations localizations = AppLocalizations.of(context);
     final ThemeData themeData = Theme.of(context);
     final bool isDarkmode = themeData.brightness == Brightness.dark;
-    return SmoothCard(
-      color: Theme.of(context).brightness == Brightness.light
-          ? Colors.white.withOpacity(OPACITY)
-          : Colors.black.withOpacity(OPACITY),
-      elevation: 0,
-      padding: SmoothProductCarousel.carouselItemHorizontalPadding,
-      child: SizedBox(
-        height: height,
-        child: Column(
-          mainAxisAlignment: MainAxisAlignment.center,
-          crossAxisAlignment: CrossAxisAlignment.stretch,
-          children: <Widget>[
-            SvgPicture.asset(
-              Theme.of(context).brightness == Brightness.light
-                  ? 'assets/app/release_icon_light_transparent_no_border.svg'
-                  : 'assets/app/release_icon_dark_transparent_no_border.svg',
-              width: height * 0.2,
-              height: height * 0.2,
-            ),
-            AutoSizeText(
-              localizations.welcomeToOpenFoodFacts,
-              textAlign: TextAlign.center,
-              style: const TextStyle(
-                fontSize: 26.0,
-                fontWeight: FontWeight.bold,
-                height: 1.25,
-              ),
-              maxLines: 2,
-            ),
-            SizedBox(
-              height: height * 0.05,
-            ),
-            const Expanded(
-              child: _SearchCardTagLine(),
-            ),
-            SearchField(
-              onFocus: () => _openSearchPage(context),
-              readOnly: true,
-              showClearButton: false,
-              backgroundColor: isDarkmode
-                  ? Colors.white10
-                  : const Color.fromARGB(255, 240, 240, 240)
-                      .withOpacity(OPACITY),
-              foregroundColor:
-                  themeData.colorScheme.onSurface.withOpacity(OPACITY),
+
+    return SmoothProductBaseCard(
+      backgroundColorOpacity: OPACITY,
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        children: <Widget>[
+          SvgPicture.asset(
+            Theme.of(context).brightness == Brightness.light
+                ? 'assets/app/release_icon_light_transparent_no_border.svg'
+                : 'assets/app/release_icon_dark_transparent_no_border.svg',
+            width: height * 0.2,
+            height: height * 0.2,
+          ),
+          AutoSizeText(
+            localizations.welcomeToOpenFoodFacts,
+            textAlign: TextAlign.center,
+            style: const TextStyle(
+              fontSize: 26.0,
+              fontWeight: FontWeight.bold,
+              height: 1.25,
             ),
-          ],
-        ),
+            maxLines: 2,
+          ),
+          SizedBox(
+            height: height * 0.05,
+          ),
+          const Expanded(
+            child: _SearchCardTagLine(),
+          ),
+          SearchField(
+            onFocus: () => _openSearchPage(context),
+            readOnly: true,
+            showClearButton: false,
+            backgroundColor: isDarkmode
+                ? Colors.white10
+                : const Color.fromARGB(255, 240, 240, 240).withOpacity(OPACITY),
+            foregroundColor:
+                themeData.colorScheme.onSurface.withOpacity(OPACITY),
+          ),
+        ],
       ),
     );
   }
