fix: nav bar overflow (#571)

VGVentures · Jun 13, 2024 · ac1ba15 · ac1ba15
1 parent 5841107
commit ac1ba15
Show file tree

Hide file tree

Showing 4 changed files with 130 additions and 59 deletions.
diff --git a/lib/bottom_bar/view/bottom_bar.dart b/lib/bottom_bar/view/bottom_bar.dart
@@ -45,38 +45,56 @@ class BottomBarContent extends StatelessWidget {
       alignment: Alignment.bottomCenter,
       child: Container(
         width: double.infinity,
+        height: 104,
         padding: const EdgeInsets.symmetric(vertical: 24),
         color: IoCrosswordColors.darkGray,
         child: Row(
           mainAxisAlignment: MainAxisAlignment.center,
+          crossAxisAlignment: CrossAxisAlignment.stretch,
           children: [
-            OutlinedButton(
+            FilledButton(
               onPressed: () {
                 context
                     .read<AudioController>()
                     .playSfx(Assets.music.startButton1);
                 EndGameCheck.openDialog(context);
               },
-              child: Text(
-                l10n.endGame,
-              ),
+              child: Text(l10n.endGame),
             ),
             const SizedBox(width: 16),
-            OutlinedButton.icon(
-              onPressed: () {
-                context
-                    .read<AudioController>()
-                    .playSfx(Assets.music.startButton1);
-                context
-                    .read<RandomWordSelectionBloc>()
-                    .add(const RandomWordRequested());
-              },
-              icon: const Icon(Icons.location_searching),
-              label: Text(l10n.findNewWord),
-            ),
+            const FindWordButton(),
           ],
         ),
       ),
     );
   }
 }
+
+class FindWordButton extends StatelessWidget {
+  const FindWordButton({super.key});
+
+  void _onPressed(BuildContext context) {
+    context.read<AudioController>().playSfx(Assets.music.startButton1);
+    context.read<RandomWordSelectionBloc>().add(const RandomWordRequested());
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final layout = IoLayout.of(context);
+    final l10n = context.l10n;
+
+    switch (layout) {
+      case IoLayoutData.large:
+        return OutlinedButton.icon(
+          onPressed: () => _onPressed(context),
+          icon: const Icon(Icons.location_searching),
+          label: Text(l10n.findNewWord),
+        );
+      case IoLayoutData.small:
+        return OutlinedButton.icon(
+          onPressed: () => _onPressed(context),
+          label: Text(l10n.findWord),
+        );
+    }
+  }
+}
diff --git a/lib/l10n/arb/app_en.arb b/lib/l10n/arb/app_en.arb
@@ -305,7 +305,11 @@
   },
   "findNewWord": "Find a new word",
   "@findNewWord": {
-    "description": "Find new word label"
+    "description": "Longer label for Find new word button"
+  },
+  "findWord": "Find a word",
+  "@findWord": {
+    "description": "Shorter label for Find word button"
   },
   "totalScore": "Total score",
   "@totalScore": {

diff --git a/packages/io_crossword_ui/lib/src/widgets/io_app_bar.dart b/packages/io_crossword_ui/lib/src/widgets/io_app_bar.dart
@@ -63,7 +63,7 @@ class IoAppBar extends StatelessWidget implements PreferredSizeWidget {
             height: 40,
             child: switch (layout) {
               IoLayoutData.small => Padding(
-                  padding: const EdgeInsets.symmetric(horizontal: 32),
+                  padding: const EdgeInsets.symmetric(horizontal: 16),
                   child: CustomMultiChildLayout(
                     delegate: AppBarLayout(),
                     children: [

diff --git a/test/bottom_bar/view/bottom_bar_test.dart b/test/bottom_bar/view/bottom_bar_test.dart
@@ -12,6 +12,7 @@ import 'package:io_crossword/end_game/end_game.dart';
 import 'package:io_crossword/l10n/l10n.dart';
 import 'package:io_crossword/random_word_selection/bloc/random_word_selection_bloc.dart';
 import 'package:io_crossword/word_selection/word_selection.dart';
+import 'package:io_crossword_ui/io_crossword_ui.dart';
 import 'package:mocktail/mocktail.dart';
 
 import '../../helpers/helpers.dart';
@@ -95,47 +96,6 @@ void main() {
       },
     );
 
-    testWidgets(
-      'adds $RandomWordRequested event when find new word button is tapped',
-      (tester) async {
-        when(() => wordSelectionBloc.state).thenReturn(
-          const WordSelectionState.initial(),
-        );
-
-        when(() => crosswordBloc.state).thenReturn(
-          const CrosswordState(mascotVisible: false),
-        );
-
-        await tester.pumpApp(widget);
-
-        await tester.tap(find.text(l10n.findNewWord));
-
-        await tester.pumpAndSettle();
-
-        verify(
-          () => randomWordSelectionBloc.add(RandomWordRequested()),
-        ).called(1);
-      },
-    );
-
-    testWidgets(
-      'plays ${Assets.music.startButton1} when find new word button is tapped',
-      (tester) async {
-        when(() => wordSelectionBloc.state).thenReturn(
-          const WordSelectionState.initial(),
-        );
-        await tester.pumpApp(widget, audioController: audioController);
-
-        await tester.tap(find.text(l10n.findNewWord));
-
-        await tester.pumpAndSettle();
-
-        verify(
-          () => audioController.playSfx(Assets.music.startButton1),
-        ).called(1);
-      },
-    );
-
     group('$BottomBarContent', () {
       testWidgets(
         'displays endGame',
@@ -179,5 +139,94 @@ void main() {
         },
       );
     });
+
+    group('$FindWordButton', () {
+      setUp(() {
+        widget = MultiBlocProvider(
+          providers: [
+            BlocProvider<RandomWordSelectionBloc>(
+              create: (_) => randomWordSelectionBloc,
+            ),
+          ],
+          child: FindWordButton(),
+        );
+      });
+
+      group('for large layout', () {
+        testWidgets(
+          'adds $RandomWordRequested event when find new word button is tapped',
+          (tester) async {
+            await tester.pumpApp(
+              widget,
+              layout: IoLayoutData.large,
+            );
+
+            await tester.tap(find.text(l10n.findNewWord));
+            await tester.pumpAndSettle();
+
+            verify(
+              () => randomWordSelectionBloc.add(RandomWordRequested()),
+            ).called(1);
+          },
+        );
+
+        testWidgets(
+          'plays ${Assets.music.startButton1} when find new word button is '
+          'tapped',
+          (tester) async {
+            await tester.pumpApp(
+              widget,
+              layout: IoLayoutData.large,
+              audioController: audioController,
+            );
+
+            await tester.tap(find.text(l10n.findNewWord));
+            await tester.pumpAndSettle();
+
+            verify(
+              () => audioController.playSfx(Assets.music.startButton1),
+            ).called(1);
+          },
+        );
+      });
+
+      group('for small layout', () {
+        testWidgets(
+          'adds $RandomWordRequested event when find new word button is tapped',
+          (tester) async {
+            await tester.pumpApp(
+              widget,
+              layout: IoLayoutData.small,
+            );
+
+            await tester.tap(find.text(l10n.findWord));
+            await tester.pumpAndSettle();
+
+            verify(
+              () => randomWordSelectionBloc.add(RandomWordRequested()),
+            ).called(1);
+          },
+        );
+
+        testWidgets(
+          'plays ${Assets.music.startButton1} when find new word button is '
+          'tapped',
+          (tester) async {
+            await tester.pumpApp(
+              widget,
+              layout: IoLayoutData.small,
+              audioController: audioController,
+            );
+
+            await tester.tap(find.text(l10n.findWord));
+            await tester.pumpAndSettle();
+
+            verify(
+              () => audioController.playSfx(Assets.music.startButton1),
+            ).called(1);
+          },
+        );
+      });
+    });
   });
 }