From 4f9e3080da9300a67d841a8880fbe02c8305ff7c Mon Sep 17 00:00:00 2001 From: Edouard Marquez Date: Mon, 20 Nov 2023 03:02:18 +0100 Subject: [PATCH] Customized language picker for the onboarding --- packages/smooth_app/lib/l10n/app_en.arb | 6 +- .../pages/onboarding/country_selector.dart | 65 ++++++++++++------- .../lib/pages/onboarding/welcome_page.dart | 36 +++++++--- .../user_preferences_country_selector.dart | 2 +- 4 files changed, 74 insertions(+), 35 deletions(-) diff --git a/packages/smooth_app/lib/l10n/app_en.arb b/packages/smooth_app/lib/l10n/app_en.arb index fcb9dddeee4..844f869d953 100644 --- 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 index a20e5013252..bb5ff8dbb97 100644 --- 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 createState() => _CountrySelectorState(); @@ -76,8 +80,12 @@ class _CountrySelectorState extends State { 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 filteredList = List.from(_countryList); @@ -168,32 +176,43 @@ class _CountrySelectorState extends State { ); } }, - 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: [ - 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: [ + 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 index 44aa99008a8..cc59c5da71b 100644 --- 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,7 +73,7 @@ class WelcomePage extends StatelessWidget { crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( - appLocalizations.country_chooser_label, + appLocalizations.onboarding_country_chooser_label, style: bodyTextStyle, ), Padding( @@ -82,16 +81,33 @@ class WelcomePage extends StatelessWidget { 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 index b91e4eeec91..e58dfa3cc0e 100644 --- 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, ),