TextField labelText doesn't use floatingLabelStyle when unfocused #147231

theodelrieu · 2024-04-23T11:56:17Z

Steps to reproduce

Hello,

I've been trying to force my TextField to always use a floating label, by setting InputDecoration's floatingLabelBehavior to FloatingLabelBehavior.always.

However, when the field is not focused, or is empty, labelStyle is used.
By digging through the code, I found this line in InputDecorator.

Looking at the definition of _labelShouldWithdraw explains why I get this behavior. I then tried to set the same style for both labelStyle and floatingLabelStyle, but there is a very small animation when I focus/unfocus the text field.

By using FloatingLabelBehavior.always, I expected the label to stick to its position no matter in which state the TextField was.
Have I missed something?

Expected results

The label always stays in place, only applying floatingLabelStyle.

Actual results

The label alternates between floatingLabelStyle and labelStyle, even though FloatingLabelBehavior.always is used.

Code sample

  TextField(
        decoration: InputDecoration(
          floatingLabelBehavior: FloatingLabelBehavior.always,
          labelText: "label",
          floatingLabelStyle: Theme.of(context).textTheme.labelLarge!,
         )
)

Screenshots or Video

Screenshots / Video demonstration

Screen.Recording.2024-04-23.at.13.53.40.mov

Logs

[Paste your logs here]

Flutter Doctor output

Doctor output

[✓] Flutter (Channel stable, 3.19.6, on macOS 14.2.1 23C71 darwin-arm64, locale en-FR)
    • Flutter version 3.19.6 on channel stable at /Users/theo/.local/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 54e66469a9 (6 days ago), 2024-04-17 13:08:03 -0700
    • Engine revision c4cd48e186
    • Dart version 3.3.4
    • DevTools version 2.31.1

[!] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at /Users/theo/Library/Android/sdk
    • Platform android-34, build-tools 33.0.0
    • ANDROID_HOME = /Users/theo/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
    ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses

[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15E204a
    • CocoaPods version 1.13.0

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.2)
    • 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 17.0.6+0-17.0.6b802.4-9586694)

[✓] Connected device (3 available)
    • iPhone 15 (mobile) • BCE05AEF-41E7-48DF-BE31-969DE94790C4 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-17-0 (simulator)
    • macOS (desktop)    • macos                                • darwin-arm64   • macOS 14.2.1 23C71 darwin-arm64
    • Chrome (web)       • chrome                               • web-javascript • Google Chrome 124.0.6367.62

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.

The text was updated successfully, but these errors were encountered:

huycozy · 2024-04-24T05:53:54Z

Thanks for the report. I'm also able to see the issue. The current workaround is to apply the same text style for labelStyle:

labelStyle: Theme.of(context).textTheme.labelLarge!,
floatingLabelStyle: Theme.of(context).textTheme.labelLarge!,

flutter doctor -v (stable and master)

[✓] Flutter (Channel stable, 3.19.6, on macOS 14.1 23B74 darwin-x64, locale en-VN)
    • Flutter version 3.19.6 on channel stable at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 54e66469a9 (31 hours ago), 2024-04-17 13:08:03 -0700
    • Engine revision c4cd48e186
    • Dart version 3.3.4
    • DevTools version 2.31.1

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
    • Xcode at /Applications/Xcode15.3.app/Contents/Developer
    • Build 15E204a
    • CocoaPods version 1.15.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2023.2)
    • 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
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)

[✓] VS Code (version 1.88.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.86.0

[✓] Connected device (3 available)
    • RMX2001 (mobile) • EUYTFEUSQSRGDA6D • android-arm64  • Android 11 (API 30)
    • macOS (desktop)  • macos            • darwin-x64     • macOS 14.1 23B74 darwin-x64
    • Chrome (web)     • chrome           • web-javascript • Google Chrome 123.0.6312.124

[✓] Network resources
    • All expected network resources are available.

• No issues found!

[!] Flutter (Channel master, 3.22.0-16.0.pre.39, on macOS 14.1 23B74 darwin-x64, locale en-VN)
    • Flutter version 3.22.0-16.0.pre.39 on channel master at /Users/huynq/Documents/GitHub/flutter_master
    ! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 49770cd929 (24 minutes ago), 2024-04-23 22:55:10 -0400
    • Engine revision d4f63383d3
    • Dart version 3.5.0 (build 3.5.0-92.0.dev)
    • DevTools version 2.35.0-dev.8
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.3)
    • Xcode at /Applications/Xcode15.3.app/Contents/Developer
    • Build 15E204a
    • CocoaPods version 1.15.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2023.2)
    • 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
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)

[✓] VS Code (version 1.88.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.86.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 14.1 23B74 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 124.0.6367.79

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.

theodelrieu · 2024-04-24T07:42:41Z

@huycozy My OP might have been a bit unclear, as the video shows the main issue but not the very small bump I mentioned here:

I then tried to set the same style for both labelStyle and floatingLabelStyle, but there is a very small animation when I focus/unfocus the text field.

Here is a second video to show this behavior:

Screen.Recording.2024-04-24.at.09.39.45.mov

bleroux · 2024-04-24T12:11:02Z

@theodelrieu Thanks for the detailed report.
I agree that having floatingLabelStyle always applied when floatingLabelBehavior is FloatingLabelBehavior.always makes sense.

About the small animation you pointed in #147231 (comment).
I can't reproduce it using the following example:

Code sample

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: TextField(
          maxLines: 1,
          decoration: InputDecoration(
            floatingLabelBehavior: FloatingLabelBehavior.always,
            labelText: 'label',
            floatingLabelStyle: Theme.of(context).textTheme.labelLarge!,
            labelStyle: Theme.of(context).textTheme.labelLarge!,
          ),
        ),
      ),
    );
  }
}

Can you try this code sample and see if you still get this animation? If not can you point out the difference with your own repro?

theodelrieu · 2024-04-25T07:42:24Z

@bleroux

Hello, I think I reproduced the issue with your code sample:

Screen.Recording.2024-04-25.at.09.36.00.mov

It might be an iOS-specific issue? I'm on macOS Sonoma (14.2.1), on a M1 chip.

bleroux · 2024-04-25T12:33:31Z

Thanks for the recording. 🙏
I can reproduce on iOS and Flutter 3.19.6 but not on master channel.
The small animation was fixed in #141943.

I will fill a PR to make floatingLabelStyle always applied when floatingLabelBehavior is FloatingLabelBehavior.always.

theodelrieu · 2024-04-26T07:26:03Z

@bleroux Thanks, apparently the animation fix was merged on Jan 24, how comes I still have the issue on the stable channel?

Here's my flutter --version output:

Flutter 3.19.6 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 54e66469a9 (8 days ago) • 2024-04-17 13:08:03 -0700
Engine • revision c4cd48e186
Tools • Dart 3.3.4 • DevTools 2.31.1

bleroux · 2024-04-26T08:06:47Z

@theodelrieu
That's because this commit landed after the 3.19 version was forked from master (3.19 was released on February 15, but the corresponding branch did not pulled master changes after the first week of January, except some cherry-picks).
This fix will be part of next stable release (there is usually 3 months between stable releases).

This wiki page explains how to find out which releases contain a particular commit.
In this case, we can see that it was not included in 3.19 stable release.

Another interesting page is the 3.19 changelog where one can see all the commits that were part of the stable release: https://docs.flutter.dev/release/release-notes/release-notes-3.19.0

theodelrieu · 2024-04-26T14:28:15Z

Oh of course, thanks for the explanation!

…#147374) ## Description With this PR, when `InputDecorator.floatingLabelBehavior` is set to `FloatingLabelBehavior.always` the label style is always set to `InputDecorator.floatingLabelStyle`, previously `InputDecorator.labelStyle` was used when the field was not focused or was empty. ## Related Issue Fixes #147231 ## Tests Adds 1 test for this particular issue and several missing tests.

huycozy added the in triage Presently being triaged by the triage team label Apr 24, 2024

bleroux self-assigned this Apr 24, 2024

bleroux mentioned this issue Apr 25, 2024

Always relies on floatingLabelStyle when FloatingLabelBehavior.always #147374

Merged

auto-submit bot closed this as completed in #147374 May 3, 2024

bleroux added the r: fixed Issue is closed as already fixed in a newer version label May 3, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

TextField labelText doesn't use floatingLabelStyle when unfocused #147231

TextField labelText doesn't use floatingLabelStyle when unfocused #147231

theodelrieu commented Apr 23, 2024 •

edited

huycozy commented Apr 24, 2024

theodelrieu commented Apr 24, 2024

bleroux commented Apr 24, 2024 •

edited

theodelrieu commented Apr 25, 2024

bleroux commented Apr 25, 2024

theodelrieu commented Apr 26, 2024

bleroux commented Apr 26, 2024

theodelrieu commented Apr 26, 2024

TextField labelText doesn't use floatingLabelStyle when unfocused #147231

TextField labelText doesn't use floatingLabelStyle when unfocused #147231

Comments

theodelrieu commented Apr 23, 2024 • edited

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

huycozy commented Apr 24, 2024

theodelrieu commented Apr 24, 2024

bleroux commented Apr 24, 2024 • edited

theodelrieu commented Apr 25, 2024

bleroux commented Apr 25, 2024

theodelrieu commented Apr 26, 2024

bleroux commented Apr 26, 2024

theodelrieu commented Apr 26, 2024

theodelrieu commented Apr 23, 2024 •

edited

bleroux commented Apr 24, 2024 •

edited