Fix button not interactive beyond stack

thecodepapaya · Jul 17, 2023 · a461dee · a461dee
1 parent 2976e7f
commit a461dee
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 44 deletions.
diff --git a/lib/shadow_button/button_style.dart b/lib/shadow_button/button_style.dart
@@ -19,14 +19,18 @@ class _ShadowButtonState extends State<ShadowButton> with TickerProviderStateMix
 
     animationController = AnimationController(
       vsync: this,
-      duration: const Duration(milliseconds: 50),
+      duration: const Duration(milliseconds: 80),
     );
 
     final tween = Tween<double>(begin: 8, end: 0);
     final curvedAnimation = CurvedAnimation(parent: animationController, curve: Curves.easeOut);
     animation = tween.animate(curvedAnimation);
 
     animation.addListener(() {
+      if (animation.isCompleted) {
+        _animateRelease();
+      }
+
       setState(() {
         shadowOffset = animation.value;
       });
@@ -50,40 +54,34 @@ class _ShadowButtonState extends State<ShadowButton> with TickerProviderStateMix
 
   @override
   Widget build(BuildContext context) {
-    return GestureDetector(
-      behavior: HitTestBehavior.translucent,
-      onTap: _animatePress,
-      onTapDown: (_) => _animatePress(),
-      onTapUp: (_) => _animateRelease(),
-      onTapCancel: _animateRelease,
-      child: Padding(
-        padding: EdgeInsets.only(
-          bottom: shadowOffset,
-          right: shadowOffset,
-        ),
-        child: ShadowStyle(
-          borderRadius: 12,
-          offset: Offset(shadowOffset, shadowOffset),
-          child: ElevatedButton(
-            style: ButtonStyle(
-              side: const MaterialStatePropertyAll(
-                BorderSide(
-                  color: Colors.black,
-                  width: 2,
-                ),
-              ),
-              shape: MaterialStatePropertyAll<OutlinedBorder>(
-                RoundedRectangleBorder(
-                  borderRadius: BorderRadius.circular(12),
-                ),
+    return Padding(
+      padding: EdgeInsets.only(
+        bottom: shadowOffset,
+        right: shadowOffset,
+      ),
+      child: ShadowStyle(
+        borderRadius: 12,
+        offset: Offset(shadowOffset, shadowOffset),
+        child: ElevatedButton(
+          style: ButtonStyle(
+            elevation: const MaterialStatePropertyAll(0),
+            side: const MaterialStatePropertyAll(
+              BorderSide(
+                color: Colors.black,
+                width: 2,
               ),
-              fixedSize: const MaterialStatePropertyAll<Size>(
-                Size(100, 54),
+            ),
+            shape: MaterialStatePropertyAll<OutlinedBorder>(
+              RoundedRectangleBorder(
+                borderRadius: BorderRadius.circular(12),
               ),
             ),
-            onPressed: () {},
-            child: const Text('Hello'),
+            fixedSize: const MaterialStatePropertyAll<Size>(
+              Size(100, 54),
+            ),
           ),
+          onPressed: _animatePress,
+          child: const Text('Hello'),
         ),
       ),
     );

diff --git a/lib/shadow_button/content_card.dart b/lib/shadow_button/content_card.dart
@@ -6,18 +6,21 @@ class ContentCard extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return ShadowStyle(
-      child: SizedBox(
-        height: 200,
-        width: 320,
-        child: Container(
-          decoration: BoxDecoration(
-            border: Border.all(
-              color: Colors.black,
-              width: 2,
+    return Padding(
+      padding: const EdgeInsets.only(bottom: 40),
+      child: ShadowStyle(
+        child: SizedBox(
+          height: 200,
+          width: 320,
+          child: Container(
+            decoration: BoxDecoration(
+              border: Border.all(
+                color: Colors.black,
+                width: 2,
+              ),
+              color: Colors.red,
+              borderRadius: BorderRadius.circular(20),
             ),
-            color: Colors.red,
-            borderRadius: BorderRadius.circular(20),
           ),
         ),
       ),

diff --git a/lib/shadow_button/dash_card.dart b/lib/shadow_button/dash_card.dart
@@ -14,11 +14,11 @@ class DashCard extends StatelessWidget {
         ContentCard(),
         Positioned(
           right: 35,
-          bottom: -24,
+          bottom: 4,
           child: ShadowButton(),
         ),
         Positioned(
-          bottom: -24,
+          bottom: 4,
           right: 170,
           child: ShadowButton(),
         ),