[auth] Add onPressed color for Custom Keyboard in App Lock (#3361)

## Description ## Tests
ente-io · Sep 20, 2024 · 29a72ac · 29a72ac
2 parents 891af00 + 36079aa
commit 29a72ac
Showing 1 changed file with 67 additions and 35 deletions.
diff --git a/auth/lib/ui/settings/lock_screen/custom_pin_keypad.dart b/auth/lib/ui/settings/lock_screen/custom_pin_keypad.dart
@@ -140,12 +140,13 @@ class CustomPinKeypad extends StatelessWidget {
   }
 }
 
-class _Button extends StatelessWidget {
+class _Button extends StatefulWidget {
   final String number;
   final String text;
   final VoidCallback? onTap;
   final bool muteButton;
   final Widget? icon;
+
   const _Button({
     required this.number,
     required this.text,
@@ -154,47 +155,78 @@ class _Button extends StatelessWidget {
     this.icon,
   });
 
+  @override
+  State<_Button> createState() => _ButtonState();
+}
+
+class _ButtonState extends State<_Button> {
+  bool isPressed = false;
+
+  void _onTapDown(TapDownDetails details) {
+    setState(() {
+      isPressed = true;
+    });
+  }
+
+  void _onTapUp(TapUpDetails details) async {
+    setState(() {
+      isPressed = false;
+    });
+  }
+
   @override
   Widget build(BuildContext context) {
     final colorScheme = getEnteColorScheme(context);
     final textTheme = getEnteTextTheme(context);
     return Expanded(
       child: GestureDetector(
-        onTap: onTap,
-        child: Container(
-          margin: const EdgeInsets.all(4),
-          decoration: BoxDecoration(
-            shape: BoxShape.rectangle,
-            borderRadius: BorderRadius.circular(6),
-            color: muteButton
-                ? colorScheme.fillFaintPressed
-                : icon == null
-                    ? colorScheme.backgroundElevated2
-                    : null,
-          ),
-          child: Center(
-            child: muteButton
-                ? const SizedBox.shrink()
-                : icon != null
-                    ? Container(
-                        child: icon,
-                      )
-                    : Container(
-                        padding: const EdgeInsets.all(4),
-                        child: Column(
-                          mainAxisAlignment: MainAxisAlignment.center,
-                          children: [
-                            Text(
-                              number,
-                              style: textTheme.h3,
-                            ),
-                            Text(
-                              text,
-                              style: textTheme.tinyBold,
-                            ),
-                          ],
+        onTap: widget.onTap,
+        onTapDown: _onTapDown,
+        onTapUp: _onTapUp,
+        child: AnimatedContainer(
+          duration: const Duration(milliseconds: 100),
+          curve: Curves.easeOut,
+          child: Container(
+            margin: const EdgeInsets.all(4),
+            decoration: BoxDecoration(
+              shape: BoxShape.rectangle,
+              borderRadius: BorderRadius.circular(6),
+              color: isPressed
+                  ? colorScheme.backgroundElevated
+                  : widget.muteButton
+                      ? colorScheme.fillFaintPressed
+                      : widget.icon == null
+                          ? colorScheme.backgroundElevated2
+                          : null,
+            ),
+            child: Center(
+              child: widget.muteButton
+                  ? const SizedBox.shrink()
+                  : widget.icon != null
+                      ? Container(
+                          padding: const EdgeInsets.symmetric(
+                            horizontal: 4,
+                            vertical: 10,
+                          ),
+                          child: widget.icon,
+                        )
+                      : Container(
+                          padding: const EdgeInsets.all(4),
+                          child: Column(
+                            mainAxisAlignment: MainAxisAlignment.center,
+                            children: [
+                              Text(
+                                widget.number,
+                                style: textTheme.h3,
+                              ),
+                              Text(
+                                widget.text,
+                                style: textTheme.tinyBold,
+                              ),
+                            ],
+                          ),
                         ),
-                      ),
+            ),
           ),
         ),
       ),