fix: Overflow issue on 'update nutrition facts' page. (#1306)

* fix: 1303 * removed additional files * used mediaquery * added commas
openfoodfacts · Mar 26, 2022 · 180d0b4 · 180d0b4
1 parent eaf83df
commit 180d0b4
Showing 1 changed file with 12 additions and 11 deletions.
diff --git a/packages/smooth_app/lib/pages/product/nutrition_page_loaded.dart b/packages/smooth_app/lib/pages/product/nutrition_page_loaded.dart
@@ -33,9 +33,13 @@ class _NutritionPageLoadedState extends State<NutritionPageLoaded> {
   // If true then serving, if false then 100g.
   bool _servingOr100g = false;
 
-  static const double _columnSize1 = 250; // TODO(monsieurtanuki): proper size
-  static const double _columnSize2 =
-      100; // TODO(monsieurtanuki): anyway, should fit the largest text, probably 'mcg/µg'
+  double getColumnSizeFromContext(
+    BuildContext context,
+    double adjustmentFactor,
+  ) {
+    final double _columnSize = MediaQuery.of(context).size.width;
+    return _columnSize * adjustmentFactor;
+  }
 
   final Map<String, TextEditingController> _controllers =
       <String, TextEditingController>{};
@@ -74,10 +78,7 @@ class _NutritionPageLoadedState extends State<NutritionPageLoaded> {
       for (final OrderedNutrient orderedNutrient
           in _nutritionContainer.getDisplayableNutrients()) {
         children.add(
-          _getNutrientRow(
-            appLocalizations,
-            orderedNutrient,
-          ),
+          _getNutrientRow(appLocalizations, orderedNutrient),
         );
       }
       children.add(_addNutrientButton(appLocalizations));
@@ -108,15 +109,15 @@ class _NutritionPageLoadedState extends State<NutritionPageLoaded> {
         crossAxisAlignment: CrossAxisAlignment.center,
         children: <Widget>[
           SizedBox(
-            width: _columnSize1,
+            width: getColumnSizeFromContext(context, 0.6),
             child: _getNutrientCell(
               appLocalizations,
               orderedNutrient,
               _servingOr100g,
             ),
           ),
           SizedBox(
-            width: _columnSize2,
+            width: getColumnSizeFromContext(context, 0.3),
             child: _getUnitCell(orderedNutrient),
           ),
         ],
@@ -232,7 +233,7 @@ class _NutritionPageLoadedState extends State<NutritionPageLoaded> {
       Container(
         color: Theme.of(context).colorScheme.primary,
         child: Row(
-          mainAxisAlignment: MainAxisAlignment.end,
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
           crossAxisAlignment: CrossAxisAlignment.center,
           children: <Widget>[
             Switch(
@@ -241,7 +242,7 @@ class _NutritionPageLoadedState extends State<NutritionPageLoaded> {
                   setState(() => _unspecified = !_unspecified),
             ),
             SizedBox(
-              width: 300, // TODO(monsieurtanuki): proper size
+              width: getColumnSizeFromContext(context, 0.6),
               child: Text(
                 appLocalizations.nutrition_page_unspecified,
                 style: const TextStyle(color: Colors.white),