155 lines
7.1 KiB
Dart
155 lines
7.1 KiB
Dart
import 'package:customer/screen_ui/auth_screens/sign_up_screen.dart';
|
|
import 'package:flutter/gestures.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:get/get.dart';
|
|
import 'package:pin_code_fields/pin_code_fields.dart';
|
|
import '../../constant/assets.dart';
|
|
import '../../controllers/otp_verification_controller.dart';
|
|
import '../../controllers/theme_controller.dart';
|
|
import '../../themes/app_them_data.dart';
|
|
import '../../themes/round_button_fill.dart';
|
|
|
|
class OtpVerificationScreen extends StatelessWidget {
|
|
const OtpVerificationScreen({super.key});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return GetX<OtpVerifyController>(
|
|
init: OtpVerifyController(),
|
|
builder: (controller) {
|
|
final themeController = Get.find<ThemeController>();
|
|
final isDark = themeController.isDark.value;
|
|
|
|
return Scaffold(
|
|
appBar: AppBar(
|
|
elevation: 0,
|
|
automaticallyImplyLeading: false,
|
|
leading: IconButton(
|
|
icon: Icon(Icons.arrow_back, size: 20, color: isDark ? AppThemeData.greyDark500 : AppThemeData.grey500),
|
|
onPressed: () {
|
|
Get.back();
|
|
},
|
|
),
|
|
actions: [
|
|
TextButton(
|
|
onPressed: () {
|
|
// Handle skip action
|
|
},
|
|
style: TextButton.styleFrom(padding: const EdgeInsets.symmetric(horizontal: 12), minimumSize: const Size(0, 40), tapTargetSize: MaterialTapTargetSize.shrinkWrap),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Text("Skip".tr, style: AppThemeData.mediumTextStyle(color: isDark ? AppThemeData.greyDark500 : AppThemeData.grey500)),
|
|
Padding(
|
|
padding: const EdgeInsets.only(top: 2, left: 4),
|
|
child: Icon(Icons.arrow_forward_ios, size: 16, color: isDark ? AppThemeData.greyDark500 : AppThemeData.grey500),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
body: SafeArea(
|
|
child: Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 16),
|
|
child: Column(
|
|
children: [
|
|
Expanded(
|
|
child: SingleChildScrollView(
|
|
padding: const EdgeInsets.only(bottom: 20),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
"${"Enter the OTP sent to your mobile".tr} ${controller.countryCode} ${controller.maskPhoneNumber(controller.phoneNumber.value)}",
|
|
style: AppThemeData.boldTextStyle(fontSize: 24, color: isDark ? AppThemeData.greyDark900 : AppThemeData.grey900),
|
|
),
|
|
|
|
const SizedBox(height: 30),
|
|
|
|
/// OTP Field
|
|
PinCodeTextField(
|
|
appContext: context,
|
|
length: 6,
|
|
controller: controller.otpController.value,
|
|
keyboardType: TextInputType.number,
|
|
cursorColor: isDark ? AppThemeData.greyDark500 : AppThemeData.grey500,
|
|
enablePinAutofill: true,
|
|
hintCharacter: "-",
|
|
textStyle: AppThemeData.semiBoldTextStyle(fontSize: 18, color: isDark ? AppThemeData.greyDark800 : AppThemeData.grey800),
|
|
pinTheme: PinTheme(
|
|
shape: PinCodeFieldShape.box,
|
|
borderRadius: BorderRadius.circular(12),
|
|
fieldHeight: 54,
|
|
fieldWidth: 51,
|
|
inactiveColor: isDark ? AppThemeData.greyDark200 : AppThemeData.grey200,
|
|
inactiveFillColor: Colors.transparent,
|
|
selectedColor: isDark ? AppThemeData.greyDark400 : AppThemeData.grey400,
|
|
selectedFillColor: isDark ? AppThemeData.surfaceDark : AppThemeData.grey50,
|
|
activeColor: isDark ? AppThemeData.greyDark200 : AppThemeData.grey200,
|
|
activeFillColor: Colors.transparent,
|
|
errorBorderColor: AppThemeData.danger300,
|
|
disabledColor: Colors.transparent,
|
|
borderWidth: 1,
|
|
),
|
|
enableActiveFill: true,
|
|
onCompleted: (v) {},
|
|
onChanged: (value) {},
|
|
),
|
|
|
|
/// Resend OTP
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Image.asset(AppAssets.icArrowsClockwise, height: 20, width: 20),
|
|
TextButton(
|
|
onPressed: () {
|
|
controller.otpController.value.clear();
|
|
controller.sendOTP();
|
|
},
|
|
child: Text("Resend OTP".tr, style: AppThemeData.semiBoldTextStyle(color: AppThemeData.info400, fontSize: 16)),
|
|
),
|
|
],
|
|
),
|
|
|
|
const SizedBox(height: 10),
|
|
|
|
/// Verify Button
|
|
RoundedButtonFill(
|
|
title: "Verify".tr,
|
|
onPress: controller.verifyOtp,
|
|
color: isDark ? AppThemeData.greyDark900 : AppThemeData.grey900,
|
|
textColor: isDark ? AppThemeData.surfaceDark : Colors.white,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
Padding(
|
|
padding: const EdgeInsets.only(bottom: 10),
|
|
child: Center(
|
|
child: Text.rich(
|
|
TextSpan(
|
|
text: "Didn't have an account?".tr,
|
|
style: AppThemeData.mediumTextStyle(color: isDark ? AppThemeData.greyDark800 : AppThemeData.grey800),
|
|
children: [
|
|
TextSpan(
|
|
text: "Sign up".tr,
|
|
style: AppThemeData.mediumTextStyle(color: AppThemeData.ecommerce300, decoration: TextDecoration.underline),
|
|
recognizer: TapGestureRecognizer()..onTap = () => Get.offAll(() => const SignUpScreen()),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
},
|
|
);
|
|
}
|
|
}
|