applied animations and haptics to TPIN screen

lib/features/fund_transfer/screens/transaction_pin_screen.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:kmobile/api/services/auth_service.dart';
 import 'package:kmobile/di/injection.dart';
 import 'package:kmobile/features/fund_transfer/screens/tpin_prompt_screen.dart';
@@ -14,15 +15,40 @@ class TransactionPinScreen extends StatefulWidget {
   State<TransactionPinScreen> createState() => _TransactionPinScreenState();
 }
 
-class _TransactionPinScreenState extends State<TransactionPinScreen> {
+class _TransactionPinScreenState extends State<TransactionPinScreen>
+    with SingleTickerProviderStateMixin {
   final List<String> _pin = [];
   bool _loading = true;
   bool _isSubmitting = false;
 
+  late final AnimationController _bounceController;
+  late final Animation<double> _bounceAnimation;
+
   @override
   void initState() {
     super.initState();
     _checkIfTpinIsSet();
+
+    _bounceController = AnimationController(
+      vsync: this,
+      duration: const Duration(milliseconds: 150),
+    );
+    _bounceAnimation = Tween<double>(begin: 1.0, end: 1.1).animate(
+      CurvedAnimation(
+          parent: _bounceController,
+          curve: Curves.elasticIn,
+          reverseCurve: Curves.elasticOut),
+    )..addStatusListener((status) {
+        if (status == AnimationStatus.completed) {
+          _bounceController.reverse();
+        }
+      });
+  }
+
+  @override
+  void dispose() {
+    _bounceController.dispose();
+    super.dispose();
   }
 
   Future<void> _checkIfTpinIsSet() async {
@@ -57,6 +83,7 @@ class _TransactionPinScreenState extends State<TransactionPinScreen> {
         if (_pin.isNotEmpty) _pin.removeLast();
       } else if (_pin.length < 6) {
         _pin.add(value);
+        _bounceController.forward(from: 0);
       }
     });
   }
@@ -83,29 +110,46 @@ class _TransactionPinScreenState extends State<TransactionPinScreen> {
   }
 
   Widget _buildPinIndicators() {
-    return Row(
+    return AnimatedBuilder(
-      mainAxisAlignment: MainAxisAlignment.center,
+        animation: _bounceAnimation,
-      children: List.generate(6, (index) {
+        builder: (context, child) {
-        return Container(
+          return Row(
-          margin: const EdgeInsets.symmetric(horizontal: 8),
+            mainAxisAlignment: MainAxisAlignment.center,
-          width: 20,
+            children: List.generate(6, (index) {
-          height: 20,
+              final isAnimating =
-          decoration: BoxDecoration(
+                  index == _pin.length - 1 && _bounceController.isAnimating;
-            shape: BoxShape.circle,
+              return Transform.scale(
-            border: Border.all(color: Theme.of(context).primaryColor, width: 2),
+                scale: isAnimating ? _bounceAnimation.value : 1.0,
-            color: index < _pin.length
+                child: Container(
-                ? Theme.of(context).colorScheme.primary
+                  margin: const EdgeInsets.symmetric(horizontal: 8),
-                : Colors.transparent,
+                  width: 30,
-          ),
+                  height: 30,
-        );
+                  decoration: BoxDecoration(
-      }),
+                      shape: BoxShape.circle,
-    );
+                      color: index < _pin.length
+                          ? Theme.of(context).colorScheme.onSurfaceVariant
+                          : Theme.of(context)
+                              .colorScheme
+                              .surfaceContainerHighest),
+                ),
+              );
+            }),
+          );
+        });
   }
 
   Widget _buildKey(String label, {IconData? icon}) {
     return Expanded(
       child: InkWell(
-        onTap: () => label == 'done' ? _submitPin() : _onKeyPressed(label),
+        onTap: () {
+          HapticFeedback.lightImpact();
+          if (label == 'done') {
+            _submitPin();
+          } else {
+            _onKeyPressed(label);
+          }
+        },
+        borderRadius: BorderRadius.circular(48),
         child: Padding(
           padding: const EdgeInsets.symmetric(vertical: 20),
           child: Center(
@@ -147,22 +191,25 @@ class _TransactionPinScreenState extends State<TransactionPinScreen> {
       ),
       body: _loading
           ? const Center(child: CircularProgressIndicator())
-          : Padding(
+          : SafeArea(
-              padding: const EdgeInsets.only(bottom: 20.0),
+              child: Padding(
-              child: Column(
+                padding: const EdgeInsets.only(bottom: 20.0),
-                children: [
+                child: Column(
-                  const Spacer(),
+                  children: [
-                  Text(
+                    const Spacer(),
-                    AppLocalizations.of(context).enterTpin,
+                    Text(
-                    style: const TextStyle(fontSize: 18),
+                      AppLocalizations.of(context).enterTpin,
-                  ),
+                      style: const TextStyle(fontSize: 18),
-                  const SizedBox(height: 20),
+                    ),
-                  _buildPinIndicators(),
+                    const SizedBox(height: 50),
-                  const Spacer(),
+                    _buildPinIndicators(),
-                  _buildKeypad(),
+                    const Spacer(),
-                ],
+                    _buildKeypad(),
+                  ],
+                ),
               ),
             ),
     );
   }
 }
+