Refactor: Introduce AppOtpInput widget and update dependencies

tulsi-7span · tulsi-7span · commit c36ea3cb3a59 · 2025-06-27T17:59:59.000+05:30
- Added `pinput` dependency to `app_ui/pubspec.yaml`.
- Removed `pinput` dependency from `app_core/pubspec.yaml`.
- Created `AppOtpInput` widget in `app_ui` to encapsulate OTP input logic.
- Replaced direct usage of `Pinput` with `AppOtpInput` in `VerifyOTPScreen`.
- Updated various dependency versions in `widgetbook/pubspec.lock`.
- Updated Flutter SDK constraint in `widgetbook/pubspec.lock`.
diff --git a/apps/app_core/lib/modules/verify_otp/screens/verify_otp_screen.dart b/apps/app_core/lib/modules/verify_otp/screens/verify_otp_screen.dart
@@ -8,9 +8,7 @@ import 'package:app_translations/app_translations.dart';
 import 'package:app_ui/app_ui.dart';
 import 'package:auto_route/auto_route.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:pinput/pinput.dart';
 
 @RoutePage()
 class VerifyOTPScreen extends StatefulWidget implements AutoRouteWrapper {
@@ -42,88 +40,84 @@ class _VerifyOTPScreenState extends State<VerifyOTPScreen> with TickerProviderSt
         automaticallyImplyLeading: true,
         title: context.t.verify_otp,
       ),
-      body: SafeArea(
-        child: BlocConsumer<VerifyOTPBloc, VerifyOTPState>(
-          listener: (context, state) {
-            if (state.verifyOtpStatus == ApiStatus.loaded && state.otp.value == '222222') {
-              showAppSnackbar(context, 'OTP verified successfully!');
-              context.replaceRoute(const ChangePasswordRoute());
-            } else if (state.verifyOtpStatus == ApiStatus.error) {
-              showAppSnackbar(context, 'Invalid OTP', type: SnackbarType.failed);
-            }
-          },
-          builder: (context, state) {
-            return ListView(
-              padding: const EdgeInsets.all(Insets.small12),
-              children: [
-                VSpace.large24(),
-                SlideAndFadeAnimationWrapper(delay: 100, child: Center(child: Assets.images.logo.image(width: 100))),
-                VSpace.large24(),
-                SlideAndFadeAnimationWrapper(
-                  delay: 200,
-                  child: Center(child: AppText.xsSemiBold(text: context.t.welcome, fontSize: 16)),
+      body: BlocConsumer<VerifyOTPBloc, VerifyOTPState>(
+        listener: (context, state) {
+          if (state.verifyOtpStatus == ApiStatus.loaded && state.otp.value == '222222') {
+            showAppSnackbar(context, 'OTP verified successfully!');
+            context.replaceRoute(const ChangePasswordRoute());
+          } else if (state.verifyOtpStatus == ApiStatus.error) {
+            showAppSnackbar(context, 'Invalid OTP', type: SnackbarType.failed);
+          }
+        },
+        builder: (context, state) {
+          return ListView(
+            padding: const EdgeInsets.all(Insets.small12),
+            children: [
+              VSpace.large24(),
+              SlideAndFadeAnimationWrapper(delay: 100, child: Center(child: Assets.images.logo.image(width: 100))),
+              VSpace.large24(),
+              SlideAndFadeAnimationWrapper(
+                delay: 200,
+                child: Center(child: AppText.xsSemiBold(text: context.t.welcome, fontSize: 16)),
+              ),
+              VSpace.large24(),
+              AppTextField(initialValue: widget.emailAddress, label: context.t.email, isReadOnly: true),
+              VSpace.medium16(),
+              Center(
+                child: Padding(
+                  padding: const EdgeInsets.all(Insets.small12),
+                  child: AppText.sSemiBold(text: context.t.enter_otp),
                 ),
-                VSpace.large24(),
-                AppTextField(initialValue: widget.emailAddress, label: context.t.email, isReadOnly: true),
-                VSpace.medium16(),
+              ),
+              VSpace.small12(),
+              AppOtpInput(
+                errorText: state.otp.error != null ? context.t.pin_incorrect : null,
+                onChanged: (value) {
+                  context.read<VerifyOTPBloc>().add(VerifyOTPChanged(value));
+                },
+              ),
+
+              VSpace.xsmall8(),
+              if (state.isTimerRunning)
                 Center(
-                  child: Padding(
-                    padding: const EdgeInsets.all(Insets.small12),
-                    child: AppText.sSemiBold(text: context.t.enter_otp),
+                  child: AppTimer(
+                    seconds: 30,
+                    onFinished: () {
+                      context.read<VerifyOTPBloc>().add(const TimerFinishedEvent());
+                    },
                   ),
                 ),
-                VSpace.small12(),
-                Pinput(
-                  length: 6,
-                  separatorBuilder: (index) => HSpace.xxsmall4(),
-                  errorText: state.otp.error != null ? context.t.pin_incorrect : null,
-                  onChanged: (value) {
-                    context.read<VerifyOTPBloc>().add(VerifyOTPChanged(value));
-                  },
-                  inputFormatters: [FilteringTextInputFormatter.digitsOnly],
-                ),
-                VSpace.xsmall8(),
-                if (state.isTimerRunning)
-                  Center(
-                    child: AppTimer(
-                      seconds: 30,
-                      onFinished: () {
-                        context.read<VerifyOTPBloc>().add(const TimerFinishedEvent());
-                      },
-                    ),
+              VSpace.small12(),
+              Row(
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  AppText.xsRegular(color: context.colorScheme.black, text: context.t.did_not_receive_otp),
+                  AppButton(
+                    text: context.t.resend_otp,
+                    buttonType: ButtonType.text,
+                    textColor: context.colorScheme.primary400,
+                    onPressed:
+                        state.isTimerRunning
+                            ? null
+                            : () {
+                              FocusScope.of(context).unfocus();
+                              context.read<VerifyOTPBloc>().add(const ResendEmailEvent());
+                            },
                   ),
-                VSpace.small12(),
-                Row(
-                  mainAxisAlignment: MainAxisAlignment.center,
-                  children: [
-                    AppText.xsRegular(color: context.colorScheme.black, text: context.t.did_not_receive_otp),
-                    AppButton(
-                      text: context.t.resend_otp,
-                      buttonType: ButtonType.text,
-                      textColor: context.colorScheme.primary400,
-                      onPressed:
-                          state.isTimerRunning
-                              ? null
-                              : () {
-                                FocusScope.of(context).unfocus();
-                                context.read<VerifyOTPBloc>().add(const ResendEmailEvent());
-                              },
-                    ),
-                    HSpace.xsmall8(),
-                  ],
-                ),
-                VSpace.large24(),
-                AppButton(
-                  isExpanded: true,
-                  padding: const EdgeInsets.symmetric(horizontal: Insets.large24),
-                  text: context.t.verify_otp,
-                  isLoading: state.verifyOtpStatus == ApiStatus.loading,
-                  onPressed: () => context.read<VerifyOTPBloc>().add(const VerifyButtonPressed()),
-                ),
-              ],
-            );
-          },
-        ),
+                  HSpace.xsmall8(),
+                ],
+              ),
+              VSpace.large24(),
+              AppButton(
+                isExpanded: true,
+                padding: const EdgeInsets.symmetric(horizontal: Insets.large24),
+                text: context.t.verify_otp,
+                isLoading: state.verifyOtpStatus == ApiStatus.loading,
+                onPressed: () => context.read<VerifyOTPBloc>().add(const VerifyButtonPressed()),
+              ),
+            ],
+          );
+        },
       ),
     );
   }
diff --git a/apps/app_core/pubspec.yaml b/apps/app_core/pubspec.yaml
@@ -89,7 +89,7 @@ dependencies:
 
   # Launch URL
   url_launcher: ^6.3.1
-  pinput: ^5.0.1
+
 
 dependency_overrides:
   web: ^1.0.0
diff --git a/packages/app_ui/lib/src/widgets/molecules/app_otp_input.dart b/packages/app_ui/lib/src/widgets/molecules/app_otp_input.dart
@@ -0,0 +1,23 @@
+import 'package:app_ui/app_ui.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:pinput/pinput.dart';
+
+class AppOtpInput extends StatelessWidget {
+  const AppOtpInput({required this.onChanged, this.length = 6, this.errorText, super.key});
+
+  final void Function(String) onChanged;
+  final int length;
+  final String? errorText;
+
+  @override
+  Widget build(BuildContext context) {
+    return Pinput(
+      length: length,
+      separatorBuilder: (index) => HSpace.xxsmall4(),
+      errorText: errorText,
+      onChanged: onChanged,
+      inputFormatters: [FilteringTextInputFormatter.digitsOnly],
+    );
+  }
+}
diff --git a/packages/app_ui/lib/src/widgets/molecules/molecules.dart b/packages/app_ui/lib/src/widgets/molecules/molecules.dart
@@ -4,6 +4,7 @@ export 'app_circular_progress_indicator.dart';
 export 'app_dialog.dart';
 export 'app_dropdown.dart';
 export 'app_network_image.dart';
+export 'app_otp_input.dart';
 export 'app_profile_image.dart';
 export 'app_refresh_indicator.dart';
 export 'app_textfield.dart';
diff --git a/packages/app_ui/pubspec.yaml b/packages/app_ui/pubspec.yaml
@@ -19,6 +19,7 @@ dependencies:
   timeago: ^3.7.0
   url_launcher: ^6.3.1
   flutter_svg: ^2.0.17
+  pinput: ^5.0.1
 
 dev_dependencies:
   flutter_test:
diff --git a/packages/widgetbook/pubspec.lock b/packages/widgetbook/pubspec.lock
@@ -52,10 +52,10 @@ packages:
     dependency: transitive
     description:
       name: async
-      sha256: d2872f9c19731c2e5f10444b14686eb7cc85c76274bd6c16e1816bff9a3bab63
+      sha256: "758e6d74e971c3e5aceb4110bfd6698efc7f501675bcfe0c775459a8140750eb"
       url: "https://pub.dev"
     source: hosted
-    version: "2.12.0"
+    version: "2.13.0"
   boolean_selector:
     dependency: transitive
     description:
@@ -236,10 +236,10 @@ packages:
     dependency: transitive
     description:
       name: fake_async
-      sha256: "6a95e56b2449df2273fd8c45a662d6947ce1ebb7aafe80e550a3f68297f3cacc"
+      sha256: "5368f224a74523e8d2e7399ea1638b37aecfca824a3cc4dfdf77bf1fa905ac44"
       url: "https://pub.dev"
     source: hosted
-    version: "1.3.2"
+    version: "1.3.3"
   ffi:
     dependency: transitive
     description:
@@ -419,10 +419,10 @@ packages:
     dependency: transitive
     description:
       name: leak_tracker
-      sha256: c35baad643ba394b40aac41080300150a4f08fd0fd6a10378f8f7c6bc161acec
+      sha256: "6bb818ecbdffe216e81182c2f0714a2e62b593f4a4f13098713ff1685dfb6ab0"
       url: "https://pub.dev"
     source: hosted
-    version: "10.0.8"
+    version: "10.0.9"
   leak_tracker_flutter_testing:
     dependency: transitive
     description:
@@ -583,6 +583,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "6.1.0"
+  pinput:
+    dependency: transitive
+    description:
+      name: pinput
+      sha256: "8a73be426a91fefec90a7f130763ca39772d547e92f19a827cf4aa02e323d35a"
+      url: "https://pub.dev"
+    source: hosted
+    version: "5.0.1"
   platform:
     dependency: transitive
     description:
@@ -659,10 +667,10 @@ packages:
     dependency: transitive
     description:
       name: skeletonizer
-      sha256: "0dcacc51c144af4edaf37672072156f49e47036becbc394d7c51850c5c1e884b"
+      sha256: a9ddf63900947f4c0648372b6e9987bc2b028db9db843376db6767224d166c31
       url: "https://pub.dev"
     source: hosted
-    version: "1.4.3"
+    version: "2.0.1"
   sky_engine:
     dependency: transitive
     description: flutter
@@ -812,6 +820,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.4.0"
+  universal_platform:
+    dependency: transitive
+    description:
+      name: universal_platform
+      sha256: "64e16458a0ea9b99260ceb5467a214c1f298d647c659af1bff6d3bf82536b1ec"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.0"
   url_launcher:
     dependency: transitive
     description:
@@ -920,10 +936,10 @@ packages:
     dependency: transitive
     description:
       name: vm_service
-      sha256: "0968250880a6c5fe7edc067ed0a13d4bae1577fe2771dcf3010d52c4a9d3ca14"
+      sha256: ddfa8d30d89985b96407efce8acbdd124701f96741f2d981ca860662f1c0dc02
       url: "https://pub.dev"
     source: hosted
-    version: "14.3.1"
+    version: "15.0.0"
   watcher:
     dependency: transitive
     description:
@@ -1006,4 +1022,4 @@ packages:
     version: "3.1.3"
 sdks:
   dart: ">=3.7.0 <4.0.0"
-  flutter: ">=3.29.0"
+  flutter: ">=3.31.0-0.0.pre"
