Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Made otp field text single digit and override text behaviour added #31

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Made otp field text single digit and override text behaviour added #31

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
99daf45
fixed length as single digit
shaikhaman2000 Nov 13, 2021
eaa89a8
fixed single digit length for each text field
shaikhaman2000 Nov 13, 2021
bca912e
optimization
shaikhaman2000 Nov 13, 2021
a5119c9
migrated to null safety
shaikhaman2000 Nov 15, 2021
88588d4
Merge branch 'master'
shaikhaman2000 Mar 9, 2022
e89eb75
Merge branch 'master' of https://github.com/iamvivekkaushik/OTPTextFi…
shaikhaman2000 Jun 13, 2022
0340628
fixed otp field to have single digit length and added override behaviour
shaikhaman2000 Jun 13, 2022
692e62d
some fixes
shaikhaman2000 Jun 13, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions example/android/app/build.gradle
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ apply plugin: 'kotlin-android'
apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"

android {
compileSdkVersion 28
compileSdkVersion 31

sourceSets {
main.java.srcDirs += 'src/main/kotlin'
Expand All @@ -40,7 +40,7 @@ android {
// TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
applicationId "com.example.example"
minSdkVersion 16
targetSdkVersion 28
targetSdkVersion 31
versionCode flutterVersionCode.toInteger()
versionName flutterVersionName
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
Expand Down
2 changes: 1 addition & 1 deletion example/android/app/src/main/AndroidManifest.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,12 @@
additional functionality it is fine to subclass or reimplement
FlutterApplication and put your custom class here. -->
<application
android:name="io.flutter.app.FlutterApplication"
android:label="example"
android:icon="@mipmap/ic_launcher">
<activity
android:name=".MainActivity"
android:launchMode="singleTop"
android:exported="true"
android:theme="@style/LaunchTheme"
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
android:hardwareAccelerated="true"
Expand Down
4 changes: 2 additions & 2 deletions example/android/build.gradle
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
buildscript {
ext.kotlin_version = '1.3.50'
ext.kotlin_version = '1.6.10'
repositories {
google()
jcenter()
}

dependencies {
classpath 'com.android.tools.build:gradle:3.5.0'
classpath 'com.android.tools.build:gradle:4.2.2'
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
}
}
Expand Down
2 changes: 1 addition & 1 deletion example/android/gradle/wrapper/gradle-wrapper.properties
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,4 @@ distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-5.6.2-all.zip
distributionUrl=https\://services.gradle.org/distributions/gradle-6.7.1-all.zip
4 changes: 3 additions & 1 deletion example/lib/main.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,8 @@ class _MyHomePageState extends State<MyHomePage> {
child: Icon(Icons.cleaning_services),
onPressed: () {
print("Floating button was pressed.");
otpController.clear();
otpController.set(['2', '3', '5', '5', '7']);
//otpController.clear();
shaikhaman2000 marked this conversation as resolved.
Show resolved Hide resolved
// otpController.set(['2', '3', '5', '5', '7']);
// otpController.setValue('3', 0);
// otpController.setFocus(1);
Expand All @@ -58,6 +59,7 @@ class _MyHomePageState extends State<MyHomePage> {
},
onCompleted: (pin) {
print("Completed: " + pin);
otpController.setFocus(4);
shaikhaman2000 marked this conversation as resolved.
Show resolved Hide resolved
}),
),
);
Expand Down
25 changes: 9 additions & 16 deletions example/pubspec.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ packages:
name: collection
url: "https://pub.dartlang.org"
source: hosted
version: "1.15.0"
version: "1.16.0"
cupertino_icons:
dependency: "direct main"
description:
Expand All @@ -56,7 +56,7 @@ packages:
name: fake_async
url: "https://pub.dartlang.org"
source: hosted
version: "1.2.0"
version: "1.3.0"
flutter:
dependency: "direct main"
description: flutter
Expand All @@ -80,7 +80,7 @@ packages:
name: material_color_utilities
url: "https://pub.dartlang.org"
source: hosted
version: "0.1.3"
version: "0.1.4"
meta:
dependency: transitive
description:
Expand All @@ -94,14 +94,14 @@ packages:
path: ".."
relative: true
source: path
version: "1.1.2"
version: "1.1.3"
path:
dependency: transitive
description:
name: path
url: "https://pub.dartlang.org"
source: hosted
version: "1.8.0"
version: "1.8.1"
sky_engine:
dependency: transitive
description: flutter
Expand All @@ -113,7 +113,7 @@ packages:
name: source_span
url: "https://pub.dartlang.org"
source: hosted
version: "1.8.1"
version: "1.8.2"
stack_trace:
dependency: transitive
description:
Expand Down Expand Up @@ -148,20 +148,13 @@ packages:
name: test_api
url: "https://pub.dartlang.org"
source: hosted
version: "0.4.8"
typed_data:
dependency: transitive
description:
name: typed_data
url: "https://pub.dartlang.org"
source: hosted
version: "1.3.0"
version: "0.4.9"
vector_math:
dependency: transitive
description:
name: vector_math
url: "https://pub.dartlang.org"
source: hosted
version: "2.1.1"
version: "2.1.2"
sdks:
dart: ">=2.14.0 <3.0.0"
dart: ">=2.17.0-0 <3.0.0"
30 changes: 26 additions & 4 deletions lib/otp_field.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,15 +178,21 @@ class _OTPTextFieldState extends State<OTPTextField> {
right: isLast ? 0 : widget.spaceBetween,
),
child: TextField(
onTap: () {
_textControllers[index]!.selection = TextSelection.fromPosition(
TextPosition(offset: _textControllers[index]!.text.length));
},
controller: _textControllers[index],
keyboardType: widget.keyboardType,
textCapitalization: widget.textCapitalization,
textAlign: TextAlign.center,
style: widget.style,
inputFormatters: widget.inputFormatter,
maxLength: 1,
//maxLength: 1,
maxLength: 2,
focusNode: _focusNodes[index],
obscureText: widget.obscureText,
showCursor: false,
decoration: InputDecoration(
isDense: widget.isDense,
filled: true,
Expand All @@ -204,9 +210,24 @@ class _OTPTextFieldState extends State<OTPTextField> {
errorStyle: const TextStyle(height: 0, fontSize: 0),
),
onChanged: (String str) {
debugPrint('Changed');
shaikhaman2000 marked this conversation as resolved.
Show resolved Hide resolved
if (str.length > 1) {
_handlePaste(str);
return;
if (str.length == widget.length && index == widget.length - 1) {
print('Handling Paste');
_handlePaste(str);
return;
} else {
if (_pin.length >= index + 1) {
str = str.replaceFirst(_pin[index], '');
} else {
int len = str.length;
str = str[len - 1];
}
// Update the current pin
setState(() {
_textControllers[index]!.text = str;
});
}
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not sure why is this code here and not inside _handlePaste

Copy link
Author

@shaikhaman2000 shaikhaman2000 Jun 13, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • The previous behaviour was not allowing users to override previous individual otp field. What I did here is basically made the field length to 2.
  • When users want to paste otp they need to be on the initial field only and the text length should be equal to otp field length (Line number 215)
  • if the length is less than or equal to 2, we assume user wants to override previously written text -> We remove replace previous digit from this text and set the text to newly written text (In case of previously its being 2, and user writes 0 -> we replace 2 with '' and set text as 0)
  • if the same individual otp field doesn’t contain any text (i.e., user is typing first time) we handle it with line number 222's else block.
  • I have added onTap() function to make sure, user stays in the end of otp field to handle back press efficiently. (Previously when the user's cursor was pointing before text, it didn’t allowed erasing the text and wasn’t taking back to previously available field)

}

// Check if the current value at this position is empty
Expand Down Expand Up @@ -235,7 +256,8 @@ class _OTPTextFieldState extends State<OTPTextField> {
// Call the `onCompleted` callback function provided
if (!_pin.contains(null) &&
!_pin.contains('') &&
currentPin.length == widget.length) {
currentPin.length == widget.length &&
index + 1 == widget.length) {
widget.onCompleted?.call(currentPin);
}

Expand Down
23 changes: 8 additions & 15 deletions pubspec.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,14 +42,14 @@ packages:
name: collection
url: "https://pub.dartlang.org"
source: hosted
version: "1.15.0"
version: "1.16.0"
fake_async:
dependency: transitive
description:
name: fake_async
url: "https://pub.dartlang.org"
source: hosted
version: "1.2.0"
version: "1.3.0"
flutter:
dependency: "direct main"
description: flutter
Expand All @@ -73,7 +73,7 @@ packages:
name: material_color_utilities
url: "https://pub.dartlang.org"
source: hosted
version: "0.1.3"
version: "0.1.4"
meta:
dependency: transitive
description:
Expand All @@ -87,7 +87,7 @@ packages:
name: path
url: "https://pub.dartlang.org"
source: hosted
version: "1.8.0"
version: "1.8.1"
sky_engine:
dependency: transitive
description: flutter
Expand All @@ -99,7 +99,7 @@ packages:
name: source_span
url: "https://pub.dartlang.org"
source: hosted
version: "1.8.1"
version: "1.8.2"
stack_trace:
dependency: transitive
description:
Expand Down Expand Up @@ -134,20 +134,13 @@ packages:
name: test_api
url: "https://pub.dartlang.org"
source: hosted
version: "0.4.8"
typed_data:
dependency: transitive
description:
name: typed_data
url: "https://pub.dartlang.org"
source: hosted
version: "1.3.0"
version: "0.4.9"
vector_math:
dependency: transitive
description:
name: vector_math
url: "https://pub.dartlang.org"
source: hosted
version: "2.1.1"
version: "2.1.2"
sdks:
dart: ">=2.14.0 <3.0.0"
dart: ">=2.17.0-0 <3.0.0"