From 077d612e036c2d3025152a5f202dd3b84e32b691 Mon Sep 17 00:00:00 2001
From: Tommy Chow <tommyxchow@gmail.com>
Date: Sat, 25 Jun 2022 22:42:55 -0400
Subject: [PATCH] Add custom button widget (#90)

---
 lib/widgets/button.dart | 90 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 90 insertions(+)
 create mode 100644 lib/widgets/button.dart

diff --git a/lib/widgets/button.dart b/lib/widgets/button.dart
new file mode 100644
index 00000000..fb14811e
--- /dev/null
+++ b/lib/widgets/button.dart
@@ -0,0 +1,90 @@
+import 'package:flutter/material.dart';
+
+/// A custom button that scales down when tapped/held on (sorta like a real button).
+class Button extends StatefulWidget {
+  final Color? color;
+  final EdgeInsets padding;
+  final double? fontSize;
+  final Widget? icon;
+  final Function()? onPressed;
+  final Widget child;
+
+  const Button({
+    Key? key,
+    this.color,
+    this.padding = const EdgeInsets.symmetric(horizontal: 10.0),
+    this.fontSize,
+    this.icon,
+    required this.onPressed,
+    required this.child,
+  }) : super(key: key);
+
+  @override
+  State<Button> createState() => _ButtonState();
+}
+
+class _ButtonState extends State<Button> with SingleTickerProviderStateMixin {
+  late final _animationController = AnimationController(
+    vsync: this,
+    upperBound: 0.05,
+  );
+
+  @override
+  Widget build(BuildContext context) {
+    final buttonStyle = ElevatedButton.styleFrom(
+      primary: widget.color == null ? widget.color : Colors.transparent,
+      onPrimary: widget.color,
+      padding: widget.padding,
+      splashFactory: NoSplash.splashFactory,
+      textStyle: TextStyle(fontWeight: FontWeight.bold, fontSize: widget.fontSize),
+      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
+      elevation: widget.color == null ? 10.0 : 0.0,
+    ).copyWith(
+      elevation: widget.color == null
+          ? MaterialStateProperty.resolveWith(
+              (states) {
+                if (states.contains(MaterialState.pressed)) {
+                  return 0.0;
+                } else {
+                  return 10.0;
+                }
+              },
+            )
+          : MaterialStateProperty.all(0.0),
+    );
+
+    final button = widget.icon == null
+        ? ElevatedButton(
+            style: buttonStyle,
+            onPressed: widget.onPressed,
+            child: widget.child,
+          )
+        : ElevatedButton.icon(
+            style: buttonStyle,
+            onPressed: widget.onPressed,
+            icon: widget.icon!,
+            label: widget.child,
+          );
+
+    return AnimatedBuilder(
+      animation: _animationController,
+      child: Listener(
+        onPointerDown: (_) => _animationController.animateTo(0.05, curve: Curves.easeOutBack, duration: const Duration(milliseconds: 200)),
+        onPointerUp: (_) => _animationController.animateTo(0, curve: Curves.easeOutBack, duration: const Duration(milliseconds: 300)),
+        child: button,
+      ),
+      builder: (context, child) {
+        return Transform.scale(
+          scale: 1 - _animationController.value,
+          child: child,
+        );
+      },
+    );
+  }
+
+  @override
+  void dispose() {
+    _animationController.dispose();
+    super.dispose();
+  }
+}