changes
aamir-csol
2 months ago
parent
8f1e4500cc
commit
67e580447e
@ -0,0 +1,227 @@
|
||||
import 'dart:async';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:hmg_patient_app_new/core/utils/size_utils.dart';
|
||||
import 'package:hmg_patient_app_new/extensions/widget_extensions.dart';
|
||||
import 'package:hmg_patient_app_new/theme/colors.dart';
|
||||
import 'package:hmg_patient_app_new/widgets/appbar/app_bar_widget.dart';
|
||||
|
||||
class OTPVerificationPage extends StatefulWidget {
|
||||
final String phoneNumber;
|
||||
|
||||
const OTPVerificationPage({Key? key, required this.phoneNumber}) : super(key: key);
|
||||
|
||||
@override
|
||||
State<OTPVerificationPage> createState() => _OTPVerificationPageState();
|
||||
}
|
||||
|
||||
class _OTPVerificationPageState extends State<OTPVerificationPage> {
|
||||
final int _otpLength = 4;
|
||||
late final List<TextEditingController> _controllers;
|
||||
late final List<FocusNode> _focusNodes;
|
||||
|
||||
Timer? _resendTimer;
|
||||
int _resendTime = 60;
|
||||
bool _isOtpComplete = false;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_controllers = List.generate(_otpLength, (_) => TextEditingController());
|
||||
_focusNodes = List.generate(_otpLength, (_) => FocusNode());
|
||||
_startResendTimer();
|
||||
|
||||
// Focus the first field once the screen is built
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||
if (_focusNodes.isNotEmpty) {
|
||||
FocusScope.of(context).requestFocus(_focusNodes[0]);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
for (final c in _controllers) c.dispose();
|
||||
for (final f in _focusNodes) f.dispose();
|
||||
_resendTimer?.cancel();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
void _startResendTimer() {
|
||||
_resendTimer = Timer.periodic(const Duration(seconds: 1), (timer) {
|
||||
if (_resendTime > 0) {
|
||||
setState(() => _resendTime--);
|
||||
} else {
|
||||
timer.cancel();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
void _onOtpChanged(int index, String value) {
|
||||
if (value.length == 1 && index < _otpLength - 1) {
|
||||
_focusNodes[index + 1].requestFocus();
|
||||
} else if (value.isEmpty && index > 0) {
|
||||
_focusNodes[index - 1].requestFocus();
|
||||
}
|
||||
_checkOtpCompletion();
|
||||
}
|
||||
|
||||
void _checkOtpCompletion() {
|
||||
final isComplete = _controllers.every((c) => c.text.isNotEmpty);
|
||||
|
||||
if (isComplete != _isOtpComplete) {
|
||||
setState(() => _isOtpComplete = isComplete);
|
||||
|
||||
if (isComplete) {
|
||||
_verifyOtp();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
void _resendOtp() {
|
||||
if (_resendTime == 0) {
|
||||
setState(() => _resendTime = 60);
|
||||
_startResendTimer();
|
||||
autoFillOtp("1234");
|
||||
|
||||
// call resend API here
|
||||
}
|
||||
}
|
||||
|
||||
String _getMaskedPhoneNumber() {
|
||||
final phone = widget.phoneNumber;
|
||||
return phone.length > 4 ? '05xxxxxx${phone.substring(phone.length - 2)}' : phone;
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: CustomAppBar(
|
||||
hideLogoAndLang: true,
|
||||
onBackPressed: () {
|
||||
Navigator.of(context).pop();
|
||||
},
|
||||
onLanguageChanged: (lang) {},
|
||||
),
|
||||
body: SingleChildScrollView(
|
||||
child: Padding(
|
||||
padding: EdgeInsets.symmetric(horizontal: 24.h),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
SizedBox(height: 40.h),
|
||||
Text(
|
||||
'OTP Verification',
|
||||
style: TextStyle(fontSize: 24.fSize, fontWeight: FontWeight.bold),
|
||||
),
|
||||
SizedBox(height: 16.h),
|
||||
Text(
|
||||
'We have sent you the OTP code on ${_getMaskedPhoneNumber()} via SMS for registration verification',
|
||||
style: TextStyle(fontSize: 16.fSize, color: Colors.grey),
|
||||
),
|
||||
SizedBox(height: 40.h),
|
||||
|
||||
// OTP Input Fields
|
||||
SizedBox(
|
||||
height: 100,
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
||||
children: List.generate(_otpLength, (index) {
|
||||
return ValueListenableBuilder<TextEditingValue>(
|
||||
valueListenable: _controllers[index],
|
||||
builder: (context, value, _) {
|
||||
final hasText = value.text.isNotEmpty;
|
||||
|
||||
return AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 200),
|
||||
curve: Curves.easeInOut,
|
||||
width: 70.h,
|
||||
margin: EdgeInsets.symmetric(horizontal: 4.h),
|
||||
decoration: RoundedRectangleBorder()
|
||||
.toSmoothCornerDecoration(color: _isOtpComplete ? AppColors.successColor : (hasText ? AppColors.blackBgColor : AppColors.whiteColor), borderRadius: 16),
|
||||
child: Center(
|
||||
child: TextField(
|
||||
controller: _controllers[index],
|
||||
focusNode: _focusNodes[index],
|
||||
textAlign: TextAlign.center,
|
||||
keyboardType: TextInputType.number,
|
||||
maxLength: 1,
|
||||
style: TextStyle(
|
||||
fontSize: 40.fSize,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: AppColors.whiteColor,
|
||||
),
|
||||
decoration: InputDecoration(
|
||||
counterText: '',
|
||||
filled: true,
|
||||
fillColor: Colors.transparent,
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(18),
|
||||
borderSide: BorderSide.none,
|
||||
),
|
||||
),
|
||||
onChanged: (v) => _onOtpChanged(index, v),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
}),
|
||||
),
|
||||
),
|
||||
|
||||
const SizedBox(height: 32),
|
||||
|
||||
// Resend OTP
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
const Text("Didn't receive it? "),
|
||||
if (_resendTime > 0)
|
||||
Text(
|
||||
'resend in (${_resendTime.toString().padLeft(2, '0')}:00). ',
|
||||
style: const TextStyle(color: Colors.grey),
|
||||
)
|
||||
else
|
||||
GestureDetector(
|
||||
onTap: _resendOtp,
|
||||
child: const Text(
|
||||
'Resend',
|
||||
style: TextStyle(
|
||||
color: AppColors.primaryRedColor,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
void _verifyOtp() {
|
||||
final otp = _controllers.map((c) => c.text).join();
|
||||
debugPrint('Verifying OTP: $otp');
|
||||
|
||||
ScaffoldMessenger.of(context).showSnackBar(
|
||||
SnackBar(content: Text('Verifying OTP: $otp')),
|
||||
);
|
||||
}
|
||||
|
||||
/// Auto fill OTP into text fields
|
||||
void autoFillOtp(String otp) {
|
||||
if (otp.length != _otpLength) return;
|
||||
|
||||
for (int i = 0; i < _otpLength; i++) {
|
||||
_controllers[i].text = otp[i];
|
||||
}
|
||||
|
||||
// Move focus to the last field
|
||||
_focusNodes[_otpLength - 1].requestFocus();
|
||||
|
||||
// Trigger completion check and color update
|
||||
_checkOtpCompletion();
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue