Fix country selector overflow issue (#950)

* fix(country selector): preselect the most likely country * fix(country selector): preselect the most likely country * Fix country selector overflow issue * ... Co-authored-by: Jasmeet Singh <jasmeetsingh@google.com>
openfoodfacts · Jan 14, 2022 · 4495613 · 4495613
1 parent 4eccfbe
commit 4495613
Showing 1 changed file with 31 additions and 21 deletions.
diff --git a/packages/smooth_app/lib/pages/onboarding/country_selector.dart b/packages/smooth_app/lib/pages/onboarding/country_selector.dart
@@ -57,27 +57,37 @@ class _CountrySelectorState extends State<CountrySelector> {
           if (snapshot.connectionState != ConnectionState.done) {
             return const CircularProgressIndicator();
           }
-          return Container(
-            padding: widget.padding,
-            child: DropdownButtonFormField<Country>(
-              value: _chosenValue,
-              decoration: widget.inputDecoration,
-              items: _countryList
-                  .map<DropdownMenuItem<Country>>((Country country) {
-                return DropdownMenuItem<Country>(
-                  value: country,
-                  child: Text(country.name),
-                );
-              }).toList(),
-              onChanged: (Country? value) async {
-                if (value != null) {
-                  _chosenValue = value;
-                  await _setUserCountry(_chosenValue.countryCode);
-                  setState(() {});
-                }
-              },
-            ),
-          );
+          return LayoutBuilder(
+              builder: (BuildContext context, BoxConstraints constraints) {
+            final double parentWidth = constraints.maxWidth;
+            return Container(
+              padding: widget.padding,
+              child: DropdownButtonFormField<Country>(
+                value: _chosenValue,
+                decoration: widget.inputDecoration,
+                items: _countryList
+                    .map<DropdownMenuItem<Country>>((Country country) {
+                  return DropdownMenuItem<Country>(
+                    value: country,
+                    child: Container(
+                      // Set the maxWidth so the dropdown arrow icon doesn't overflow.
+                      // 48 dp is needed to account for dropdown arrow icon and padding.
+                      constraints: BoxConstraints(maxWidth: parentWidth - 48)
+                          .normalize(),
+                      child: Text(country.name),
+                    ),
+                  );
+                }).toList(),
+                onChanged: (Country? value) async {
+                  if (value != null) {
+                    _chosenValue = value;
+                    await _setUserCountry(_chosenValue.countryCode);
+                    setState(() {});
+                  }
+                },
+              ),
+            );
+          });
         },
       );