Customized language picker for the onboarding (#4826)

openfoodfacts · Nov 21, 2023 · d3c25f2 · d3c25f2
1 parent 5eb9db7
commit d3c25f2
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 35 deletions.
diff --git a/packages/smooth_app/lib/l10n/app_en.arb b/packages/smooth_app/lib/l10n/app_en.arb
@@ -777,7 +777,11 @@
     },
     "country_chooser_label": "Please choose a country",
     "@country_chooser_label": {
-        "description": "Label shown above a selector where the user can select their country (in the onboarding)"
+        "description": "Label shown above a selector where the user can select their country (in the preferences)"
+    },
+    "onboarding_country_chooser_label": "Please choose a country:",
+    "@onboarding_country_chooser_label": {
+        "description": "The label shown above a selector where the user can select their country (in the onboarding)"
     },
     "country_chooser_label_from_settings": "Your country",
     "@country_chooser_label_from_settings": {

diff --git a/packages/smooth_app/lib/pages/onboarding/country_selector.dart b/packages/smooth_app/lib/pages/onboarding/country_selector.dart
@@ -18,11 +18,15 @@ class CountrySelector extends StatefulWidget {
     this.textStyle,
     this.padding,
     this.icon,
+    this.iconDecoration,
+    this.inkWellBorderRadius,
   });
 
   final TextStyle? textStyle;
   final EdgeInsetsGeometry? padding;
-  final IconData? icon;
+  final BorderRadius? inkWellBorderRadius;
+  final Icon? icon;
+  final BoxDecoration? iconDecoration;
 
   @override
   State<CountrySelector> createState() => _CountrySelectorState();
@@ -76,8 +80,12 @@ class _CountrySelectorState extends State<CountrySelector> {
         final Country selectedCountry = _getSelectedCountry(
           userPreferences.userCountryCode,
         );
+        final EdgeInsetsGeometry innerPadding = const EdgeInsets.symmetric(
+          vertical: SMALL_SPACE,
+        ).add(widget.padding ?? EdgeInsets.zero);
+
         return InkWell(
-          borderRadius: ANGULAR_BORDER_RADIUS,
+          borderRadius: widget.inkWellBorderRadius ?? ANGULAR_BORDER_RADIUS,
           onTap: () async {
             _reorderCountries(selectedCountry);
             List<Country> filteredList = List<Country>.from(_countryList);
@@ -168,32 +176,43 @@ class _CountrySelectorState extends State<CountrySelector> {
               );
             }
           },
-          child: Container(
+          child: DecoratedBox(
             decoration: const BoxDecoration(
               borderRadius: BorderRadius.all(Radius.circular(10)),
             ),
-            padding: const EdgeInsets.symmetric(
-              vertical: SMALL_SPACE,
-            ).add(widget.padding ?? EdgeInsets.zero),
-            child: Row(
-              mainAxisAlignment: MainAxisAlignment.spaceBetween,
-              crossAxisAlignment: CrossAxisAlignment.center,
-              children: <Widget>[
-                const Icon(Icons.public),
-                Expanded(
-                  flex: 1,
-                  child: Padding(
-                    padding:
-                        const EdgeInsets.symmetric(horizontal: LARGE_SPACE),
-                    child: Text(
-                      selectedCountry.name,
-                      style: widget.textStyle ??
-                          Theme.of(context).textTheme.displaySmall,
+            child: IntrinsicHeight(
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                crossAxisAlignment: CrossAxisAlignment.center,
+                children: <Widget>[
+                  Padding(
+                    padding: innerPadding,
+                    child: const Icon(Icons.public),
+                  ),
+                  Expanded(
+                    flex: 1,
+                    child: Padding(
+                      padding:
+                          const EdgeInsets.symmetric(horizontal: LARGE_SPACE),
+                      child: Text(
+                        selectedCountry.name,
+                        style: Theme.of(context)
+                            .textTheme
+                            .displaySmall
+                            ?.merge(widget.textStyle),
+                      ),
+                    ),
+                  ),
+                  Container(
+                    height: double.infinity,
+                    decoration: widget.iconDecoration ?? const BoxDecoration(),
+                    child: AspectRatio(
+                      aspectRatio: 1.0,
+                      child: widget.icon ?? const Icon(Icons.arrow_drop_down),
                     ),
                   ),
-                ),
-                Icon(widget.icon ?? Icons.arrow_drop_down),
-              ],
+                ],
+              ),
             ),
           ),
         );

diff --git a/packages/smooth_app/lib/pages/onboarding/welcome_page.dart b/packages/smooth_app/lib/pages/onboarding/welcome_page.dart
@@ -19,10 +19,9 @@ class WelcomePage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final AppLocalizations appLocalizations = AppLocalizations.of(context);
-    final TextStyle headlineStyle =
-        Theme.of(context).textTheme.displayMedium!.wellSpaced;
-    final TextStyle bodyTextStyle =
-        Theme.of(context).textTheme.bodyLarge!.wellSpaced;
+    final ThemeData theme = Theme.of(context);
+    final TextStyle headlineStyle = theme.textTheme.displayMedium!.wellSpaced;
+    final TextStyle bodyTextStyle = theme.textTheme.bodyLarge!.wellSpaced;
     final Size screenSize = MediaQuery.of(context).size;
 
     return SmoothScaffold(
@@ -74,24 +73,41 @@ class WelcomePage extends StatelessWidget {
                     crossAxisAlignment: CrossAxisAlignment.start,
                     children: <Widget>[
                       Text(
-                        appLocalizations.country_chooser_label,
+                        appLocalizations.onboarding_country_chooser_label,
                         style: bodyTextStyle,
                       ),
                       Padding(
                         padding:
                             const EdgeInsets.symmetric(vertical: MEDIUM_SPACE),
                         child: Ink(
                           decoration: BoxDecoration(
-                            border: const Border.fromBorderSide(
+                            border: Border.fromBorderSide(
                               BorderSide(
-                                color: Colors.black,
+                                color: theme.colorScheme.inversePrimary,
                                 width: 1,
                               ),
                             ),
-                            borderRadius: ANGULAR_BORDER_RADIUS,
-                            color: Theme.of(context).cardColor,
+                            borderRadius: ROUNDED_BORDER_RADIUS,
+                            color: theme.colorScheme.onPrimary,
+                          ),
+                          child: SizedBox(
+                            width: double.infinity,
+                            child: CountrySelector(
+                              padding: const EdgeInsets.symmetric(
+                                horizontal: SMALL_SPACE,
+                              ),
+                              inkWellBorderRadius: ROUNDED_BORDER_RADIUS,
+                              icon: Icon(
+                                Icons.edit,
+                                color: Colors.white.withOpacity(0.9),
+                              ),
+                              iconDecoration: BoxDecoration(
+                                color: theme.primaryColor,
+                                borderRadius: ROUNDED_BORDER_RADIUS,
+                              ),
+                              textStyle: TextStyle(color: theme.primaryColor),
+                            ),
                           ),
-                          child: const CountrySelector(),
                         ),
                       ),
                       Padding(

diff --git a/packages/smooth_app/lib/pages/preferences/user_preferences_country_selector.dart b/packages/smooth_app/lib/pages/preferences/user_preferences_country_selector.dart
@@ -35,7 +35,7 @@ class UserPreferencesCountrySelector extends StatelessWidget {
         ),
         child: CountrySelector(
           textStyle: themeData.textTheme.bodyMedium,
-          icon: Icons.edit,
+          icon: const Icon(Icons.edit),
           padding: const EdgeInsetsDirectional.only(
             start: SMALL_SPACE,
           ),