@ -56,7 +56,7 @@ class OTPWidget extends StatefulWidget {
this . maxLength = 4 ,
this . controller ,
this . pinBoxWidth = 70.0 ,
this . pinBoxHeight = 7 0.0,
this . pinBoxHeight = 10 0.0,
this . pinTextStyle ,
this . onDone ,
this . defaultBorderColor = Colors . black ,
@ -102,7 +102,7 @@ class OTPWidgetState extends State<OTPWidget> with SingleTickerProviderStateMixi
} ) ;
widget . controller ? . text = text ;
widget . controller ? . selection = TextSelection . collapsed ( offset: text . length ) ;
} else if ( oldWidget . maxLength > widget . maxLength & & widget . maxLength > 0 & & text . length > 0 & & text . length > widget . maxLength ) {
} else if ( oldWidget . maxLength > widget . maxLength & & widget . maxLength > 0 & & text . isNotEmpty & & text . length > widget . maxLength ) {
setState ( ( ) {
text = text . substring ( 0 , widget . maxLength ) ;
currentIndex = text . length ;
@ -236,7 +236,7 @@ class OTPWidgetState extends State<OTPWidget> with SingleTickerProviderStateMixi
width: 0.0 ,
) ,
) ;
return Container (
return SizedBox (
width: _width ,
height: widget . pinBoxHeight ,
child: TextField (
@ -246,10 +246,7 @@ class OTPWidgetState extends State<OTPWidget> with SingleTickerProviderStateMixi
controller: widget . controller ,
keyboardType: widget . keyboardType ,
inputFormatters: widget . keyboardType = = TextInputType . number ? < TextInputFormatter > [ FilteringTextInputFormatter . digitsOnly ] : null ,
style: TextStyle (
height: 0.1 ,
color: Colors . transparent ,
) ,
style: TextStyle ( height: 0.1 , color: Colors . transparent ) ,
decoration: InputDecoration (
contentPadding: EdgeInsets . all ( 0 ) ,
focusedErrorBorder: transparentBorder ,
@ -259,10 +256,7 @@ class OTPWidgetState extends State<OTPWidget> with SingleTickerProviderStateMixi
focusedBorder: transparentBorder ,
counterText: null ,
counterStyle: null ,
helperStyle: TextStyle (
height: 0.0 ,
color: Colors . transparent ,
) ,
helperStyle: TextStyle ( height: 0.0 , color: Colors . transparent ) ,
labelStyle: TextStyle ( height: 0.1 ) ,
fillColor: Colors . transparent ,
border: InputBorder . none ,
@ -304,26 +298,25 @@ class OTPWidgetState extends State<OTPWidget> with SingleTickerProviderStateMixi
return _buildPinCode ( i , context ) ;
} ) ;
return Row (
children: pinCodes ,
mainAxisSize: MainAxisSize . min ,
mainAxisAlignment: MainAxisAlignment . spaceBetween ,
children: pinCodes ,
) ;
}
Widget _buildPinCode ( int i , BuildContext context ) {
Color pinBoxColor = widget . pinBoxColor ;
Color pinBoxColor ;
if ( widget . hasError ) {
pinBoxColor = widget . errorBorderColor ;
} else if ( text . length = = widget . maxLength ) {
/ / Check for completion first , before individual box logic
pinBoxColor = AppColors . successColor ;
} else if ( i < text . length ) {
pinBoxColor = AppColors . blackBgColor ; / / Custom color for filled boxes
} else {
pinBoxColor = widget . pinBoxColor ;
}
/ / Change color to success when all fields are complete
if ( text . length = = widget . maxLength ) {
pinBoxColor = AppColors . successColor ;
pinBoxColor = widget . pinBoxColor ; / / Default white color
}
EdgeInsets insets ;
@ -352,16 +345,69 @@ class OTPWidgetState extends State<OTPWidget> with SingleTickerProviderStateMixi
alignment: Alignment . center ,
padding: EdgeInsets . symmetric ( vertical: 4.0 , horizontal: 1.0 ) ,
margin: insets ,
child: _animatedTextBox ( strList [ i ] , i ) ,
decoration: RoundedRectangleBorder ( ) . toSmoothCornerDecoration (
color: pinBoxColor ,
borderRadius: widget . pinBoxRadius ,
) ,
width: widget . pinBoxWidth ,
height: widget . pinBoxHeight ,
child: _animatedTextBox ( strList [ i ] , i ) ,
) ;
}
/ / Widget _buildPinCode ( int i , BuildContext context ) {
/ / Color pinBoxColor = widget . pinBoxColor ;
/ /
/ / if ( widget . hasError ) {
/ / pinBoxColor = widget . errorBorderColor ;
/ / } else if ( i < text . length ) {
/ / pinBoxColor = AppColors . blackBgColor ; / / Custom color for filled boxes
/ / } else {
/ / pinBoxColor = widget . pinBoxColor ;
/ / }
/ /
/ / / / Change color to success when all fields are complete
/ / if ( text . length = = widget . maxLength ) {
/ / pinBoxColor = AppColors . successColor ;
/ / }
/ /
/ / EdgeInsets insets ;
/ / if ( i = = 0 ) {
/ / insets = EdgeInsets . only (
/ / left: 0 ,
/ / top: widget . pinBoxOuterPadding . top ,
/ / right: widget . pinBoxOuterPadding . right ,
/ / bottom: widget . pinBoxOuterPadding . bottom ,
/ / ) ;
/ / } else if ( i = = strList . length - 1 ) {
/ / insets = EdgeInsets . only (
/ / left: widget . pinBoxOuterPadding . left ,
/ / top: widget . pinBoxOuterPadding . top ,
/ / right: 0 ,
/ / bottom: widget . pinBoxOuterPadding . bottom ,
/ / ) ;
/ / } else {
/ / insets = widget . pinBoxOuterPadding ;
/ / }
/ /
/ / return AnimatedContainer (
/ / duration: const Duration ( milliseconds: 200 ) ,
/ / curve: Curves . easeInOut ,
/ / key: ValueKey < String > ( " container $ i " ) ,
/ / alignment: Alignment . center ,
/ / padding: EdgeInsets . symmetric ( vertical: 4.0 , horizontal: 1.0 ) ,
/ / margin: insets ,
/ / decoration: RoundedRectangleBorder ( ) . toSmoothCornerDecoration (
/ / color: pinBoxColor ,
/ / borderRadius: widget . pinBoxRadius ,
/ / ) ,
/ / width: widget . pinBoxWidth ,
/ / height: widget . pinBoxHeight ,
/ / child: _animatedTextBox ( strList [ i ] , i ) ,
/ / ) ;
/ / }
Widget _animatedTextBox ( String text , int i ) {
if ( widget . pinTextAnimatedSwitcherTransition ! = null ) {
return AnimatedSwitcher (
@ -453,8 +499,10 @@ class _OTPVerificationScreenState extends State<OTPVerificationScreen> {
if ( _resendTime = = 0 ) {
setState ( ( ) {
_resendTime = 120 ;
_isVerifying = false ; / / Reset verification flag
_isVerifying = false ;
_isOtpComplete = false ;
} ) ;
_otpController . clear ( ) ;
_startResendTimer ( ) ;
/ / autoFillOtp ( " 1234 " ) ;
widget . onResendOTPPressed ( widget . phoneNumber ) ;