fix: RankingFloatingActionButton partially off-screen for some transl…

…ations (#5117)

* Bug: wrapping RankingFloatingActionButton inside a Expanded widget and it's childs inside a FittedBox widget

* fix: Adding AutoSizeText to FloatingActionButton and adding it to a FittedBox

* fix: returning RankingFloatingActionButton class comments

* refactor: Replacing FloatingActionButton for ElevatedButton inside RankingFloatingActionButton

* fix: Limiting BackToTopButton height to MINIMUM_TOUCH_SIZE and adjusting alignment logic

* fix: Changed the  property of a widget from conditional to fixed value and removed redundant Padding

* fix: Refactor widget structure from Row to Container

---------

Co-authored-by: Gabriel Moraes <gmmoraes@Gabriels-Mac-mini.local>

packages/smooth_app/lib/pages/product/common/product_query_page.dart

@@ -156,12 +156,9 @@ class _ProductQueryPageState extends State<ProductQueryPage>
       SmoothSharedAnimationController(
         child: SmoothScaffold(
           floatingActionButton: Row(
-            mainAxisAlignment: _showBackToTopButton
-                ? MainAxisAlignment.spaceBetween
-                : MainAxisAlignment.center,
+            mainAxisAlignment: MainAxisAlignment.end,
             children: <Widget>[
-              Padding(
-                padding: const EdgeInsets.symmetric(vertical: 5.0),
+              Expanded(
                 child: RankingFloatingActionButton(
                   onPressed: () => Navigator.push<Widget>(
                     context,
@@ -187,15 +184,24 @@ class _ProductQueryPageState extends State<ProductQueryPage>
                       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,
+                            ),
+                          ),
                         ),
                       ),
                     ),

packages/smooth_app/lib/widgets/ranking_floating_action_button.dart

@@ -1,8 +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
@@ -19,19 +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: <Widget>[
-            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),
+        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<RoundedRectangleBorder>(
+                  const RoundedRectangleBorder(
+                    borderRadius: CIRCULAR_BORDER_RADIUS,
+                  ),
+                ),
+              ),
+              icon: const Icon(rankingIconData),
+              label: AutoSizeText(
+                AppLocalizations.of(context).myPersonalizedRanking,
+                textAlign: TextAlign.center,
+                maxLines: 2,
+                overflow: TextOverflow.ellipsis,
+              ),
             ),
-          ],
+          ),
         ),
       );
 }