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.
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.