david-legend / otp_textfield

Hi 👋, I'm David Cobbina

I am full stack software engineer with great passion for building high quality applications. I have an extensive experience building frontend (mobile & web) and backend applications.

otp_textfield's Issues

Failed assertion: line 69 pos 15: 'color != null': is not true.

import 'package:flutter/material.dart';
import 'package:flutter_otp_text_field/flutter_otp_text_field.dart';

class OtpScreen extends StatefulWidget {
@OverRide
_OtpState createState() => _OtpState();
}

class _OtpState extends State {
@OverRide
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
// leading: IconButton(
// icon: Icon(
// Icons.keyboard_backspace,
// ),
// onPressed: ()=>Navigator.pop(context),
// ),
centerTitle: true,
title: Text(
"OTP",
),
elevation: 0.0,
),

  body: Container(
    child: Padding(
      padding: EdgeInsets.all(8.0),
      child: OtpTextField(
        numberOfFields: 5,
        borderColor: Color(0xFF512DA8),
        showFieldAsBox: true,
        onCodeChanged: (String value) {

        },
        onSubmit: (String verificationCode){
          //navigate to different screen code goes here
          showDialog(
              context: context,
              builder: (context){
                return AlertDialog(
                  title: Text("Verification Code"),
                  content: Text('Code entered is $verificationCode'),
                );
              }
          );
        }, // end onSubmit
      ), // end PinEntryTextField()
    ), // end Padding()
  ), 
);

}
}

My code

Unable to set field height

Am unable to set field height. I have checked all the parameters there is only setWidth parameter. How do I go about it?

Cannot clear textfields

You may want to clear the text fields in case the user entered a wrong verification code.

android/ios' auto fill in from keyboard only fills up the first field

Not able to go back in previous otp filed when press back button

suppose i have 6 otp filled and i enter 4 otp number but now i want to go to previous otp filled by pressing back button how to achieve this

handleControllers not called when styles added

handleControllers method is called during building of textfields and it is called inside the loop, as you can see in the code (flutter_otp_text_field version 1.1.1). This still works, however, I don't understand why you are calling it inside the loop. This however results in the following behaviour.

styles added: handleControllers not called.
styles not added: handleControllers called.

Expected behaviour:
handleControllers should be called irrespective of whether styles added.

  Widget generateTextFields(BuildContext context) {
    List<Widget> textFields = List.generate(widget.numberOfFields, (int i) {
      addFocusNodeToEachTextField(index: i);
      addTextEditingControllerToEachTextField(index: i);

      if (widget.styles.length > 0) {
        return _buildTextField(
          context: context,
          index: i,
          style: widget.styles[i],
        );
      }
      if (widget.handleControllers != null) {
        widget.handleControllers!(_textControllers);
      }
      return _buildTextField(context: context, index: i);
    });

    return Row(
      mainAxisAlignment: widget.mainAxisAlignment,
      crossAxisAlignment: widget.crossAxisAlignment,
      children: textFields,
    );
  }

Unable to jump between fields when deleting

Cant automatically jump to the previous textbox when deleting. I have to delete one by clicking on each textbox.

EnabledBorderColor is not set as required and no default value is set for it

EnabledBorderColor is not set as required and no default value is set for it,
So if not enabled border color is set, it crashes the app because there's is an assertion that states that enabled border color must not be null.
To reproduce the error, use the otp_textfield widget with passing the enabled border color

Change Focus manually

I have added two OTP Text field for Email and Mobile number in single screen

want to set focus on Email OTP text filed first character OR Mobile OTP text filed first Character based on API Response so how can i do this?

Unable to set textfield to readOnly

So, say for instance you want to create a custom numeric key to use with the text field, it's not possible to set the textfield to readOnly so that you can use your custom numeric keyboard. For example a screen like this:

https://res.cloudinary.com/dchsw3ztg/image/upload/v1639745208/raiseIssue_qxte6f.png

Text does not appear in textfield

When typing text do not appear in field

Unable to ts set numberOfFields to 6

Am failing to set numberOfFields prop to 6. This is the error am getting: RangeError (index): Invalid value: Not in inclusive range 0..4: 5

Can't add controller

Would want to clear textfield