From efeef681f55e583ff1a82629e2cf9331d7b747c7 Mon Sep 17 00:00:00 2001 From: Gabriel Moraes Date: Tue, 12 Mar 2024 23:11:55 -0300 Subject: [PATCH 1/7] Bug: wrapping RankingFloatingActionButton inside a Expanded widget and it's childs inside a FittedBox widget --- .../product/common/product_query_page.dart | 22 ++++++++------- .../ranking_floating_action_button.dart | 28 ++++++++++--------- 2 files changed, 27 insertions(+), 23 deletions(-) diff --git a/packages/smooth_app/lib/pages/product/common/product_query_page.dart b/packages/smooth_app/lib/pages/product/common/product_query_page.dart index 9ed060ae598..7f667d0493b 100644 --- a/packages/smooth_app/lib/pages/product/common/product_query_page.dart +++ b/packages/smooth_app/lib/pages/product/common/product_query_page.dart @@ -160,16 +160,18 @@ class _ProductQueryPageState extends State ? MainAxisAlignment.spaceBetween : MainAxisAlignment.center, children: [ - Padding( - padding: const EdgeInsets.symmetric(vertical: 5.0), - child: RankingFloatingActionButton( - onPressed: () => Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => - PersonalizedRankingPage( - barcodes: _model.displayBarcodes, - title: widget.name, + Expanded( + child: Padding( + padding: const EdgeInsets.symmetric(vertical: 5.0), + child: RankingFloatingActionButton( + onPressed: () => Navigator.push( + context, + MaterialPageRoute( + builder: (BuildContext context) => + PersonalizedRankingPage( + barcodes: _model.displayBarcodes, + title: widget.name, + ), ), ), ), diff --git a/packages/smooth_app/lib/widgets/ranking_floating_action_button.dart b/packages/smooth_app/lib/widgets/ranking_floating_action_button.dart index b12bf717edd..7108ac53f0d 100644 --- a/packages/smooth_app/lib/widgets/ranking_floating_action_button.dart +++ b/packages/smooth_app/lib/widgets/ranking_floating_action_button.dart @@ -19,19 +19,21 @@ class RankingFloatingActionButton extends StatelessWidget { Widget build(BuildContext context) => SmoothRevealAnimation( animationCurve: Curves.easeInOutBack, startOffset: const Offset(0.0, 1.0), - child: Row( - mainAxisSize: MainAxisSize.max, - mainAxisAlignment: MainAxisAlignment.center, - children: [ - SizedBox(width: MediaQuery.of(context).size.width * 0.09), - FloatingActionButton.extended( - heroTag: 'ranking_fab_${Random(100)}', - elevation: 12.0, - icon: const Icon(rankingIconData), - label: Text(AppLocalizations.of(context).myPersonalizedRanking), - onPressed: onPressed, - ), - ], + child: FittedBox( + child: Row( + mainAxisSize: MainAxisSize.max, + mainAxisAlignment: MainAxisAlignment.center, + children: [ + SizedBox(width: MediaQuery.of(context).size.width * 0.09), + FloatingActionButton.extended( + heroTag: 'ranking_fab_${Random(100)}', + elevation: 12.0, + icon: const Icon(rankingIconData), + label: Text(AppLocalizations.of(context).myPersonalizedRanking), + onPressed: onPressed, + ), + ], + ), ), ); } From d854a60ae38e49af1fa4ac6dd4d383af8725be16 Mon Sep 17 00:00:00 2001 From: Gabriel Moraes Date: Wed, 27 Mar 2024 21:23:42 -0300 Subject: [PATCH 2/7] fix: Adding AutoSizeText to FloatingActionButton and adding it to a FittedBox --- .../ranking_floating_action_button.dart | 40 +++++++++++-------- 1 file changed, 24 insertions(+), 16 deletions(-) diff --git a/packages/smooth_app/lib/widgets/ranking_floating_action_button.dart b/packages/smooth_app/lib/widgets/ranking_floating_action_button.dart index 7108ac53f0d..36f0da328a1 100644 --- a/packages/smooth_app/lib/widgets/ranking_floating_action_button.dart +++ b/packages/smooth_app/lib/widgets/ranking_floating_action_button.dart @@ -1,11 +1,10 @@ import 'dart:math'; +import 'package:auto_size_text/auto_size_text.dart'; import 'package:flutter/material.dart'; import 'package:flutter_gen/gen_l10n/app_localizations.dart'; import 'package:smooth_app/generic_lib/animations/smooth_reveal_animation.dart'; -// TODO(monsieurtanuki): we should probably remove that class to avoid confusion with the "compare" button -/// Floating Action Button dedicated to Personal Ranking class RankingFloatingActionButton extends StatelessWidget { const RankingFloatingActionButton({ required this.onPressed, @@ -19,21 +18,30 @@ class RankingFloatingActionButton extends StatelessWidget { Widget build(BuildContext context) => SmoothRevealAnimation( animationCurve: Curves.easeInOutBack, startOffset: const Offset(0.0, 1.0), - child: FittedBox( - child: Row( - mainAxisSize: MainAxisSize.max, - mainAxisAlignment: MainAxisAlignment.center, - children: [ - SizedBox(width: MediaQuery.of(context).size.width * 0.09), - FloatingActionButton.extended( - heroTag: 'ranking_fab_${Random(100)}', - elevation: 12.0, - icon: const Icon(rankingIconData), - label: Text(AppLocalizations.of(context).myPersonalizedRanking), - onPressed: onPressed, + child: Row( + mainAxisSize: MainAxisSize.max, + mainAxisAlignment: MainAxisAlignment.center, + children: [ + SizedBox(width: MediaQuery.of(context).size.width * 0.09), + Flexible( + fit: FlexFit.tight, + child: FittedBox( + fit: BoxFit.scaleDown, + alignment: Alignment.center, + child: FloatingActionButton.extended( + heroTag: 'ranking_fab_${Random().nextInt(100)}', + elevation: 12.0, + icon: const Icon(rankingIconData), + label: AutoSizeText( + AppLocalizations.of(context).myPersonalizedRanking, + maxLines: 2, + textAlign: TextAlign.center, + ), + onPressed: onPressed, + ), ), - ], - ), + ), + ], ), ); } From fca916ee4730bd2f145215644e39740bd88495b5 Mon Sep 17 00:00:00 2001 From: Gabriel Moraes Date: Wed, 27 Mar 2024 21:29:00 -0300 Subject: [PATCH 3/7] fix: returning RankingFloatingActionButton class comments --- .../smooth_app/lib/widgets/ranking_floating_action_button.dart | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/smooth_app/lib/widgets/ranking_floating_action_button.dart b/packages/smooth_app/lib/widgets/ranking_floating_action_button.dart index 36f0da328a1..e091ca523be 100644 --- a/packages/smooth_app/lib/widgets/ranking_floating_action_button.dart +++ b/packages/smooth_app/lib/widgets/ranking_floating_action_button.dart @@ -5,6 +5,8 @@ import 'package:flutter/material.dart'; import 'package:flutter_gen/gen_l10n/app_localizations.dart'; import 'package:smooth_app/generic_lib/animations/smooth_reveal_animation.dart'; +// TODO(monsieurtanuki): we should probably remove that class to avoid confusion with the "compare" button +/// Floating Action Button dedicated to Personal Ranking class RankingFloatingActionButton extends StatelessWidget { const RankingFloatingActionButton({ required this.onPressed, From 7e97946522230ace3dc596886323a86d8987f922 Mon Sep 17 00:00:00 2001 From: Gabriel Moraes Date: Tue, 7 May 2024 20:22:53 -0300 Subject: [PATCH 4/7] refactor: Replacing FloatingActionButton for ElevatedButton inside RankingFloatingActionButton --- .../ranking_floating_action_button.dart | 26 ++++++++++--------- 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/packages/smooth_app/lib/widgets/ranking_floating_action_button.dart b/packages/smooth_app/lib/widgets/ranking_floating_action_button.dart index e091ca523be..66269c08119 100644 --- a/packages/smooth_app/lib/widgets/ranking_floating_action_button.dart +++ b/packages/smooth_app/lib/widgets/ranking_floating_action_button.dart @@ -1,9 +1,8 @@ -import 'dart:math'; - import 'package:auto_size_text/auto_size_text.dart'; import 'package:flutter/material.dart'; import 'package:flutter_gen/gen_l10n/app_localizations.dart'; import 'package:smooth_app/generic_lib/animations/smooth_reveal_animation.dart'; +import 'package:smooth_app/generic_lib/design_constants.dart'; // TODO(monsieurtanuki): we should probably remove that class to avoid confusion with the "compare" button /// Floating Action Button dedicated to Personal Ranking @@ -26,23 +25,26 @@ class RankingFloatingActionButton extends StatelessWidget { children: [ SizedBox(width: MediaQuery.of(context).size.width * 0.09), Flexible( - fit: FlexFit.tight, - child: FittedBox( - fit: BoxFit.scaleDown, - alignment: Alignment.center, - child: FloatingActionButton.extended( - heroTag: 'ranking_fab_${Random().nextInt(100)}', - elevation: 12.0, + child: SizedBox( + height: MINIMUM_TOUCH_SIZE, + child: ElevatedButton.icon( + onPressed: onPressed, + style: ButtonStyle( + shape: MaterialStateProperty.all( + const RoundedRectangleBorder( + borderRadius: BorderRadius.all(Radius.circular(40))), + ), + ), icon: const Icon(rankingIconData), label: AutoSizeText( AppLocalizations.of(context).myPersonalizedRanking, - maxLines: 2, textAlign: TextAlign.center, + maxLines: 2, + overflow: TextOverflow.ellipsis, ), - onPressed: onPressed, ), ), - ), + ) ], ), ); From f775dbd2483d230c03bdfac9df1cc1c8f326084a Mon Sep 17 00:00:00 2001 From: Gabriel Moraes Date: Tue, 7 May 2024 20:30:31 -0300 Subject: [PATCH 5/7] fix: Limiting BackToTopButton height to MINIMUM_TOUCH_SIZE and adjusting alignment logic --- .../product/common/product_query_page.dart | 31 ++++++++++++------- 1 file changed, 20 insertions(+), 11 deletions(-) diff --git a/packages/smooth_app/lib/pages/product/common/product_query_page.dart b/packages/smooth_app/lib/pages/product/common/product_query_page.dart index 7f667d0493b..6354e257e72 100644 --- a/packages/smooth_app/lib/pages/product/common/product_query_page.dart +++ b/packages/smooth_app/lib/pages/product/common/product_query_page.dart @@ -157,8 +157,8 @@ class _ProductQueryPageState extends State child: SmoothScaffold( floatingActionButton: Row( mainAxisAlignment: _showBackToTopButton - ? MainAxisAlignment.spaceBetween - : MainAxisAlignment.center, + ? MainAxisAlignment.end + : MainAxisAlignment.end, children: [ Expanded( child: Padding( @@ -189,15 +189,24 @@ class _ProductQueryPageState extends State padding: const EdgeInsetsDirectional.only( start: SMALL_SPACE, ), - child: FloatingActionButton( - backgroundColor: themeData.colorScheme.secondary, - onPressed: () { - _scrollToTop(); - }, - tooltip: appLocalizations.go_back_to_top, - child: Icon( - Icons.arrow_upward, - color: themeData.colorScheme.onSecondary, + child: SizedBox( + height: MINIMUM_TOUCH_SIZE, + child: ElevatedButton( + onPressed: () { + _scrollToTop(); + }, + style: ElevatedButton.styleFrom( + backgroundColor: themeData.colorScheme.secondary, + foregroundColor: themeData.colorScheme.onSecondary, + shape: const CircleBorder(), + padding: EdgeInsets.zero, + ), + child: Center( + child: Icon( + Icons.arrow_upward, + color: themeData.colorScheme.onSecondary, + ), + ), ), ), ), From 263a015436f231b668bf2cda1829558ec1112571 Mon Sep 17 00:00:00 2001 From: Gabriel Moraes Date: Mon, 13 May 2024 15:19:18 -0300 Subject: [PATCH 6/7] fix: Changed the property of a widget from conditional to fixed value and removed redundant Padding --- .../product/common/product_query_page.dart | 23 ++++++++----------- 1 file changed, 9 insertions(+), 14 deletions(-) diff --git a/packages/smooth_app/lib/pages/product/common/product_query_page.dart b/packages/smooth_app/lib/pages/product/common/product_query_page.dart index 6354e257e72..6c7b9e80a78 100644 --- a/packages/smooth_app/lib/pages/product/common/product_query_page.dart +++ b/packages/smooth_app/lib/pages/product/common/product_query_page.dart @@ -156,22 +156,17 @@ class _ProductQueryPageState extends State SmoothSharedAnimationController( child: SmoothScaffold( floatingActionButton: Row( - mainAxisAlignment: _showBackToTopButton - ? MainAxisAlignment.end - : MainAxisAlignment.end, + mainAxisAlignment: MainAxisAlignment.end, children: [ Expanded( - child: Padding( - padding: const EdgeInsets.symmetric(vertical: 5.0), - child: RankingFloatingActionButton( - onPressed: () => Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => - PersonalizedRankingPage( - barcodes: _model.displayBarcodes, - title: widget.name, - ), + child: RankingFloatingActionButton( + onPressed: () => Navigator.push( + context, + MaterialPageRoute( + builder: (BuildContext context) => + PersonalizedRankingPage( + barcodes: _model.displayBarcodes, + title: widget.name, ), ), ), From 7a44eb804e5b1dd2fba6e3c63a589d9803e8e79d Mon Sep 17 00:00:00 2001 From: Gabriel Moraes Date: Mon, 13 May 2024 15:23:12 -0300 Subject: [PATCH 7/7] fix: Refactor widget structure from Row to Container --- .../ranking_floating_action_button.dart | 46 +++++++++---------- 1 file changed, 22 insertions(+), 24 deletions(-) diff --git a/packages/smooth_app/lib/widgets/ranking_floating_action_button.dart b/packages/smooth_app/lib/widgets/ranking_floating_action_button.dart index 66269c08119..10c6678cbd6 100644 --- a/packages/smooth_app/lib/widgets/ranking_floating_action_button.dart +++ b/packages/smooth_app/lib/widgets/ranking_floating_action_button.dart @@ -19,33 +19,31 @@ class RankingFloatingActionButton extends StatelessWidget { Widget build(BuildContext context) => SmoothRevealAnimation( animationCurve: Curves.easeInOutBack, startOffset: const Offset(0.0, 1.0), - child: Row( - mainAxisSize: MainAxisSize.max, - mainAxisAlignment: MainAxisAlignment.center, - children: [ - SizedBox(width: MediaQuery.of(context).size.width * 0.09), - Flexible( - child: SizedBox( - height: MINIMUM_TOUCH_SIZE, - child: ElevatedButton.icon( - onPressed: onPressed, - style: ButtonStyle( - shape: MaterialStateProperty.all( - const RoundedRectangleBorder( - borderRadius: BorderRadius.all(Radius.circular(40))), - ), - ), - icon: const Icon(rankingIconData), - label: AutoSizeText( - AppLocalizations.of(context).myPersonalizedRanking, - textAlign: TextAlign.center, - maxLines: 2, - overflow: TextOverflow.ellipsis, + child: Container( + height: MINIMUM_TOUCH_SIZE, + margin: + EdgeInsets.only(left: MediaQuery.of(context).size.width * 0.09), + alignment: Alignment.center, + child: SizedBox( + height: MINIMUM_TOUCH_SIZE, + child: ElevatedButton.icon( + onPressed: onPressed, + style: ButtonStyle( + shape: MaterialStateProperty.all( + const RoundedRectangleBorder( + borderRadius: CIRCULAR_BORDER_RADIUS, ), ), ), - ) - ], + icon: const Icon(rankingIconData), + label: AutoSizeText( + AppLocalizations.of(context).myPersonalizedRanking, + textAlign: TextAlign.center, + maxLines: 2, + overflow: TextOverflow.ellipsis, + ), + ), + ), ), ); }