Make the last winner box responsive (based on the screen width)

imaNNeo · Nov 14, 2024 · ba1c06e · ba1c06e
1 parent 9796eb7
commit ba1c06e
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 5 deletions.
diff --git a/lib/presentation/pages/multiplayer/game/parts/last_match_winner_widget.dart b/lib/presentation/pages/multiplayer/game/parts/last_match_winner_widget.dart
@@ -37,7 +37,7 @@ class _AnimatedLastMatchWidget extends StatefulWidget {
 
   final double height;
   final double width;
-  static const ratio = 126 / 61;
+  static const ratio = 110 / 61;
 
   final MatchOverviewEntity? lastMatch;
 
@@ -103,7 +103,7 @@ class _AnimatedLastMatchWidgetState extends State<_AnimatedLastMatchWidget> {
               '$timeAgo ago',
               style: TextStyle(
                 color: Colors.white60,
-                fontSize: width * 0.07,
+                fontSize: width * 0.08,
               ),
             ),
           ],

diff --git a/lib/presentation/pages/multiplayer/lobby/multiplayer_lobby_page.dart b/lib/presentation/pages/multiplayer/lobby/multiplayer_lobby_page.dart
@@ -105,6 +105,7 @@ class _MultiPlayerLobbyPageContentState extends State<MultiPlayerLobbyPage> {
                   Expanded(
                     child: PendingMatchBox(
                       horizontalPadding: boxHorizontalPadding,
+                      screenSize: screenSize,
                     ),
                   ),
                   SizedBox(height: boxVerticalSpacing),

diff --git a/lib/presentation/pages/multiplayer/lobby/parts/pending_match_box.dart b/lib/presentation/pages/multiplayer/lobby/parts/pending_match_box.dart
@@ -4,13 +4,20 @@ class PendingMatchBox extends StatelessWidget {
   const PendingMatchBox({
     super.key,
     required this.horizontalPadding,
+    required this.screenSize,
   });
 
   final double horizontalPadding;
+  final ScreenSize screenSize;
 
   @override
   Widget build(BuildContext context) {
-    const lastWinnerHeight = 40.0;
+    final lastWinnerHeight = switch (screenSize) {
+      ScreenSize.extraSmall => 32.0,
+      ScreenSize.small => 42.0,
+      ScreenSize.medium => 52.0,
+      ScreenSize.large || ScreenSize.extraLarge => 60.0,
+    };
     return BlocBuilder<MultiplayerCubit, MultiplayerState>(
       builder: (context, state) {
         return TransparentContentBox(
@@ -98,8 +105,8 @@ class PendingMatchBox extends StatelessWidget {
                 ],
               ),
               Transform.translate(
-                offset: const Offset(18, -lastWinnerHeight),
-                child: const LastMatchWinnerWidget(
+                offset: Offset(18, -lastWinnerHeight),
+                child: LastMatchWinnerWidget(
                   height: lastWinnerHeight,
                 ),
               )