LiewJunTung / pin_code_text_field

A highly customisable Flutter widget for entering pin code. Suitable for use cases such as login and OTP.
MIT License
376 stars 78 forks source link

Error seen when switching between max length based on button tap #50

Open sur950 opened 4 years ago

sur950 commented 4 years ago

My Use case / Actual bug

Hi, I found a bug that !_dirty is called on null. Let me explain with my use case that you can understand the things better. (In old version it used to give index out of range exception)

I have 3 radio buttons in my view & based on option users chooses, I have display different text fields.

  1. For first radio button, I need a text field with 10 boxes (I am using pin code text field)
  2. For second radio button, Plain textField is needed (I am using simple TextField widget of flutter)
  3. For third radio button, I need a text field with 4 boxes (I am using same 1st component but passing maxLength as 4 -- To get the desired animation)

I am attaching snippet which can give the UI of my use case (Once the UI is built according to my use case then by default you will be on radio button 1 & to reproduce the issue tap on button-2, then button-3 & back to button-1. You will see the error)

int _selected = 1; // possible values 1,2,3
...
...
...
Column(
                          mainAxisSize: MainAxisSize.min,
                          mainAxisAlignment: MainAxisAlignment.start,
                          children: <Widget>[
                            Row(
                              mainAxisAlignment: MainAxisAlignment.end,
                              children: <Widget>[
                                Expanded(child: _radioButton(AntDesign.phone, 1)),
                                Expanded(child: _radioButton(AntDesign.car, 2)),
                                Expanded(child: _radioButton(AntDesign.lock1, 3)),
                              ],
                            ),
                            Padding(
                              padding: EdgeInsets.symmetric(vertical: 20, horizontal: 12),
                              child: Column(
                                mainAxisSize: MainAxisSize.min,
                                mainAxisAlignment: MainAxisAlignment.start,
                                children: <Widget>[
                                  Text(
                                    _selected == 1
                                        ? "Enter mobile number"
                                        : _selected == 2
                                            ? "Enter vehicle number"
                                            : "Enter OTP code",
                                  ),
                                  SizedBox(height: 15),
                                  (_selected == 2)
                                      ? _plainTextField()
                                      : _pinCodeBox(length: (_selected == 3)?4:10),
                                ],
                              ),
                            ),
                          ],
                        )

Additional Info

I had one fix for this issue but that will kill the length switch animation. I fix I had is having different key for both button 1 & 3.

Flutter doctor goes here

[✓] Flutter (Channel stable, v1.17.4, on Mac OS X 10.15.6 19G73, locale en-GB)
    • Flutter version 1.17.4 at /Users/name/Desktop/flutter
    • Framework revision 1ad9baa8b9 (9 weeks ago), 2020-06-17 14:41:16 -0700
    • Engine revision ee76268252
    • Dart version 2.8.4

[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.0)
    • Android SDK at /Users/name/Library/Android/sdk
    • Platform android-29, build-tools 29.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b4-5784211)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.6)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.6, Build version 11E708
    • CocoaPods version 1.8.4

[✓] Android Studio (version 3.6)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 40.2.2
    • Dart plugin version 191.8423
    • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b4-5784211)

[✓] IntelliJ IDEA Ultimate Edition (version 2019.1.3)
    • IntelliJ at /Applications/IntelliJ IDEA.app
    • Flutter plugin version 36.1.4
    • Dart plugin version 191.7830

[✓] Connected device (1 available)
    • ONEPLUS A5000 • 98bd523f • android-arm64 • Android 9 (API 28)

• No issues found!