diff --git a/packages/smooth_app/lib/generic_lib/design_constants.dart b/packages/smooth_app/lib/generic_lib/design_constants.dart index ad922ff1c3e..ea417895ef0 100644 --- a/packages/smooth_app/lib/generic_lib/design_constants.dart +++ b/packages/smooth_app/lib/generic_lib/design_constants.dart @@ -11,6 +11,9 @@ const double VERY_LARGE_SPACE = 20.0; /// Default icon size, cf. [Icon] const double DEFAULT_ICON_SIZE = 24.0; +/// Default icon size, cf. goldens.dart +const double MINIMUM_TARGET_SIZE = 48.0; + /// Background, e.g SmoothCard const Radius ROUNDED_RADIUS = Radius.circular(20.0); //ignore: non_constant_identifier_names diff --git a/packages/smooth_app/lib/widgets/attribute_button.dart b/packages/smooth_app/lib/widgets/attribute_button.dart index 949cdacb580..6e5a00e853f 100644 --- a/packages/smooth_app/lib/widgets/attribute_button.dart +++ b/packages/smooth_app/lib/widgets/attribute_button.dart @@ -37,53 +37,49 @@ class AttributeButton extends StatelessWidget { final double importanceWidth = widgetWidth / 4; final TextStyle style = themeData.textTheme.headline3!; final String? info = attribute.settingNote; - final List labelChildren = []; - final List importanceChildren = []; + final List children = []; for (final String importanceId in _importanceIds) { - Future selectImportance() async { - await productPreferences.setImportance(attribute.id!, importanceId); - await showDialog( - context: context, - builder: (BuildContext context) { + children.add( + GestureDetector( + onTap: () async { + await productPreferences.setImportance(attribute.id!, importanceId); final AppLocalizations? appLocalizations = AppLocalizations.of(context); - return SmoothAlertDialog( - body: Text( - 'blah blah blah importance "$importanceId"'), // TODO(monsieurtanuki): find translations - actions: [ - SmoothActionButton( - text: appLocalizations!.close, - onPressed: () => Navigator.pop(context), - ), - ], + await showDialog( + context: context, + builder: (BuildContext context) => SmoothAlertDialog( + body: Text( + 'blah blah blah importance "$importanceId"'), // TODO(monsieurtanuki): find translations + actions: [ + SmoothActionButton( + text: appLocalizations!.close, + onPressed: () => Navigator.pop(context), + ), + ], + ), ); }, - ); - } - - labelChildren.add( - GestureDetector( - onTap: () async => selectImportance(), child: SizedBox( width: importanceWidth, - child: AutoSizeText( - productPreferences - .getPreferenceImportanceFromImportanceId(importanceId)! - .name!, - maxLines: 2, - textAlign: TextAlign.center, - ), - ), - ), - ); - importanceChildren.add( - SizedBox( - width: importanceWidth, - child: Center( - child: Radio( - groupValue: currentImportanceId, - value: importanceId, - onChanged: (final String? value) async => selectImportance(), + height: MINIMUM_TARGET_SIZE, + child: Column( + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + AutoSizeText( + productPreferences + .getPreferenceImportanceFromImportanceId(importanceId)! + .name!, + maxLines: 1, + textAlign: TextAlign.center, + ), + Icon( + currentImportanceId == importanceId + ? Icons.radio_button_checked + : Icons.radio_button_off, + color: themeData.colorScheme.primary, + ), + ], ), ), ), @@ -99,27 +95,30 @@ class AttributeButton extends StatelessWidget { crossAxisAlignment: CrossAxisAlignment.start, children: [ GestureDetector( - child: Row( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - if (info != null) const Icon(Icons.info_outline), - Container( - padding: info == null - ? null - : const EdgeInsets.only(left: SMALL_SPACE), - child: SizedBox( - width: widgetWidth - - SMALL_SPACE - - (iconThemeData.size ?? DEFAULT_ICON_SIZE), - child: AutoSizeText( - attribute.settingName ?? attribute.name!, - maxLines: 2, - style: style, + child: SizedBox( + height: MINIMUM_TARGET_SIZE, + child: Row( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + if (info != null) const Icon(Icons.info_outline), + Container( + padding: info == null + ? null + : const EdgeInsets.only(left: SMALL_SPACE), + child: SizedBox( + width: widgetWidth - + SMALL_SPACE - + (iconThemeData.size ?? DEFAULT_ICON_SIZE), + child: AutoSizeText( + attribute.settingName ?? attribute.name!, + maxLines: 2, + style: style, + ), ), ), - ), - ], + ], + ), ), onTap: info == null ? null @@ -143,12 +142,7 @@ class AttributeButton extends StatelessWidget { Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.center, - children: labelChildren, - ), - Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - crossAxisAlignment: CrossAxisAlignment.center, - children: importanceChildren, + children: children, ), ], ), diff --git a/packages/smooth_app/test/pages/goldens/user_preferences_page-blue-dark.png b/packages/smooth_app/test/pages/goldens/user_preferences_page-blue-dark.png index 83e045c356e..6a1c5f722db 100644 Binary files a/packages/smooth_app/test/pages/goldens/user_preferences_page-blue-dark.png and b/packages/smooth_app/test/pages/goldens/user_preferences_page-blue-dark.png differ diff --git a/packages/smooth_app/test/pages/goldens/user_preferences_page-blue-light.png b/packages/smooth_app/test/pages/goldens/user_preferences_page-blue-light.png index c254af1367c..2214e8f1715 100644 Binary files a/packages/smooth_app/test/pages/goldens/user_preferences_page-blue-light.png and b/packages/smooth_app/test/pages/goldens/user_preferences_page-blue-light.png differ diff --git a/packages/smooth_app/test/pages/goldens/user_preferences_page-brown-dark.png b/packages/smooth_app/test/pages/goldens/user_preferences_page-brown-dark.png index 83e045c356e..6a1c5f722db 100644 Binary files a/packages/smooth_app/test/pages/goldens/user_preferences_page-brown-dark.png and b/packages/smooth_app/test/pages/goldens/user_preferences_page-brown-dark.png differ diff --git a/packages/smooth_app/test/pages/goldens/user_preferences_page-brown-light.png b/packages/smooth_app/test/pages/goldens/user_preferences_page-brown-light.png index ed1e87a7631..59cfef9c090 100644 Binary files a/packages/smooth_app/test/pages/goldens/user_preferences_page-brown-light.png and b/packages/smooth_app/test/pages/goldens/user_preferences_page-brown-light.png differ diff --git a/packages/smooth_app/test/pages/goldens/user_preferences_page-green-dark.png b/packages/smooth_app/test/pages/goldens/user_preferences_page-green-dark.png index 83e045c356e..6a1c5f722db 100644 Binary files a/packages/smooth_app/test/pages/goldens/user_preferences_page-green-dark.png and b/packages/smooth_app/test/pages/goldens/user_preferences_page-green-dark.png differ diff --git a/packages/smooth_app/test/pages/goldens/user_preferences_page-green-light.png b/packages/smooth_app/test/pages/goldens/user_preferences_page-green-light.png index 1ac8bff9f19..e4aa95f60eb 100644 Binary files a/packages/smooth_app/test/pages/goldens/user_preferences_page-green-light.png and b/packages/smooth_app/test/pages/goldens/user_preferences_page-green-light.png differ