feat: use PinballButton to start the game (#288)

lib/game/view/widgets/play_button_overlay.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:pinball/game/pinball_game.dart';
 import 'package:pinball/l10n/l10n.dart';
 import 'package:pinball/select_character/select_character.dart';
+import 'package:pinball_ui/pinball_ui.dart';
 
 /// {@template play_button_overlay}
 /// [Widget] that renders the button responsible to starting the game
@@ -20,14 +21,12 @@ class PlayButtonOverlay extends StatelessWidget {
   Widget build(BuildContext context) {
     final l10n = context.l10n;
 
-    return Center(
-      child: ElevatedButton(
-        onPressed: () async {
-          _game.gameFlowController.start();
-          await showCharacterSelectionDialog(context);
-        },
-        child: Text(l10n.play),
-      ),
+    return PinballButton(
+      text: l10n.play,
+      onTap: () async {
+        _game.gameFlowController.start();
+        await showCharacterSelectionDialog(context);
+      },
     );
   }
 }

packages/pinball_ui/lib/src/widgets/pinball_button.dart

@@ -21,26 +21,29 @@ class PinballButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return DecoratedBox(
-      decoration: BoxDecoration(
-        image: DecorationImage(
-          image: AssetImage(Assets.images.button.pinballButton.keyName),
+    return Material(
+      color: PinballColors.transparent,
+      child: DecoratedBox(
+        decoration: BoxDecoration(
+          image: DecorationImage(
+            image: AssetImage(Assets.images.button.pinballButton.keyName),
+          ),
         ),
-      ),
-      child: Center(
-        child: InkWell(
-          onTap: onTap,
-          child: Padding(
-            padding: const EdgeInsets.symmetric(
-              horizontal: 32,
-              vertical: 16,
-            ),
-            child: Text(
-              text,
-              style: Theme.of(context)
-                  .textTheme
-                  .headline3!
-                  .copyWith(color: PinballColors.white),
+        child: Center(
+          child: InkWell(
+            onTap: onTap,
+            child: Padding(
+              padding: const EdgeInsets.symmetric(
+                horizontal: 32,
+                vertical: 16,
+              ),
+              child: Text(
+                text,
+                style: Theme.of(context)
+                    .textTheme
+                    .headline3!
+                    .copyWith(color: PinballColors.white),
+              ),
             ),
           ),
         ),