iamvivekkaushik / otptextfield

A flutter package for the OTP Field widget.

OTP Text Field

A flutter package to create a OTP Text Field widget in your application.

---

Stay tuned for the latest updates:

📱Screenshots

⚙️ Installation

Import the following package in your dart file

import 'package:otp_text_field/otp_field.dart';
import 'package:otp_text_field/style.dart';

👨‍💻 Usage

Use the OTP Text Field Widget

OTPTextField(
  length: 5,
  width: MediaQuery.of(context).size.width,
  fieldWidth: 80,
  style: TextStyle(
    fontSize: 17
  ),
  textFieldAlignment: MainAxisAlignment.spaceAround,
  fieldStyle: FieldStyle.underline,
  onCompleted: (pin) {
    print("Completed: " + pin);
  },
),

For more detail on usage, check out the example provided.

🙍🏻‍♂️ Author

• Vivek Kaushik

📄 License

OTP Text Field is released under the MIT license. See LICENSE for details.

otptextfield's Issues

How to disable border

I want to my otp field dont have border but i cant . How to solve it?

_CastError thrown while calling onChanged with null value in OTPTextField package

While using the OTPTextField package, I encountered an issue where a _CastError was thrown while calling the onChanged callback function with a null value. The error message indicated that the null check operator was used on a null value, and the stack trace pointed to package:otp_text_field/otp_field.dart:239:27

To reproduce the issue, I created an instance of the OTPTextField widget and attempted to enter an OTP code. However, the error occurred whenever I tried to change the input value. I believe this issue is related to a null value being accessed through the null-check operator, which causes the _CastError exception to be thrown.

To resolve this issue, I suggest modifying the code to handle the null value appropriately, such as using the null-aware operator to check if the onChanged function is not null before calling it. This should prevent the _CastError exception from being thrown.

I appreciate your attention to this matter and would be happy to provide any additional information or clarification that may be needed.

TypeErrorImpl was thrown while calling onChanged: Unexpected null value

I have opened a question on stackoverflow when i used onChanged method
if someone is getting this error can check the answers
https://stackoverflow.com/questions/73508987/typeerrorimpl-was-thrown-while-calling-onchanged-unexpected-null-value-flutte

Allow entry of 6 digit OTP code.

I am working with a backend that sends a 6-digit OTP code. However, I noticed that this library only allows the entry of codes of length, not more than 5.

how to autofocus in first input while navigate to the screen

OTPTextField' isn't a function.\nTry correcting the name to match an existing function, or define a method or function named 'OTPTextField

Throwing multiple issues.

Error One:
[{
"resource": "/d:/mobile_apps_source/ppnnews/lib/components/OTPDialog.dart",
"owner": "generated_diagnostic_collection_name#0",
"code": {
"value": "ambiguous_import",
"target": {
"$mid": 1,
"external": "https://dart.dev/diagnostics/ambiguous_import",
"path": "/diagnostics/ambiguous_import",
"scheme": "https",
"authority": "dart.dev"
}
},
"severity": 8,
"message": "The name 'OTPTextField' is defined in the libraries 'package:nb_utils/src/widgets/otp_text_field.dart (via package:nb_utils/nb_utils.dart)' and 'package:otp_text_field/otp_field.dart'.\nTry using 'as prefix' for one of the import directives, or hiding the name from all but one of the imports.",
"source": "dart",
"startLineNumber": 188,
"startColumn": 17,
"endLineNumber": 188,
"endColumn": 29
}]

Error Two:
[{
"resource": "/d:/mobile_apps_source/ppnnews/lib/components/OTPDialog.dart",
"owner": "generated_diagnostic_collection_name#0",
"code": {
"value": "invocation_of_non_function",
"target": {
"$mid": 1,
"external": "https://dart.dev/diagnostics/invocation_of_non_function",
"path": "/diagnostics/invocation_of_non_function",
"scheme": "https",
"authority": "dart.dev"
}
},
"severity": 8,
"message": "'OTPTextField' isn't a function.\nTry correcting the name to match an existing function, or define a method or function named 'OTPTextField'.",
"source": "dart",
"startLineNumber": 188,
"startColumn": 17,
"endLineNumber": 188,
"endColumn": 29
}]

Please help

Backspace does not work on empty field

Hi, first of all great feature that you have developed. 👏

I am using latest version on android and if I press backspace when an otpbox is empty it does not go to the previous otp box.

Hope you get it fixed, it would be great to have.

🙏 Thanks

Auto Focus the first input field on building the the OtpTextField

TextFields in Widget State Fails to Recreate

Since you have stored all the text field widgets in widget state, it fails to respond to theme changes. Please rebuild them when build method is called.

delete key is not working

delete key is not working

How to allow backspace or Does it backspace not work?

Called on null issue after flutter 2.0 upgrade

while typing text or numbers in OTP text field, called on null issue was arising after my project upgraded into flutter 2.0.1.
I think it was related to null safety. I hope this issue has been fixed as soon as possible.

IOS Quick Paste

When we clicking on Quick Paste to OTP from IOS Keyboard, It's only pasting the First digit. Can you please fix this.

It is allowing more then one digits in last box

This is my code snippet

OTPTextField(
                                  length: 4,
                                  width: MediaQuery.of(context).size.width,
                                  fieldWidth: ScreenUtil().setWidth(60),
                                  style: TextStyle(
                                    fontSize: ScreenUtil().setSp(18),
                                  ),
                                  keyboardType: TextInputType.number,
                                  textFieldAlignment:
                                      MainAxisAlignment.spaceAround,
                                  fieldStyle: FieldStyle.box,
                                  onCompleted: (pin) {
                                    print("Completed: " + pin);
                                    authController.otp.text = pin;
                                  },
                                )

Right overflowed by 134 pixel

Default right overflowed by 134 pixel

InputFormatter Digits Only

I hope inputFormatters property in OTPTextField will be added,
so that we can restrict what type of characters that user can input in the textfield .

ex.
inputFormatters: [WhitelistingTextInputFormatter.digitsOnly],

Check the empty textfield on left.

While selecting a textfield in between, it is not checking the previous textfield whether it is empty or not. It starts to enter the values from the selected textfield.

FocusColor option in OtpFieldStyle

Dear Owner and other contributors

First I appreciate you for creating such a useful and clean dependency.

As the dependency is really popular, lots of people are using that, based on my experience in many project we need to have another option for changing the focus color regarding the OTP field.

based on my investigation on your code, there is OtpFieldStyle which we can use for put another field with name, focusColor beside the fillColor, which help us to have focus Color as well, then use that inside the textInputDecoration in the mainClass.

I forked the repo and do it, I'd be thankful if you let me know if its utilized and you can merge it in maste r branch or not?

Regards You,
Sina

Autofocus Issue

I can't set otp text field to autofocus.

handling Custom keyboard

I want to use this with my custom Keyboard but didn't find something like controller as available in TextField widget to use here.

How can I implement that here?

Please add autoFocus property in the constructor.

How to use validator in OTP Textfield

Controller required

A controller should be added for clearing the text fields

How to retrieve the OTP that user has entered? I have a global variable named "otp" in which I want to set the one-time-password that user has typed to the global variable and verify it. How can I do that?

setting the width of input boxes

Custom Design

Can i apply my custom design on your OTPTextField? if yes then how can i achieve this?

How can I set the different style between actived and inactived cell.

There is a problem when using rtl locale, not working as expected

I have a temporary solution until fix it

  Localizations.override(
                context: context,
                locale: const Locale('en', 'US'),
                child: OTPTextField(
                  length: 4,
               ,,,,,,,,,

How to trigger OTPTextField to use the errorBorderColor / disabledBorderColor?

how to trigger OTPTextField to use the errorBorderColor / disabledBorderColor?

Originally posted by @aulia-rosyida in #2 (comment)

Passing otp value to a variable

final OtpFieldController _otpController = OtpFieldController();
String otp = _otpController.toString();

This returns flutter: Instance of 'OtpFieldController' and not the vlue. How can I work it out

User get confused when OTP Field is taking time to load or sometime it gets stuck. How to create a button under the OTP field so that everything executes after a tap on the button. #36

How to change colour or Textfield Underline

Is there any way to change the color of textfield underline color.

back press on empty box is not working

Max looks to be only 5 digits

 OTPTextField(
                length: 6,
                width: double.infinity,
                // fieldWidth: 80,
                // style: TextStyle(fontSize: 17)
                textFieldAlignment: MainAxisAlignment.spaceAround,
                fieldStyle: FieldStyle.underline,
                otpFieldStyle: OtpFieldStyle(
                  borderColor: Theme.of(context).colorScheme.primary,
                  focusBorderColor: Theme.of(context).colorScheme.primary,
                ),

                onCompleted: (pin) {
                  getIt<AuthCubit>().verifyOtp(pin);
                },
              ),

Decimal keyboard is switching to alphanumeric keyboard in last digit.

otp_text_field: ^1.1.3

OTPTextField( keyboardType: TextInputType.number, inputFormatter: [FilteringTextInputFormatter.digitsOnly], length: 4, width: MediaQuery.of(context).size.width, textFieldAlignment: MainAxisAlignment.spaceAround, fieldWidth: 35, fieldStyle: FieldStyle.underline, onChanged: (value) { print("value:$value"); }, style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold), onCompleted: (pin) { context.read<PinConfirmBloc>().add(PinChanged(pin)); }, ),

PIN_Issue.mov

Using inputFormatter: [FilteringTextInputFormatter.digitsOnly] is restricting characters, but the keyboard still switches in the last field.

Why doesn't onCompleted state change when the OTPTextField is no longer "Completed"?

While using the package I noticed that when the OTPTextField is completely filled onCompleted is triggered, why doesn't it trigger when the OTPTextField is no longer filled?

Add Option to Edit height

UPPERCASE keyboard in an OTPTextField widget

If I want to use an uppercase keyboard in an OTPTextField widget in Flutter, I can use the textInputAction and textCapitalization properties to customize the keyboard behavior. Here's an example:

OTPTextField(
  length: 6,
  width: MediaQuery.of(context).size.width,
  fieldWidth: 50,
  style: TextStyle(fontSize: 20),
  textFieldAlignment: MainAxisAlignment.spaceAround,
  fieldStyle: FieldStyle.underline,
  onCompleted: (pin) {
    // Do something with the entered OTP.
  },
  textInputAction: TextInputAction.done,
  textCapitalization: TextCapitalization.characters,
),

In the above example, the textInputAction property is set to TextInputAction.done, which will display a "Done" button on the keyboard, and the textCapitalization property is set to TextCapitalization.characters, which will force the keyboard to display uppercase letters.

Default margin between field

How do you remove or lower the default margin between fields?

Deleting problem before finishing

Several libraries do not allow deleting and going back to the previous TextInput, this solves it very well.

Example of the problem:
In an OTPTextField with length: 4, typing the 4 digits and then deleting works correctly. But trying to delete without reaching the fourth TextField it just doesn't go back to the previous TextField.

Tested on Android.

Null check operator used on a null value

When onChanged is not passed then this error is thrown .After passing onChanged it works fine.

Null check operator used on a null value

This is the stack

When the exception was thrown, this was the stack:
#0 _OTPTextFieldState.buildTextField. (package:otp_text_field/otp_field.dart:156:27)
#1 EditableTextState._formatAndSetValue (package:flutter/src/widgets/editable_text.dart:2276:27)
#2 EditableTextState.textEditingValue= (package:flutter/src/widgets/editable_text.dart:2474:5)
#3 RenderEditable._handleDelete (package:flutter/src/rendering/editable.dart:877:27)
#4 RenderEditable._handleKeyEvent (package:flutter/src/rendering/editable.dart:550:7)