1

I am trying to use TextFormField to manage user input, but there are two lines at the bottom, I want to get rid of the first thin line which sits in the middle of the text, but unable to do so.

TextFormField 2 lines screenshot

My code is like this:

           Padding(
            padding: const EdgeInsets.symmetric(horizontal: 50.0),
            child: Form(
              key: _formKey,
              child: ConstrainedBox(
                constraints: BoxConstraints.tight(const Size(250, 50)),
                child: TextFormField(
                  maxLines: 1,
                  maxLength: 5,
                  maxLengthEnforced: true,
                  initialValue: '',
                  keyboardType: TextInputType.text,
                  autofocus: false,
                  decoration: InputDecoration(
                    helperText: 'Enter ref code',
                  ),
                  validator: _codeValidator,
                  onSaved: (value) => _inputCode = value.trim(),
                  style: textTheme.headline6.copyWith(letterSpacing: 40),
                ),
              ),
            ),
          ),

After searching for some answer, I try to modify the InputDecoration like this:

                  decoration: InputDecoration(
                    border: InputBorder.none,
                    helperText: 'Enter ref code',
                  ),

But it will get rid of the second line, the first ugly line is still there.

flutter doctor:

[✓] Flutter (Channel stable, 1.22.1, on Mac OS X 10.15.6 19G2021, locale en-AU)
 
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 12.0.1)
[✓] Android Studio (version 3.6)
[✓] VS Code (version 1.50.0)
[✓] Connected device (1 available)

• No issues found!

Another issue is, even with maxLength: 5, and maxLengthEnforced: true, I can still input more than 5 characters, it does not automatically stop.

xmanreturn
  • 79
  • 1
  • 14
  • flutter error is not related to flutter doctor and flutter doctor is only for installing flutter not for codes and errors and you are not using general TextFormField you are using a package right? – Yaya Oct 13 '20 at 10:12
  • The code you provided working fine,there is no problem with it, i have checked with dartpad there is no problem occurs.also you pointed out you can enter 5 number even if maxlength it is also working.can you show more code@xmanreturn – Abhijith Oct 13 '20 at 10:18

1 Answers1

2

This is not a Flutter issue, it's because of the Device Keyboard which is trying to spellcheck and autocorrect.

To disable that we have to manually disable those options from input settings.

Settings which I have disabled in virtual keyboard:

enter image description here

Result:

enter image description here

You can try using this package:

pin_code_fields

ScreenShot:

enter image description here

Further references:

StackOverflow Answer

GitHub Issue

Ketan Ramteke
  • 10,183
  • 2
  • 21
  • 41