search

flutter / flutter

Flutter makes it easy and fast to build beautiful apps for mobile and beyond
https://flutter.dev
BSD 3-Clause "New" or "Revised" License
161.99k stars 26.59k forks source link

TextField labelText doesn't use floatingLabelStyle when unfocused #147231

Closed theodelrieu closed 2 days ago

theodelrieu commented 1 week ago

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

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

Screenshots or Video

Screenshots / Video demonstration https://github.com/flutter/flutter/assets/15652306/a2e8d32d-cfb4-4f36-b94f-839cfab2c40c

Logs

Logs ```console [Paste your logs here] ```

Flutter Doctor output

Doctor output ```console [✓] 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. ```
huycozy commented 1 week ago

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) ```bash [✓] 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! ``` ```bash [!] 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 commented 1 week ago

@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:

https://github.com/flutter/flutter/assets/15652306/1baa035d-256b-4b66-8145-47faedc193b5

bleroux commented 1 week ago

@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 https://github.com/flutter/flutter/issues/147231#issuecomment-2074289842. I can't reproduce it using the following example:

Code sample ```dart 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 commented 1 week ago

@bleroux

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

https://github.com/flutter/flutter/assets/15652306/19b979db-e947-4fe1-a6b7-fcc82c9720e0

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

bleroux commented 1 week ago

Thanks for the recording. :pray: I can reproduce on iOS and Flutter 3.19.6 but not on master channel. The small animation was fixed in https://github.com/flutter/flutter/pull/141943.

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

theodelrieu commented 1 week ago

@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 commented 1 week ago

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

image

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 commented 1 week ago

Oh of course, thanks for the explanation!