Ad

Flutter LabelText On An InputDecoration Widget Disappears During And After Field Input

- 1 answer

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

Before Migration

After Migration

Ad

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.

Ad
source: stackoverflow.com
Ad