lib/application/component/otp/otp_view.dart

@@ -1,4 +1,3 @@
-import 'package:cims_apps/application/component/button/button_view.dart';
 import 'package:cims_apps/application/component/otp/otp_viewmodel.dart';
 import 'package:cims_apps/application/component/text_caption/text_caption.dart';
 import 'package:cims_apps/application/theme/color_palette.dart';
@@ -61,26 +60,48 @@ class OtpView extends StatelessWidget {
                   borderRadius: BorderRadius.circular(8),
                 ),
               ),
-            ),
-            ButtonView(
-              name: 'Verify',
-              // disabled: !provider.buttonIsActive,
-              // backgroundColor: ColorPalette.grey,
-              onPressed: () {
-                if (provider.formKey.currentState!.validate()) {
-                  final pin = provider.ctrlPin.text;
-                  provider.validateOtp(pin).then((value) {
-                    if (value) {
-                      routePush(context,
-                          page: const RegistrationPasswordView(),
-                          routeType: RouteType.pushReplace);
-                    } else {
-                      provider.ctrlPin.clear();
-                    }
-                  });
+              onCompleted: (pin) => provider.enableButton(),
+              onChanged: (value) {
+                if (provider.ctrlPin.length != 4) {
+                  provider.enableButton(isActive: false);
                 }
               },
             ),
+            Container(
+              margin: const EdgeInsets.symmetric(vertical: 32.0),
+              width: SizeConfig.width,
+              height: SizeConfig.height * .07,
+              child: ElevatedButton(
+                style: ElevatedButton.styleFrom(
+                  elevation: 0,
+                  backgroundColor: ColorPalette.primary,
+                ),
+                onPressed: !provider.buttonIsActive
+                    ? null
+                    : () {
+                        if (provider.formKey.currentState!.validate()) {
+                          final pin = provider.ctrlPin.text;
+                          provider.validateOtp(pin).then((value) {
+                            if (value) {
+                              routePush(context,
+                                  page: const RegistrationPasswordView(),
+                                  routeType: RouteType.pushReplace);
+                            } else {
+                              provider.ctrlPin.clear();
+                            }
+                          });
+                        }
+                      },
+                child: const Text(
+                  'Verify',
+                  style: TextStyle(
+                    fontSize: 16,
+                    fontWeight: FontWeight.bold,
+                    color: Colors.white,
+                  ),
+                ),
+              ),
+            ),
           ],
         ));
   }
@@ -106,7 +127,9 @@ class OtpView extends StatelessWidget {
                     ),
                     _otpContent(context, provider),
                     TextButton(
-                        onPressed: () {},
+                        onPressed: () {
+                          provider.ctrlPin.clear();
+                        },
                         child: const Text(
                           'Resend Code',
                           style: TextStyle(

lib/application/component/otp/otp_viewmodel.dart

@@ -14,4 +14,9 @@ class OtpViewModel extends ChangeNotifier {
     }
     return false;
   }
+
+  void enableButton({bool isActive = true}) {
+    buttonIsActive = isActive;
+    notifyListeners();
+  }
 }