TextField widget hint text is not vertically aligned

[virskor]

Details

I am using Flutter TextField widget, and i found that hint text is not automatically vertically aligned.

I found no methods to modify hint text Align.
look at this picture.

I found many people troubled by this problem, and i had try my best to find out reason why??

I FOUND THAT, DUDE.

Using theme data widget to modify app fonts, like Chinese font on IOS named PingFang SC.
After remove any fonts setting, you see this widget rendered perfect.

Hope any method to modify hint text align.
Thanks ,Dude i know that you are working hard to make Flutter better, and i am grateful to you for your help.

Logs

[✓] Flutter (Channel dev, v1.10.1, on Mac OS X 10.14.6 18G95, locale zh-Hans-CN)
• Flutter version 1.10.1 at /Users/weizhang/flutter
• Framework revision ce45c2d (5 天前), 2019-09-06 20:11:41 -0400
• Engine revision b9ce250
• Dart version 2.5.0 (build 2.5.0-dev.4.0 be66176534)

[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
• Android SDK at /Users/weizhang/Library/Android/sdk
• Android NDK location not configured (optional; useful for native profiling support)
• Platform android-29, build-tools 29.0.2
• Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b49-5587405)
• All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 10.3)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Xcode 10.3, Build version 10G8
• CocoaPods version 1.7.5

[✓] Android Studio (version 3.5)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin version 39.0.3
• Dart plugin version 191.8423
• Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b49-5587405)

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

[✓] Connected device (1 available)
• iPhone Xs Max • 2FF110A8-4E4F-42EA-99D5-918CEF5422C3 • ios • com.apple.CoreSimulator.SimRuntime.iOS-12-4 (simulator)

[jp1017]

Same issue with

Flutter 1.9.1+hotfix.2 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 2d2a1ff (5 days ago) • 2019-09-06 18:39:49 -0700
Engine • revision b863200
Tools • Dart 2.5.0

[baoxiehao]

Same problem with v1.9.1+hotfix.2.
And it seems not 100% reproducible for every device.

[heyman0823]

Maybe you can hack as follows before this bug fixed:

Localizations(
      locale: Locale("en", ""),
      delegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      child: TextFormField(...)
)

[virskor]

@heyman0823 this will make cutButtonLabel not automatically show Chinese or etc....

[heyman0823]

@virskor You can wrap TextFormField with a custom widget, and pass the localized string(label, hint) by constructor:

class InputWidget extends StatefulWidget {
  final String labelText;

  const InputWidget({
    this.labelText,
  });

  @override
  Widget build(BuildContext context) {
    return Localizations(
      locale: Locale("en", ""),
      delegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      child: TextFormField(
        ...
        decoration: InputDecoration(
          labelText: widget.labelText,
          ...
        ),
      );
    );
  }
}

[chenenyu]

+1

[mainxml]

+1

[githubhai]

试试 TextField > style > textBaseline: TextBaseline.alphabetic

[jp1017]

试试 TextField > style > textBaseline: TextBaseline.alphabetic

Good， 全局修改的话，设置主题即可：

ThemeData(
    textTheme: TextTheme(subhead: TextStyle(textBaseline: TextBaseline.alphabetic)),

[heibaikn]

试试 TextField > style > textBaseline: TextBaseline.alphabetic

Good， 全局修改的话，设置主题即可：

ThemeData(
    textTheme: TextTheme(subhead: TextStyle(textBaseline: TextBaseline.alphabetic)),

谢谢 very much.

child: TextField(
    style: TextStyle(textBaseline: TextBaseline.alphabetic),
)

[phoenixsky]

试试 TextField > style > textBaseline: TextBaseline.alphabetic

Good， 全局修改的话，设置主题即可：

ThemeData(
    textTheme: TextTheme(subhead: TextStyle(textBaseline: TextBaseline.alphabetic)),

use TextTheme()
it would change BottomNavigationBarItem icon color to black on iOS DarkMode
I recommend that

 textTheme: theme.textTheme.copyWith(
          subhead: theme.textTheme.subhead
              .copyWith(textBaseline: TextBaseline.alphabetic)),

[iapicca]

Hi @virskor
I see there's an open issue addressing the case you described.
Please follow up on that issue,
I'm closing the current one as duplicate.
If you disagree please write in the comments
and I will reopen it.
Thank you

[GaryQian]

This should be fixed by #44029

[Rempage]

you can set TextField->hintStyle->height:1.0

[1111mp]

The CupertinoTextField has the same problem.
cant resolve it.

[snehal741]

Put it inside a container
Worked for me!
Container( child: TextFormField( ) )

[github-actions]

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.