Flutter LabelText On An InputDecoration Widget Disappears During And After Field Input
I recently upgraded Dart, Flutter, plug-ins to the latest versions plus migrated my app to conform to null-safety. Now the labels on my input fields disappear the moment I place the cursor on the input field and enter data. Nothing has changed in my input field definition which is as follows:
TextField _buildRestaurantNameTextField() {
return TextField(
style: Theme.of(context).inputDecorationTheme.labelStyle,
controller: _restaurantNameController,
focusNode: _restaurantNameFocusNode,
textCapitalization: TextCapitalization.words,
cursorColor: Colors.black,
decoration: InputDecoration(
labelText: 'Restaurant name',
errorText: model!.restaurantNameErrorText,
enabled: model!.isLoading == false,
),
autocorrect: false,
enableSuggestions: false,
enableInteractiveSelection: false,
keyboardType: TextInputType.text,
textInputAction: TextInputAction.next,
onChanged: model!.updateRestaurantName,
onEditingComplete: () => _restaurantNameEditingComplete(),
);
}
Here's Flutter doctor's output:
[✓] Flutter (Channel stable, 2.5.0, on macOS 11.5.2 20G95 darwin-arm, locale en-GB)
• Flutter version 2.5.0 at /Users/ernestocuesy/development/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 4cc385b4b8 (9 days ago), 2021-09-07 23:01:49 -0700
• Engine revision f0826da7ef
• Dart version 2.14.0
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
• Android SDK at /Users/ernestocuesy/Library/Android/sdk
• Platform android-30, build-tools 30.0.3
• Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS
• Xcode at /Applications/Xcode.app/Contents/Developer
• Xcode 12.5.1, Build version 12E507
• CocoaPods version 1.10.1
[✓] Android Studio (version 2020.3)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)
[✓] VS Code (version 1.60.1)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.26.0
[✓] Connected device (1 available)
• sdk gphone64 arm64 (mobile) • emulator-5554 • android-arm64 • Android 11 (API 30) (emulator)
• No issues found!
I'm attaching screenshots of before and after migration. I've tried many things from commenting the style attribute to trying floatingLabelStyle, font sizes, spacing and the label always disappears. The problem happens in both Android emulator and physical Android device. I haven't tried iOS as I need to sort out a CocoaPods issue.
Thanks for your help
Answer
The issue turned out to be related to floatingLabelBehaviour
in the ThemeData
class. The value has always been FloatingLabelBehavior.never
which means that the label will always be positioned within the content or hidden according to the documentation. So, this seems to be the correct behaviour. But for some reason this behaviour only happened after my upgrades. Going forward the solution is to change to FloatingLabelBehavior.auto
or FloatingLabelBehavior.always
.
Related Questions
- → How do you create a 12 or 24 mnemonics code for multiple cryptocurrencies (ETH, BTC and so on..)
- → Flutter: input text field don't work properly in a simple example..... where am I wrong?
- → Can I customize the code formatting of Dart code in Atom?
- → Is it possible to develop iOS apps with Flutter on a Linux virtual machine?
- → Display SnackBar in Flutter
- → JSON ObjectMapper in Flutter
- → Material flutter app source code
- → TabBarSelection No such method error
- → How do I set the animation color of a LinearProgressIndicator?
- → Add different routes/screens to Flutter app
- → Is there a way to get the size of an existing widget?
- → How to share a file using flutter
- → Is there an easy way to find particular text built from RichText in a Flutter test?