redesign card theme

plum-tech · Aug 10, 2024 · 19b92f0 · 19b92f0
1 parent 7f62c1f
commit 19b92f0
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 21 deletions.
diff --git a/calcupiano/lib/app.dart b/calcupiano/lib/app.dart
@@ -74,11 +74,6 @@ class CalcuPianoAppState extends State<CalcuPianoApp> {
       appBarTheme: const AppBarTheme(
         backgroundColor: Colors.transparent,
       ),
-      cardTheme: raw.cardTheme.copyWith(
-        shape: const RoundedRectangleBorder(
-            side: BorderSide(color: Colors.transparent), //the outline color
-            borderRadius: BorderRadius.all(Radius.circular(16))),
-      ),
       splashColor: theme.enableRipple ? null : Colors.transparent,
       highlightColor: theme.enableRipple ? null : Colors.transparent,
       // TODO: Temporarily debug Visual effects on iOS.

diff --git a/calcupiano/lib/design/window.dart b/calcupiano/lib/design/window.dart
@@ -158,7 +158,7 @@ class _WindowState extends State<Window> {
       content,
     ].stack();
     content = content.inCard(color: Colors.transparent);*/
-    content = content.inCard();
+    content = content.inFilledCard();
     return content;
   }
 
@@ -180,7 +180,7 @@ class _WindowState extends State<Window> {
             .text(style: style, textAlign: TextAlign.center, overflow: TextOverflow.ellipsis, maxLines: 1)
             .padSymmetric(h: 10, v: 10)
             .align(at: Alignment.center),
-      ].stack().inCard(elevation: 2);
+      ].stack().inCard();
     }
     return AnimatedSize(
       duration: const Duration(milliseconds: 500),

diff --git a/calcupiano/lib/ui/piano.dart b/calcupiano/lib/ui/piano.dart
@@ -4,6 +4,7 @@ import 'package:calcupiano/foundation.dart';
 import 'package:calcupiano/r.dart';
 import 'package:calcupiano/theme/keyboard.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/rendering.dart';
 import 'package:provider/provider.dart';
 import 'package:rettulf/rettulf.dart';
 
@@ -73,15 +74,22 @@ class _PianoKeyboardState extends State<PianoKeyboard> {
   }
 
   Widget k(Note note, Size size) {
-    return PianoKey(note, fixedSoundpack: widget.fixedSoundpack).sizedIn(size);
+    return PianoKey(
+      note,
+      fixedSoundpack: widget.fixedSoundpack,
+    ).sizedIn(size);
   }
 }
 
 class PianoKey extends StatefulWidget {
   final Note note;
   final SoundpackProtocol? fixedSoundpack;
 
-  const PianoKey(this.note, {super.key, this.fixedSoundpack});
+  const PianoKey(
+    this.note, {
+    super.key,
+    this.fixedSoundpack,
+  });
 
   @override
   State<PianoKey> createState() => _PianoKeyState();
@@ -119,23 +127,36 @@ class _PianoKeyState extends State<PianoKey> {
     return buildKey(context);
   }
 
+  final $inkWell = GlobalKey();
+
   Widget buildKey(BuildContext context) {
-    final theme = Provider.of<KeyboardThemeModel?>(context);
     Widget txt = AutoSizeText(
       note.numberedText,
       style: const TextStyle(fontSize: 24),
     ).center();
-    txt = InkWell(
-      child: txt,
-      onTapDown: (_) async {
-        eventBus.fire(KeyUserPressedEvent(note));
-        await playSound();
-      },
-    );
-    return txt.inCard(
-      clip: Clip.hardEdge,
-      elevation: theme?.data.elevation,
-    );
+    return [
+      GestureDetector(
+        onTapDown: (_) {
+          onTap();
+        },
+      ),
+      Positioned.fill(
+        child: Card(
+          clipBehavior: Clip.hardEdge,
+          child: InkWell(
+            child: txt,
+            onTapDown: (_) {
+              onTap();
+            },
+          ),
+        ),
+      )
+    ].stack();
+  }
+
+  void onTap() async {
+    eventBus.fire(KeyUserPressedEvent(note));
+    await playSound();
   }
 
   Future<void> playSound() async {