hintStyle of InputDecorationTheme not correctly applied #21385

fhuonder · 2018-09-04T15:27:16Z

Hi all,

When having a custom theme with a custom InputDecorationTheme, like

new ThemeData(
    //...
    inputDecorationTheme: const InputDecorationTheme(
      focusedBorder: UnderlineInputBorder(borderSide: BorderSide(color: Colors.red)),
      enabledBorder: UnderlineInputBorder(borderSide: BorderSide(color: Colors.yellow)),
      labelStyle: TextStyle(color: Colors.yellow),
      hintStyle: TextStyle(color: Colors.red),
    ));

my expectation, according to the documentation of the hintStyle property, is that the label text of a focused text field gets the color of the hint style. Unfortunately it stays the color of the labelStyle. When no custom InputDecorationTheme is in use it works.

With custom theme (expectation: in the focused case the text 'Place' should be red):

Without custom theme (where primary color is cyan and accent color is purple):

Is the configuration wrong or is it really a bug?

Regards,
Florian

HansMuller · 2018-09-05T20:23:04Z

The InputDecorator's hintStyle appears to be initialized correctly from the InputDecorationTheme in this test case: https://gist.github.com/HansMuller/f41427548f2357931d48c9becbc51e9b

If you can provide a test case that fails, I'll be happy to look into it.

fhuonder · 2018-09-06T06:00:07Z

Hi Hans,

The problem occurs when you use labelText (instead of hintText) of the InputDecoration.

new TextField(
    decoration: new InputDecoration(labelText: "Hello 1"),
)

On focus the text moves upwards and should adopt the hintStyle, according to the documentation of the InputDecorationTheme's hintStyle (it says: Also used for the [labelText] when the [labelText] is displayed on top of the input field (i.e., at the same location on the screen where text may be entered in the input field).).

Hope this helps.

Regards,
Florian

HansMuller · 2018-09-06T16:02:51Z

Aha! You are correct, the implementation does not match the documentation. And we're not currently testing the floating label's text style.

Although it's easy enough to "fix" this issue, it may just be a documentation bug. On the face of it, there doesn't seem to be any reason for the label's style to change when it "floats". It does change color if errorText is (also) specified or if the input decorator is disabled.

@willlarche - If a textfield's hint and label styles are different, should the label's style morph to the hint style when the textfield gets the focus and the label floats (moves upwards)?

willlarche · 2018-09-06T16:19:06Z

Just to make sure I understand the issue:
Given:

There is no hint text.
There is label text.
There is styles for both label and hint.
Expectation:
When the label is down, it's label style
When the label is up, it's hint style
Result:
Always label style.

Question:

Should they morph back and forth?

HansMuller · 2018-09-06T16:30:13Z

Right, if the text field is displaying a label, should the label's style morph from the specified label-style to the hint-style when it moves up (upon focus) or back down again upon losing focus.

willlarche · 2018-09-06T16:43:00Z

I think, Hans, that your documentation didn't mean floating but being inline (not floating).

Also used for the [labelText] when the [labelText] is displayed on top of the input field (i.e., at the same location on the screen where text may be entered in the input field)

In which case that means use the hint style when it's not floating and the label style when it is.

Certainly you shouldn't use the hint style when floating, period. But we should support having 2 different styles for the label: one for floating and one for not-floating.

The other platforms just do color and size since they can't animate font or weight changes. If Flutter can animate font or weight changes, it would be cool to allow that interpolation.

Incidentally, this underline style of text field is deprecated. Consider adding a filled background like you find in the current guidelines. Our extensive UX research shows people are vastly more likely to properly interact with a text field that defines its touchable space than the legacy designs!

fhuonder · 2018-09-07T05:29:47Z

So...

The label should not morph into the hint style when it's floating (goes upwards on selection of the text field). That figures.
Is the default behavior wrong? In case no InputDecorationTheme is defined the label morphs when it floats (see my print screens). Is this a bug or is there another style applied in that case?
Should the documentation be adapted so that it is more clear?
What about the point that the style is deprecated?

shinyford · 2020-03-10T16:10:11Z

I believe this is still wrong (and that there was a misunderstanding the thread above).

The documentation states:

GIVEN

hintStyle is null
labelText, labelStyle and hintStyle are not null

THEN

when the input text is empty, the label is positioned inside the input box and takes the hintStyle
when the input text is not empty, the label is positioned above the input box and takes the labelStyle

(The discussion above had it the other way around: labelStyle when raised, hintStyle when in the input box.)

This makes sense to me, but currently is not what happens. Is there likely to be a fix? Many thanks.

TahaTesser · 2020-04-22T15:31:48Z

Issue still exist

flutter doctor -v

[✓] Flutter (Channel dev, v1.18.0-6.0.pre, on Mac OS X 10.15.4 19E287, locale
    en-GB)
    • Flutter version 1.18.0-6.0.pre at /Users/taha/Code/flutter_dev
    • Framework revision 84c84fb249 (31 hours ago), 2020-04-20 21:35:01 -0400
    • Engine revision 2bde4f0ae4
    • Dart version 2.9.0 (build 2.9.0-1.0.dev a12c36dd97)
 
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
    • Android SDK at /Users/taha/Code/sdk
    • Platform android-29, build-tools 29.0.3
    • ANDROID_HOME = /Users/taha/Code/sdk
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_212-release-1586-b4-5784211)
    • All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 11.4.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.4.1, Build version 11E503a
    • CocoaPods version 1.9.1
[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 3.6)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 45.1.1
    • Dart plugin version 192.7761
    • Java version OpenJDK Runtime Environment (build
      1.8.0_212-release-1586-b4-5784211)
[✓] VS Code (version 1.44.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.9.1
[✓] Connected device (4 available)
    • SM M305F   • 32003c30dc19668f • android-arm64  • Android 10 (API 29)
    • macOS      • macOS            • darwin-x64     • Mac OS X 10.15.4 19E287
    • Chrome     • chrome           • web-javascript • Google Chrome
      81.0.4044.113
    • Web Server • web-server       • web-javascript • Flutter Tools
• No issues found!

fernando-s97 · 2020-11-21T20:44:44Z

Any updates on this? I'm still facing this issue

flutter doctor -v

[✓] Flutter (Channel stable, 1.22.4, on Linux, locale en_GB.UTF-8)
    • Flutter version 1.22.4 at /opt/libs/flutter
    • Framework revision 1aafb3a8b9 (8 days ago), 2020-11-13 09:59:28 -0800
    • Engine revision 2c956a31c0
    • Dart version 2.10.4

 
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    • Android SDK at /home/fernando/Android/Sdk
    • Platform android-29, build-tools 29.0.2
    • Java binary at: /opt/android-studio/jre/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[!] Android Studio
    • Android Studio at /opt/android-studio
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)

[✓] Connected device (1 available)
    • ASUS X00QD (mobile) • 192.168.1.39:5555 • android-arm64 • Android 9 (API 28)

! Doctor found issues in 1 category.

freitzzz · 2020-12-15T17:40:27Z

For me the problem was the hint color was not being inherited from the hintStyle property. It prefers the hintColor given in ThemeData rather than hintStyle.

TahaTesser · 2021-02-02T15:15:58Z

code sample

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      theme: ThemeData.dark().copyWith(
          inputDecorationTheme: const InputDecorationTheme(
        focusedBorder:
            UnderlineInputBorder(borderSide: BorderSide(color: Colors.red)),
        enabledBorder:
            UnderlineInputBorder(borderSide: BorderSide(color: Colors.yellow)),
        labelStyle: TextStyle(color: Colors.yellow),
        hintStyle: TextStyle(color: Colors.red),
      )),
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Material App Bar'),
      ),
      body: Center(
        child: TextField(
          decoration: new InputDecoration(labelText: "Hello 1"),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {},
      ),
    );
  }
}

flutter doctor -v

[✓] Flutter (Channel stable, 1.22.6, on macOS 11.1 20C69 darwin-x64, locale en-GB)
    • Flutter version 1.22.6 at /Users/tahatesser/Code/flutter_stable
    • Framework revision 9b2d32b605 (11 days ago), 2021-01-22 14:36:39 -0800
    • Engine revision 2f0af37152
    • Dart version 2.10.5

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Volumes/Extreme/SDK
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Volumes/Extreme/SDK
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 12.4)
    • Xcode at /Volumes/Extreme/Xcode.app/Contents/Developer
    • Xcode 12.4, Build version 12D4e
    • CocoaPods version 1.10.1

[!] Android Studio (version 4.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)

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

[✓] Connected device (2 available)
    • RMX2001 (mobile)                   • EUYTFEUSQSRGDA6D • android-arm64 • Android 10 (API 29)
    • Android SDK built for x86 (mobile) • emulator-5554    • android-x86   • Android 10 (API 29) (emulator)

! Doctor found issues in 1 category.

[✓] Flutter (Channel master, 1.26.0-18.0.pre.128, on macOS 11.1 20C69 darwin-x64, locale en-GB)
    • Flutter version 1.26.0-18.0.pre.128 at /Users/tahatesser/Code/flutter_master
    • Framework revision 502ff3dbfe (59 minutes ago), 2021-02-02 05:41:03 -0500
    • Engine revision 7334085fc1
    • Dart version 2.12.0 (build 2.12.0-281.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Volumes/Extreme/SDK
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Volumes/Extreme/SDK
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Volumes/Extreme/Xcode.app/Contents/Developer
    • Xcode 12.4, Build version 12D4e
    • CocoaPods version 1.10.1

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

[✓] Android Studio (version 4.1)
    • 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 1.8.0_242-release-1644-b3-6915495)

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

[✓] Connected device (4 available)
    • RMX2001 (mobile)                   • EUYTFEUSQSRGDA6D • android-arm64  • Android 10 (API 29)
    • Android SDK built for x86 (mobile) • emulator-5554    • android-x86    • Android 10 (API 29) (emulator)
    • macOS (desktop)                    • macos            • darwin-x64     • macOS 11.1 20C69 darwin-x64
    • Chrome (web)                       • chrome           • web-javascript • Google Chrome 88.0.4324.96

• No issues found!

afzalali15 · 2021-05-02T18:35:37Z

It's very obvious behavior in my opinion.

labelText serves two purpose,

A Hint (when not focused)
A Title Label (when focused)

It should take hintStyle in first state (Hint in the same position where user will enter)

and labelStyle in second state (Label vertically above input)

Currently, Flutter is not behaving correctly for labelStyle and hintStyle. Please put below code in DartPad and check.

Code Sample:
TextFormField( decoration: InputDecoration( labelText: 'Username', labelStyle: TextStyle(color: Colors.grey), hintStyle: TextStyle(color: Colors.red), ), ),

[✓] Flutter (Channel stable, 2.0.4, on macOS 11.2.3 20D91 darwin-x64, locale en-AE)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.1)
[✓] Connected device (2 available)

ataberkw · 2021-06-21T21:46:36Z

Document says:

When the [labelText] is on top of the input field, the text uses the
[hintStyle] instead.

But case doesn't fit when you set floatingLabelBehavior: FloatingLabelBehavior.always. Because it is on top even if it's focused or not.

Sominemo · 2021-06-24T06:20:40Z

Yup, still a problem, there's no way to set different styles for the label, while it's inside the input or floating, using the theme constructor 😕

HansMuller · 2021-07-14T15:51:49Z

@fhuonder, @shinyford, @Sominemo, @ataberkw, @afzalali15, @freitzzz, @fernando-s97 - please take a look at #86389; we're hoping that will resolve this issue.

github-actions · 2021-08-04T12:00:58Z

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

zoechi added framework flutter/packages/flutter repository. See also f: labels. f: material design flutter/packages/flutter/material repository. labels Sep 4, 2018

zoechi added this to the Goals milestone Nov 26, 2018

TahaTesser added a: quality A truly polished experience has reproducible steps The issue has been confirmed reproducible and is ready to work on labels Apr 22, 2020

gouthamkumar253 mentioned this issue May 20, 2020

TextFormField label color does not change to active border's color #57081

Closed

kf6gpe added the P2 Important issues not at the top of the work list label May 29, 2020

guidezpl added the a: text input Entering text in a text field or keyboard related problems label Jun 19, 2020

TahaTesser added the found in release: 1.18 Occurs in 1.18 label Jul 29, 2020

Hixie removed this from the None. milestone Aug 17, 2020

TahaTesser added found in release: 1.22 Found to occur in 1.22 found in release: 1.26 Found to occur in 1.26 and removed found in release: 1.18 Occurs in 1.18 labels Feb 2, 2021

asashour mentioned this issue Jul 12, 2021

InputDecoration: Text should use hintStyle when inline #86288

Closed

8 tasks

Renzo-Olivares mentioned this issue Jul 13, 2021

Add floatingLabelStyle to InputDecoration #86389

Closed

Renzo-Olivares mentioned this issue Jul 19, 2021

Add floatingLabelStyle parameter to InputDecoration #86576

Merged

8 tasks

fluttergithubbot closed this as completed in #86576 Jul 19, 2021

TahaTesser added the r: fixed Issue is closed as already fixed in a newer version label Jul 21, 2021

github-actions bot locked as resolved and limited conversation to collaborators Aug 4, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

hintStyle of InputDecorationTheme not correctly applied #21385

hintStyle of InputDecorationTheme not correctly applied #21385

fhuonder commented Sep 4, 2018 •

edited

HansMuller commented Sep 5, 2018

fhuonder commented Sep 6, 2018

HansMuller commented Sep 6, 2018

willlarche commented Sep 6, 2018

HansMuller commented Sep 6, 2018

willlarche commented Sep 6, 2018

fhuonder commented Sep 7, 2018

shinyford commented Mar 10, 2020 •

edited

TahaTesser commented Apr 22, 2020

fernando-s97 commented Nov 21, 2020 •

edited by TahaTesser

freitzzz commented Dec 15, 2020

TahaTesser commented Feb 2, 2021

afzalali15 commented May 2, 2021

ataberkw commented Jun 21, 2021

Sominemo commented Jun 24, 2021 •

edited

HansMuller commented Jul 14, 2021

github-actions bot commented Aug 4, 2021

hintStyle of InputDecorationTheme not correctly applied #21385

hintStyle of InputDecorationTheme not correctly applied #21385

Comments

fhuonder commented Sep 4, 2018 • edited

HansMuller commented Sep 5, 2018

fhuonder commented Sep 6, 2018

HansMuller commented Sep 6, 2018

willlarche commented Sep 6, 2018

HansMuller commented Sep 6, 2018

willlarche commented Sep 6, 2018

fhuonder commented Sep 7, 2018

shinyford commented Mar 10, 2020 • edited

TahaTesser commented Apr 22, 2020

fernando-s97 commented Nov 21, 2020 • edited by TahaTesser

freitzzz commented Dec 15, 2020

TahaTesser commented Feb 2, 2021

afzalali15 commented May 2, 2021

It should take hintStyle in first state (Hint in the same position where user will enter)

and labelStyle in second state (Label vertically above input)

ataberkw commented Jun 21, 2021

Sominemo commented Jun 24, 2021 • edited

HansMuller commented Jul 14, 2021

github-actions bot commented Aug 4, 2021

fhuonder commented Sep 4, 2018 •

edited

shinyford commented Mar 10, 2020 •

edited

fernando-s97 commented Nov 21, 2020 •

edited by TahaTesser

Sominemo commented Jun 24, 2021 •

edited