How to remove middle numbers in PinFieldAutoFill flutter? - flutter

Question

When I entering an OTP it continuously adding numbers from the beginning but how do I change the middle number from entered 6 digit OTP
I have used this in Model Bottom Sheet
Column(
children: [
SizedBox(
height: 50,
child: PinFieldAutoFill(
textInputAction: TextInputAction.previous,
keyboardType: TextInputType.number,
autoFocus: true,
focusNode: FocusNode(),
cursor: Cursor(
width: 2,
height: 40,
color: Colors.red,
radius: const Radius.circular(5),
enabled: true,
),
decoration: UnderlineDecoration(
textStyle: const TextStyle(
fontSize: 20, color: Colors.black),
colorBuilder: FixedColorBuilder(
Colors.black.withOpacity(0.3)),
),
currentCode: code,
codeLength: 6,
onCodeSubmitted: (verificationCode) {
debugPrint("CURRENT CODE CHANGES 2: " +
verificationCode.toString());
otpNumber = verificationCode;
},
onCodeChanged: (verificationCode) {
debugPrint("CURRENT CODE CHANGES 3: " +
verificationCode.toString());
if (verificationCode.toString().length == 6) {
// FocusScope.of(context)
// .requestFocus(FocusNode());
setState(() {
code = verificationCode.toString();
otpNumber = verificationCode.toString();
});
}
},
),
// child: OtpTextField(
// onSubmit: (String verificationCode) {
// setState(() {
// otpNumber = verificationCode;
// debugPrint(otpNumber);
// });
// },
// cursorColor: primaryDarkColor,
// numberOfFields: 6,
// borderColor: primaryDarkColor,
// focusedBorderColor: primaryColor,
// enabledBorderColor: primaryDarkColor,
// fillColor: hintColor,
// borderWidth: 2.0,
// fieldWidth: 40,
// mainAxisAlignment:
// MainAxisAlignment.spaceEvenly,
// filled: true,
// showFieldAsBox: true,
// textStyle: kkTitleTextStyle,
// ),
),
const SizedBox(height: 20),
SizedBox(
height: 45,
width: MediaQuery.of(context).size.width * 0.43,
child: ElevatedButton(
onPressed: () {
verify();
},
child: const Text('Submit OTP'),
style: ElevatedButton.styleFrom(
padding: const EdgeInsets.symmetric(
horizontal: 20.0),
primary: primaryDarkColor,
textStyle: kkTitleTextStyle,
),
),
),
const SizedBox(height: 20),
isResend
? const Center(
child: Text(
'Didn't receive any OTP ?',
style: kkMediumGrayTextStyle,
),
)
: const Center(
child: Text(
'',
style: kkMediumGrayTextStyle,
),
),
const SizedBox(height: 5),
isResend
? GestureDetector(
onTap: () {
setModalState(() {
if (_controller.isCompleted) {
fetchOtp(phoneNumberController.text
.toString());
_controller = AnimationController(
duration:
const Duration(seconds: 30),
vsync: this);
_controller.forward();
isResend = false;
} else {
debugPrint('TIME IS RUNNING');
}
debugPrint(
'VALUE: ${_controller.value}');
debugPrint(
'STATUS: ${_controller.status}');
debugPrint(
'IS_ANIMATING: ${_controller.isAnimating}');
debugPrint(
'IS_COMPLETED: ${_controller.isCompleted}');
});
},
child: Row(
mainAxisAlignment:
MainAxisAlignment.center,
children: [
const Text(
'Resend OTP',
style: kkTitleTextStyle,
),
const SizedBox(width: 10.0),
CountDown(
animation: StepTween(
begin: 30,
end: 0,
).animate(_controller),
),
],
),
)
: GestureDetector(
onTap: () {
// setState(() {
// if (_controller.isCompleted) {
// fetchOtp(
// phoneNumberController.text.toString());
// _controller = AnimationController(
// duration: const Duration(seconds: 30),
// vsync: this);
// _controller.forward();
// } else {
// debugPrint('TIME IS RUNNING');
// }
//
// });
debugPrint('VALUE: ${_controller.value}');
debugPrint(
'STATUS: ${_controller.status}');
debugPrint(
'IS_ANIMATING: ${_controller.isAnimating}');
debugPrint(
'IS_COMPLETED: ${_controller.isCompleted}');
},
child: Row(
mainAxisAlignment:
MainAxisAlignment.center,
children: [
const Text(
'Seconds Remaining',
style: kkTitleTextStyle,
),
const SizedBox(width: 10.0),
CountDown(
animation: StepTween(
begin: 30,
end: 0,
).animate(_controller),
),
],
),
),
],
)