CupertinoTextField text not vertically centered when fontSize differs between style and placeholderStyle.

Steps to reproduce

When using different fontSize values for style and placeholderStyle in CupertinoTextField,
the rendered text appears visually lower (not centered) even though textAlignVertical is set to TextAlignVertical.center.

This issue occurs since Flutter 3.35.x, after PR #166952 introduced _BaselineAlignedStack for baseline alignment between placeholder and editable text.
The new baseline-based layout causes the entire text area to appear visually shifted down when the two font sizes differ.

Create a simple CupertinoTextField with different font sizes for text and placeholder:

CupertinoTextField(
  style: const TextStyle(fontSize: 20, height: 1.4),
  placeholder: 'Enter text',
  placeholderStyle: const TextStyle(fontSize: 16, height: 1.4, color: CupertinoColors.systemGrey),
  textAlignVertical: TextAlignVertical.center,
)

Run on iOS simulator (or macOS with Cupertino style).
Observe that the text is rendered slightly below the visual center of the input box.

Expected results

The text (and placeholder) should appear visually centered within the field when textAlignVertical is center, regardless of font size differences.

Actual results

The text is baseline-aligned, making smaller placeholder fonts appear too low, and larger text fonts look offset downward relative to the center.

Code sample

CupertinoTextField(
  style: const TextStyle(fontSize: 20, height: 1.4),
  placeholder: 'Enter text',
  placeholderStyle: const TextStyle(fontSize: 16, height: 1.4, color: CupertinoColors.systemGrey),
  textAlignVertical: TextAlignVertical.center,
)

Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

Logs

[Paste your logs here]

Flutter Doctor output

Doctor output

[✓] Flutter (Channel stable, 3.35.5, on macOS 26.0 25A354 darwin-arm64, locale zh-Hans-CN) [393ms]
    • Flutter version 3.35.5 on channel stable at /Users/liwenhui/.fvm/versions/3.35.5
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision ac4e799d23 (13 days ago), 2025-09-26 12:05:09 -0700
    • Engine revision d3d45dcf25
    • Dart version 3.9.2
    • DevTools version 2.48.0
    • Feature flags: enable-web, enable-linux-desktop, enable-macos-desktop, enable-windows-desktop, enable-android, enable-ios, cli-animations,
      enable-lldb-debugging

[✓] Android toolchain - develop for Android devices (Android SDK version 36.1.0) [2.2s]
    • Android SDK at /Users/liwenhui/Library/Android/sdk
    • Emulator version 36.2.11.0 (build_id 14212360) (CL:N/A)
    • Platform android-36, build-tools 36.1.0
    • ANDROID_HOME = /Users/liwenhui/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
      This is the JDK bundled with the latest Android Studio installation on this machine.
      To manually set the JDK path, use: `flutter config --jdk-dir="path/to/jdk"`.
    • Java version OpenJDK Runtime Environment (build 21.0.8+-14018985-b1038.68)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 26.0.1) [910ms]
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 17A400
    • CocoaPods version 1.16.2

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

[✓] Android Studio (version 2025.1) [72ms]
    • 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 21.0.8+-14018985-b1038.68)

[✓] IntelliJ IDEA Ultimate Edition (version 2025.1) [72ms]
    • IntelliJ at /Applications/IntelliJ IDEA.app
    • Flutter plugin version 85.2.4
    • Dart plugin version 251.25267.1

[✓] VS Code (version 1.101.2) [5ms]
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension can be installed from:
      🔨 https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[✓] Connected device (0 available) [0.2s]

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

• No issues found!

Thanks for the report. Seeing the same behaviour with latest SDK versions on All Platforms. It is not replicable on 3.32.8 hence marking it as a regression. Thanks for bisecting as well.

stable : 3.35.6
master : 3.37.0-1.0.pre-499

Thanks for the report. Seeing the same behaviour with latest SDK versions on All Platforms. It is not replicable on 3.32.8 hence marking it as a regression. Thanks for bisecting as well.
stable : 3.35.6
master : 3.37.0-1.0.pre-499

Using Chinese characters may result in this offset situation

@victorsanni

cc @victorsanni from text input triage, do you have any thoughts on what may be causing this issue?

Thanks for the report. Seeing the same behaviour with latest SDK versions on All Platforms. It is not replicable on 3.32.8 hence marking it as a regression. Thanks for bisecting as well.
stable : 3.35.6
master : 3.37.0-1.0.pre-499
Using Chinese characters may result in this offset situation

This issue isn’t limited to Chinese — it occurs whenever the two have different font sizes.

Hi @LiWenHui96, can you confirm #177342 fixes this issue (or at least makes the alignment configurable using textAlignVertical)? Thanks.

Correct editable text and placeholder position in baseline aligned st…

@victorsanni

Hi @LiWenHui96, can you confirm #177342 fixes this issue (or at least makes the alignment configurable using textAlignVertical)? Thanks.

Hi @victorsanni , Thanks for the fix! The current change resolves the main alignment issue — the large offset no longer occurs.

I have a small suggestion regarding the placeholder’s vertical alignment logic.
Currently, it applies the full baselineDiff when computing the offset, which makes the placeholder appear slightly misaligned compared to the editable text.

To better match the visual behavior prior to Flutter 3.35, we could use half of the baseline difference instead:

// Current
placeholderParentData?.offset = editableTextParentData.offset + baselineDiff;

// Suggested
placeholderParentData?.offset = editableTextParentData.offset + baselineDiff / 2;

This adjustment restores the visual consistency with pre-3.35 versions while maintaining balanced alignment between the placeholder and editable text.

To better match the visual behavior prior to Flutter 3.35, we could use half of the baseline difference instead:

Won't it make the placeholder and editable text no longer baseline-aligned?

Correct editable text and placeholder position in baseline aligned st…

@victorsanni

Won't it make the placeholder and editable text no longer baseline-aligned?

@victorsanni Hi, this change is intended to better match the visual behavior seen prior to Flutter 3.35, rather than to keep the placeholder and editable text strictly baseline-aligned.

Hi, this change is intended to better match the visual behavior seen prior to Flutter 3.35, rather than to keep the placeholder and editable text strictly baseline-aligned.

The widget spec originally was to have the placeholder and editable text strictly baseline-aligned. This behavior wasn't available prior to #166952. #177342 makes the position configurable with CupertinoTextField.textAlignVertical, but the text field remains strictly baseline-aligned.

Is this a request for a non-baseline-aligned text field? If so, feel free to open a new issue with a description of the use case and proposal.

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.

Navigation Menu

Repository navigation

CupertinoTextField text not vertically centered when fontSize differs between style and placeholderStyle. #176817

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

CupertinoTextField text not vertically centered when fontSize differs between style and placeholderStyle. #176817

Description

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

Activity

tirth-patel-nc commented on Oct 10, 2025

OnePiece-D commented on Oct 15, 2025

Renzo-Olivares commented on Oct 16, 2025

LeoLi-Byte commented on Oct 17, 2025

victorsanni commented on Oct 27, 2025

LeoLi-Byte commented on Oct 28, 2025

victorsanni commented on Oct 29, 2025

LeoLi-Byte commented on Nov 6, 2025

victorsanni commented on Nov 6, 2025

github-actions commented on Nov 20, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions