feat: Remove a maximum of hardcoded sizes and move Padding to Directi…

…onal ones (openfoodfacts#2534) * Remove a maximum of hardcoded sizes and move Padding to Directional ones * Fix build issue Co-authored-by: Pierre Slamich <pierre@openfoodfacts.org>
AshAman999 · Jul 13, 2022 · 9ebe5c8 · 9ebe5c8
1 parent 6ad23ae
commit 9ebe5c8
Show file tree

Hide file tree

Showing 47 changed files with 213 additions and 141 deletions.
diff --git a/packages/smooth_app/lib/cards/data_cards/score_card.dart b/packages/smooth_app/lib/cards/data_cards/score_card.dart
@@ -60,7 +60,7 @@ class ScoreCard extends StatelessWidget {
               Expanded(
                 flex: 1,
                 child: Padding(
-                  padding: const EdgeInsets.only(right: 8.0),
+                  padding: const EdgeInsetsDirectional.only(end: SMALL_SPACE),
                   child: iconChip,
                 ),
               ),

diff --git a/packages/smooth_app/lib/cards/product_cards/product_title_card.dart b/packages/smooth_app/lib/cards/product_cards/product_title_card.dart
@@ -47,7 +47,7 @@ class ProductTitleCard extends StatelessWidget {
       ).selectable(isSelectable: isSelectable);
     }
     return Align(
-      alignment: Alignment.topLeft,
+      alignment: AlignmentDirectional.topStart,
       child: InkWell(
         onTap: (getProductName(product, appLocalizations) ==
                 appLocalizations.unknownProductName)

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
@@ -33,7 +33,7 @@ class SmoothProductCardError extends StatelessWidget {
         mainAxisAlignment: MainAxisAlignment.center,
         children: <Widget>[
           Padding(
-            padding: const EdgeInsets.all(8.0),
+            padding: const EdgeInsets.all(SMALL_SPACE),
             child: SvgPicture.asset(
               'assets/misc/error.svg',
               width: MINIMUM_TOUCH_SIZE * 2,
@@ -47,7 +47,7 @@ class SmoothProductCardError extends StatelessWidget {
             ],
           ),
           const SizedBox(
-            height: 12.0,
+            height: MEDIUM_SPACE,
           ),
           ProductDialogHelper.getErrorMessage(
             _getErrorMessage(
@@ -56,7 +56,7 @@ class SmoothProductCardError extends StatelessWidget {
             ),
           ),
           const SizedBox(
-            height: 12.0,
+            height: MEDIUM_SPACE,
           ),
           ElevatedButton(
             onPressed: () async {

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
@@ -92,7 +92,9 @@ class SmoothProductCardFound extends StatelessWidget {
                   width: screenSize.width * 0.20,
                   height: screenSize.width * 0.20,
                 ),
-                const Padding(padding: EdgeInsets.only(left: VERY_SMALL_SPACE)),
+                const Padding(
+                    padding:
+                        EdgeInsetsDirectional.only(start: VERY_SMALL_SPACE)),
                 Expanded(
                   child: SizedBox(
                     height: screenSize.width * 0.2,
@@ -118,17 +120,19 @@ class SmoothProductCardFound extends StatelessWidget {
                               color: helper.getButtonColor(isDarkMode),
                             ),
                             const Padding(
-                                padding:
-                                    EdgeInsets.only(left: VERY_SMALL_SPACE)),
+                              padding: EdgeInsetsDirectional.only(
+                                  start: VERY_SMALL_SPACE),
+                            ),
                             Expanded(
                               child: FittedBox(
                                 fit: BoxFit.scaleDown,
                                 alignment: AlignmentDirectional.centerStart,
                                 child: Text(
                                   helper.getSubtitle(appLocalizations),
                                   style: themeData.textTheme.bodyText2!.apply(
-                                      color: helper.getButtonForegroundColor(
-                                          isDarkMode)),
+                                    color: helper
+                                        .getButtonForegroundColor(isDarkMode),
+                                  ),
                                 ),
                               ),
                             ),
@@ -138,7 +142,9 @@ class SmoothProductCardFound extends StatelessWidget {
                     ),
                   ),
                 ),
-                const Padding(padding: EdgeInsets.only(left: VERY_SMALL_SPACE)),
+                const Padding(
+                  padding: EdgeInsetsDirectional.only(start: VERY_SMALL_SPACE),
+                ),
                 Padding(
                   padding: const EdgeInsets.all(VERY_SMALL_SPACE),
                   child: Column(

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
@@ -53,7 +53,7 @@ class SmoothProductCardNotFound extends StatelessWidget {
                 style: Theme.of(context).textTheme.bodyText2,
               ),
               Padding(
-                padding: const EdgeInsets.only(top: LARGE_SPACE),
+                padding: const EdgeInsetsDirectional.only(top: LARGE_SPACE),
                 child: SmoothLargeButtonWithIcon(
                   text: appLocalizations.add_product_information_button_label,
                   icon: Icons.add,

diff --git a/packages/smooth_app/lib/generic_lib/dialogs/smooth_alert_dialog.dart b/packages/smooth_app/lib/generic_lib/dialogs/smooth_alert_dialog.dart
@@ -30,8 +30,12 @@ class SmoothAlertDialog extends StatelessWidget {
   final SmoothActionButton? positiveAction;
   final SmoothActionButton? negativeAction;
 
-  static const EdgeInsets _contentPadding =
-      EdgeInsets.fromLTRB(24.0, 20.0, 24.0, 24.0);
+  static const EdgeInsets _contentPadding = EdgeInsets.only(
+    left: 24.0,
+    top: VERY_LARGE_SPACE,
+    right: 24.0,
+    bottom: 24.0,
+  );
 
   @override
   Widget build(BuildContext context) {
@@ -57,7 +61,7 @@ class SmoothAlertDialog extends StatelessWidget {
     return Padding(
       padding: EdgeInsetsDirectional.only(
         top: _contentPadding.bottom,
-        start: 8.0,
+        start: SMALL_SPACE,
       ),
       child: SmoothActionButtonsBar(
         positiveAction: positiveAction,
@@ -262,7 +266,9 @@ class _SmoothActionFlatButton extends StatelessWidget {
           ),
         ),
         child: SizedBox(
-          height: buttonData.lines != null ? 20.0 * buttonData.lines! : null,
+          height: buttonData.lines != null
+              ? VERY_LARGE_SPACE * buttonData.lines!
+              : null,
           child: FittedBox(
             child: Text(
               buttonData.text.toUpperCase(),

diff --git a/packages/smooth_app/lib/generic_lib/dialogs/smooth_category_picker.dart b/packages/smooth_app/lib/generic_lib/dialogs/smooth_category_picker.dart
@@ -7,6 +7,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:openfoodfacts/openfoodfacts.dart';
 import 'package:openfoodfacts/utils/LanguageHelper.dart';
+import 'package:smooth_app/generic_lib/design_constants.dart';
 import 'package:smooth_app/generic_lib/duration_constants.dart';
 import 'package:smooth_app/widgets/smooth_scaffold.dart';
 
@@ -142,7 +143,7 @@ class _SmoothCategoryPickerState<T extends Comparable<T>>
             crossAxisAlignment: CrossAxisAlignment.start,
             children: <Widget>[
               Padding(
-                padding: const EdgeInsets.all(8.0),
+                padding: const EdgeInsets.all(SMALL_SPACE),
                 child: SmoothCategoryDisplay<T>(
                   categories: widget.currentCategories,
                   onDeleted: (T item) {
@@ -155,7 +156,8 @@ class _SmoothCategoryPickerState<T extends Comparable<T>>
               Row(
                 children: <Widget>[
                   IconButton(
-                    padding: const EdgeInsets.symmetric(horizontal: 16.0),
+                    padding:
+                        const EdgeInsets.symmetric(horizontal: LARGE_SPACE),
                     icon: const Icon(Icons.chevron_left),
                     onPressed: category.value != widget.currentPath.first
                         ? () {
@@ -424,7 +426,7 @@ class _CategoryItem<T extends SmoothCategory<dynamic>> extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Padding(
-      padding: const EdgeInsetsDirectional.only(start: 8.0),
+      padding: const EdgeInsetsDirectional.only(start: SMALL_SPACE),
       child: FutureBuilder<bool>(
         future: category.hasChildren,
         builder: (BuildContext context, AsyncSnapshot<bool> snapshot) {
@@ -562,8 +564,8 @@ class _SmoothCategoryDisplayState<T extends Object>
     combinedCategories.sort();
     return Wrap(
       alignment: WrapAlignment.start,
-      spacing: 8.0,
-      runSpacing: 4.0,
+      spacing: SMALL_SPACE,
+      runSpacing: VERY_SMALL_SPACE,
       children: <Widget>[
         for (final T category in combinedCategories)
           AnimatedInputChip(

diff --git a/packages/smooth_app/lib/generic_lib/widgets/smooth_card.dart b/packages/smooth_app/lib/generic_lib/widgets/smooth_card.dart
@@ -35,9 +35,9 @@ class SmoothCard extends StatelessWidget {
   const SmoothCard.flat({
     required this.child,
     this.color,
-    this.margin = const EdgeInsets.only(
-      right: SMALL_SPACE,
-      left: SMALL_SPACE,
+    this.margin = const EdgeInsetsDirectional.only(
+      start: SMALL_SPACE,
+      end: SMALL_SPACE,
       top: VERY_SMALL_SPACE,
       bottom: VERY_SMALL_SPACE,
     ),

diff --git a/packages/smooth_app/lib/helpers/attributes_card_helper.dart b/packages/smooth_app/lib/helpers/attributes_card_helper.dart
@@ -14,7 +14,7 @@ enum AttributeEvaluation {
 }
 
 Widget getAttributeDisplayIcon(final Attribute attribute) => Padding(
-      padding: const EdgeInsets.only(right: VERY_SMALL_SPACE),
+      padding: const EdgeInsetsDirectional.only(end: VERY_SMALL_SPACE),
       child: _attributeMatchComparison(
         attribute,
         const Icon(CupertinoIcons.question, color: RED_COLOR),

diff --git a/packages/smooth_app/lib/helpers/product_cards_helper.dart b/packages/smooth_app/lib/helpers/product_cards_helper.dart
@@ -10,8 +10,10 @@ String getProductName(Product product, AppLocalizations appLocalizations) =>
     product.productName ?? appLocalizations.unknownProductName;
 
 /// Padding to be used while building the SmoothCard on any Product card.
-const EdgeInsets SMOOTH_CARD_PADDING =
-    EdgeInsets.symmetric(horizontal: 12.0, vertical: 4.0);
+const EdgeInsets SMOOTH_CARD_PADDING = EdgeInsets.symmetric(
+  horizontal: MEDIUM_SPACE,
+  vertical: VERY_SMALL_SPACE,
+);
 
 /// A SmoothCard on Product cards using default margin and padding.
 Widget buildProductSmoothCard({

diff --git a/packages/smooth_app/lib/knowledge_panel/knowledge_panels/knowledge_panel_expanded_card.dart b/packages/smooth_app/lib/knowledge_panel/knowledge_panels/knowledge_panel_expanded_card.dart
@@ -26,7 +26,7 @@ class KnowledgePanelExpandedCard extends StatelessWidget {
         in panel.elements ?? <KnowledgePanelElement>[]) {
       elementWidgets.add(
         Padding(
-          padding: const EdgeInsets.only(top: VERY_SMALL_SPACE),
+          padding: const EdgeInsetsDirectional.only(top: VERY_SMALL_SPACE),
           child: KnowledgePanelElementCard(
             knowledgePanelElement: element,
             allPanels: allPanels,

diff --git a/packages/smooth_app/lib/knowledge_panel/knowledge_panels/knowledge_panel_group_card.dart b/packages/smooth_app/lib/knowledge_panel/knowledge_panels/knowledge_panel_group_card.dart
@@ -28,7 +28,7 @@ class KnowledgePanelGroupCard extends StatelessWidget {
         children: <Widget>[
           if (groupElement.title.isNotEmpty)
             Padding(
-              padding: const EdgeInsets.only(top: LARGE_SPACE),
+              padding: const EdgeInsetsDirectional.only(top: LARGE_SPACE),
               child: Text(
                 groupElement.title,
                 style: themeData.textTheme.subtitle2!.apply(color: Colors.grey),

diff --git a/packages/smooth_app/lib/knowledge_panel/knowledge_panels/knowledge_panel_product_cards.dart b/packages/smooth_app/lib/knowledge_panel/knowledge_panels/knowledge_panel_product_cards.dart
@@ -13,7 +13,7 @@ class KnowledgePanelProductCards extends StatelessWidget {
     for (final Widget widget in knowledgePanelWidgets) {
       widgetsWrappedInSmoothCards.add(
         Padding(
-          padding: const EdgeInsets.only(top: VERY_LARGE_SPACE),
+          padding: const EdgeInsetsDirectional.only(top: VERY_LARGE_SPACE),
           child: buildProductSmoothCard(
             body: widget,
             padding: SMOOTH_CARD_PADDING,
@@ -23,7 +23,7 @@ class KnowledgePanelProductCards extends StatelessWidget {
     }
     return Center(
       child: Padding(
-        padding: const EdgeInsets.only(bottom: SMALL_SPACE),
+        padding: const EdgeInsetsDirectional.only(bottom: SMALL_SPACE),
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           crossAxisAlignment: CrossAxisAlignment.center,

diff --git a/packages/smooth_app/lib/knowledge_panel/knowledge_panels/knowledge_panel_table_card.dart b/packages/smooth_app/lib/knowledge_panel/knowledge_panels/knowledge_panel_table_card.dart
@@ -50,6 +50,7 @@ class TableCell {
   final String text;
   final Color? color;
   final bool isHeader;
+
   // [columnGroup] is set only for cells that have [isHeader = true]. This is used
   // to show a dropdown of other column headers in the group for this column.
   final ColumnGroup? columnGroup;
@@ -265,7 +266,8 @@ class _TableCellWidgetState extends State<TableCellWidget> {
 
   @override
   Widget build(BuildContext context) {
-    EdgeInsets padding = const EdgeInsets.only(bottom: VERY_SMALL_SPACE);
+    EdgeInsetsGeometry padding =
+        const EdgeInsetsDirectional.only(bottom: VERY_SMALL_SPACE);
     // header cells get a bigger vertical padding.
     if (widget.cell.isHeader) {
       padding = const EdgeInsets.symmetric(vertical: SMALL_SPACE);
@@ -283,8 +285,11 @@ class _TableCellWidgetState extends State<TableCellWidget> {
     return _buildDropDownColumnHeader(padding, style);
   }
 
-  Widget _buildHtmlCell(EdgeInsets padding, TextStyle style,
-      {required bool isSelectable}) {
+  Widget _buildHtmlCell(
+    EdgeInsetsGeometry padding,
+    TextStyle style, {
+    required bool isSelectable,
+  }) {
     String cellText = widget.cell.text;
     if (!_isExpanded) {
       const String htmlStyle = '''
@@ -312,7 +317,10 @@ class _TableCellWidgetState extends State<TableCellWidget> {
     );
   }
 
-  Widget _buildDropDownColumnHeader(EdgeInsets padding, TextStyle style) {
+  Widget _buildDropDownColumnHeader(
+    EdgeInsetsGeometry padding,
+    TextStyle style,
+  ) {
     // Now we finally render [ColumnGroup]s as drop down menus.
     return Padding(
       padding: padding,

diff --git a/packages/smooth_app/lib/knowledge_panel/knowledge_panels/knowledge_panel_title_card.dart b/packages/smooth_app/lib/knowledge_panel/knowledge_panels/knowledge_panel_title_card.dart
@@ -42,13 +42,15 @@ class KnowledgePanelTitleCard extends StatelessWidget {
             ),
           ),
         ),
-        const Padding(padding: EdgeInsets.only(left: SMALL_SPACE)),
+        const Padding(
+          padding: EdgeInsetsDirectional.only(start: SMALL_SPACE),
+        ),
       ];
     } else {
       iconWidget = <Widget>[];
     }
     return Padding(
-      padding: const EdgeInsets.only(
+      padding: const EdgeInsetsDirectional.only(
         top: VERY_SMALL_SPACE,
         bottom: VERY_SMALL_SPACE,
       ),

diff --git a/packages/smooth_app/lib/knowledge_panel/knowledge_panels/knowledge_panel_world_map_card.dart b/packages/smooth_app/lib/knowledge_panel/knowledge_panels/knowledge_panel_world_map_card.dart
@@ -17,7 +17,7 @@ class KnowledgePanelWorldMapCard extends StatelessWidget {
     // TODO(monsieurtanuki): Zoom the map to show all [mapElement.pointers]
     // TODO(monsieurtanuki): Add a OSM copyright.
     return Padding(
-      padding: const EdgeInsets.only(bottom: MEDIUM_SPACE),
+      padding: const EdgeInsetsDirectional.only(bottom: MEDIUM_SPACE),
       child: SizedBox(
         height: 200,
         child: FlutterMap(

diff --git a/packages/smooth_app/lib/pages/onboarding/common/tooltip_shape_border.dart b/packages/smooth_app/lib/pages/onboarding/common/tooltip_shape_border.dart
@@ -1,10 +1,11 @@
-import 'package:flutter/cupertino.dart';
+import 'package:flutter/widgets.dart';
+import 'package:smooth_app/generic_lib/design_constants.dart';
 
 class TooltipShapeBorder extends ShapeBorder {
   const TooltipShapeBorder({
     this.radius = 10.0,
-    this.arrowWidth = 20.0,
-    this.arrowHeight = 20.0,
+    this.arrowWidth = VERY_LARGE_SPACE,
+    this.arrowHeight = VERY_LARGE_SPACE,
     this.arrowArc = 0.0,
   }) : assert(arrowArc <= 1.0 && arrowArc >= 0.0);
   final double arrowWidth;
@@ -13,7 +14,9 @@ class TooltipShapeBorder extends ShapeBorder {
   final double radius;
 
   @override
-  EdgeInsetsGeometry get dimensions => EdgeInsets.only(top: arrowHeight);
+  EdgeInsetsGeometry get dimensions => EdgeInsetsDirectional.only(
+        top: arrowHeight,
+      );
 
   @override
   Path getOuterPath(Rect rect, {TextDirection? textDirection}) {

diff --git a/packages/smooth_app/lib/pages/onboarding/consent_analytics_page.dart b/packages/smooth_app/lib/pages/onboarding/consent_analytics_page.dart
@@ -39,7 +39,7 @@ class ConsentAnalytics extends StatelessWidget {
                   width: screenSize.width * .50,
                 ),
                 Padding(
-                  padding: const EdgeInsets.only(top: SMALL_SPACE),
+                  padding: const EdgeInsetsDirectional.only(top: SMALL_SPACE),
                   child: AutoSizeText(
                     appLocalizations.consent_analytics_title,
                     maxLines: 2,
@@ -51,15 +51,15 @@ class ConsentAnalytics extends StatelessWidget {
                   ),
                 ),
                 Padding(
-                  padding: const EdgeInsets.only(top: SMALL_SPACE),
+                  padding: const EdgeInsetsDirectional.only(top: SMALL_SPACE),
                   child: AutoSizeText(
                     appLocalizations.consent_analytics_body1,
                     maxLines: 3,
                     textAlign: TextAlign.center,
                   ),
                 ),
                 Padding(
-                  padding: const EdgeInsets.only(top: SMALL_SPACE),
+                  padding: const EdgeInsetsDirectional.only(top: SMALL_SPACE),
                   child: AutoSizeText(
                     appLocalizations.consent_analytics_body2,
                     maxLines: 3,

diff --git a/packages/smooth_app/lib/pages/onboarding/knowledge_panel_page_template.dart b/packages/smooth_app/lib/pages/onboarding/knowledge_panel_page_template.dart
@@ -136,7 +136,12 @@ class _KnowledgePanelPageTemplateState
         color: Theme.of(context).hintColor.withOpacity(0.9),
         shape: const TooltipShapeBorder(arrowArc: 0.5),
         child: Container(
-          margin: const EdgeInsets.fromLTRB(20, 10, 20, 10),
+          margin: const EdgeInsetsDirectional.only(
+            start: VERY_LARGE_SPACE,
+            top: 10,
+            end: VERY_LARGE_SPACE,
+            bottom: 10,
+          ),
           child: Text(
             appLocalizations.hint_knowledge_panel_message,
             style: TextStyle(color: Theme.of(context).cardColor),

diff --git a/packages/smooth_app/lib/pages/onboarding/onboarding_bottom_bar.dart b/packages/smooth_app/lib/pages/onboarding/onboarding_bottom_bar.dart
@@ -107,7 +107,7 @@ class OnboardingBottomIcon extends StatelessWidget {
   Widget build(BuildContext context) => ElevatedButton(
         style: ElevatedButton.styleFrom(
           shape: const CircleBorder(),
-          padding: const EdgeInsets.all(12),
+          padding: const EdgeInsets.all(MEDIUM_SPACE),
           primary: backgroundColor,
           onPrimary: foregroundColor,
         ),