Baseline-align CupertinoTextField placeholder #166952

victorsanni · 2025-04-10T22:13:53Z

Before	After

Fixes Can't align placeholder of CupertinoTextField with min lines to top

victorsanni · 2025-04-10T22:14:24Z

@LongCatIsLooong just confirming this is the correct approach.

packages/flutter/lib/src/cupertino/text_field.dart

justinmc

Nice use of a RenderObjectWidget here, this looks good. I think you might be able to make this slightly cleaner user slots, see my comment below. Otherwise LGTM.

justinmc · 2025-05-16T17:01:31Z

packages/flutter/lib/src/cupertino/text_field.dart

+                textDirection:
+                    widget.textDirection ?? Directionality.maybeOf(context) ?? TextDirection.ltr,
+                child: _BaselineAlignedStack(
+                  children: <Widget>[if (placeholder != null) placeholder, editableText],


If it is known that this widget will only ever take a maximum of two children (placeholder and editableText), then this can be implemented as "slots" rather than a list of children. See SlottedMultiChildRenderObjectWidget. Sorry for not pointing you in that direction in the first place if so!

justinmc · 2025-05-16T17:03:19Z

packages/flutter/lib/src/cupertino/text_field.dart

+  double? getDistanceToBaseline(TextBaseline baseline, {bool onlyReal = false}) {
+    final RenderBox? editableText = _editableTextChild;
+    if (editableText == null) {
+      return super.getDistanceToBaseline(baseline, onlyReal: onlyReal);
+    }
+    final double? editableTextBaseline = editableText.getDistanceToBaseline(
+      baseline,
+      onlyReal: onlyReal,
+    );
+    if (editableTextBaseline == null) {
+      return super.getDistanceToBaseline(baseline, onlyReal: onlyReal);
+    }
+    final _BaselineAlignedStackParentData editableTextParentData =
+        editableText.parentData! as _BaselineAlignedStackParentData;
+    return editableTextParentData.offset.dy + editableTextBaseline;
+  }


Is it the case that the placeholder must be smaller than the editableText? Maybe leave a comment about this somewhere if it makes sense.

I was thinking about the case where the placeholder is much larger than the editableText, so that aligning the placeholder to the editableText's baseline makes the placeholder overflow out the top. But I'm assuming that's not possible.

Yes, that was also confusing for me. I saw 3 options:

EditableText baseline

Placeholder baseline

The max of 1) and 2)

The current implementation is 1), but I honestly do not know which to go with, I need further guidance here. I can document this in the docs for CupertinoTextField.placeholder and/or CupertinoTextField.placeholderStyle.

Ok I say keep it 1 actually. Looking at your screenshots up in the PR description, I feel like the EditableText baseline is supposed to be "the" baseline for the field. If someone makes the placeholder so big that it overflows, then that's their own fault.

We can always reconsider if someone opens an issue with a good argument.

justinmc

LGTM 👍

Looks good with slots, thanks for changing that.

packages/flutter/test/cupertino/text_field_test.dart

…ter#166952)

flutter/flutter@85564cb...60050a0 2025-05-24 [email protected] Roll Skia from 0834eea9de33 to 91dc88dc70e5 (1 revision) (flutter/flutter#169414) 2025-05-24 [email protected] Roll Dart SDK from 0a6b16a55b9e to 7dab9bffe1f7 (1 revision) (flutter/flutter#169406) 2025-05-24 [email protected] Correct calculation for CupertinoTextSelectionToolbar vertical position (flutter/flutter#169308) 2025-05-24 [email protected] Baseline-align CupertinoTextField placeholder (flutter/flutter#166952) 2025-05-24 [email protected] Roll Dart SDK from 8354914ef97b to 0a6b16a55b9e (3 revisions) (flutter/flutter#169403) 2025-05-24 [email protected] Start removing Observatory support and references (flutter/flutter#169216) 2025-05-23 [email protected] Roll Skia from f42bb59753fe to 0834eea9de33 (3 revisions) (flutter/flutter#169393) 2025-05-23 [email protected] Roll Skia from 956fd8b14e22 to f42bb59753fe (2 revisions) (flutter/flutter#169379) 2025-05-23 [email protected] [Engine] Fast blurring algorithm for RSuperellipse (flutter/flutter#169187) 2025-05-23 [email protected] Add a page describing best CI practices for `flutter`-org repos (flutter/flutter#169364) 2025-05-23 [email protected] Revert "Mark web_tool_tests_1_2 as bringup." (flutter/flutter#169361) 2025-05-23 [email protected] Add changelog section for 3.32.0 and 3.32.1, and add note for ndk checking cherry pick (flutter/flutter#169369) 2025-05-23 [email protected] Roll Dart SDK from 085f110ecf33 to 8354914ef97b (1 revision) (flutter/flutter#169349) 2025-05-23 [email protected] Remove handling of the legacy `.flutter-plugins` file in `PluginHandler.kt`. (flutter/flutter#169317) 2025-05-23 [email protected] Use baseUri of WebAssetServer for reload_scripts.json (flutter/flutter#169267) 2025-05-23 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Use pub workspace (#168662)" (flutter/flutter#169357) 2025-05-23 [email protected] Use pub workspace (flutter/flutter#168662) If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/flutter-packages Please CC [email protected],[email protected] on the revert to ensure that a human is aware of the problem. To file a bug in Packages: https://github.com/flutter/flutter/issues/new/choose To report a problem with the AutoRoller itself, please file a bug: https://issues.skia.org/issues/new?component=1389291&template=1850622 Documentation for the AutoRoller is here: https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md

| Before | After | | --- | --- | | <img width="348" alt="non baseline aligned placeholder" src="https://github.com/user-attachments/assets/62f779cc-1d16-41f3-92f8-a2de16a04895" /> | <img width="348" alt="baseline aligned placeholder" src="https://github.com/user-attachments/assets/e43d200f-ef47-4d10-a74a-a2c6998b44f5" /> | Fixes [Can't align placeholder of CupertinoTextField with min lines to top](flutter#138794)

… fidelity updates (#169708) This PR does the following: ## Show large title mid-transition if automaticallyImplyLeading is false (see #169708 (comment)) ## Correct color for the CupertinoSearchTextField placeholder (see #163020 (comment)) | Dark mode | Light mode | | --- | --- | | <img width="381" alt="placeholder color dark mode" src="https://github.com/user-attachments/assets/e37e23fa-9f4f-495e-8f02-b9c38a4faffb" /> | <img width="381" alt="placeholder color light mode" src="https://github.com/user-attachments/assets/16e24a61-2528-44e0-9afa-8431487cf5ff" /> | And also: - Removes flaky mid-transition goldens - Fixes a CupertinoTextField crash caused by #166952 where size > constraints Fixes [Improve fidelity of CupertinoSliverNavigationBar.search and CupertinoSearchTextField](#163020)

* master: (125 commits) Roll Fuchsia Linux SDK from XtPp9bBW49iDJ0wbA... to -eo2JqnJBauuGSzoW... (flutter#169424) Roll Skia from 91dc88dc70e5 to 443f5257f382 (1 revision) (flutter#169422) Roll Skia from 0834eea9de33 to 91dc88dc70e5 (1 revision) (flutter#169414) Roll Dart SDK from 0a6b16a55b9e to 7dab9bffe1f7 (1 revision) (flutter#169406) Correct calculation for CupertinoTextSelectionToolbar vertical position (flutter#169308) Baseline-align CupertinoTextField placeholder (flutter#166952) Roll Dart SDK from 8354914ef97b to 0a6b16a55b9e (3 revisions) (flutter#169403) Start removing Observatory support and references (flutter#169216) Roll Skia from f42bb59753fe to 0834eea9de33 (3 revisions) (flutter#169393) Roll Skia from 956fd8b14e22 to f42bb59753fe (2 revisions) (flutter#169379) [Engine] Fast blurring algorithm for RSuperellipse (flutter#169187) Add a page describing best CI practices for `flutter`-org repos (flutter#169364) Revert "Mark web_tool_tests_1_2 as bringup." (flutter#169361) Add changelog section for 3.32.0 and 3.32.1, and add note for ndk checking cherry pick (flutter#169369) Roll Dart SDK from 085f110ecf33 to 8354914ef97b (1 revision) (flutter#169349) Remove handling of the legacy `.flutter-plugins` file in `PluginHandler.kt`. (flutter#169317) Use baseUri of WebAssetServer for reload_scripts.json (flutter#169267) Reverts "Use pub workspace (flutter#168662)" (flutter#169357) Use pub workspace (flutter#168662) Reverts "[Reland2] Implements UISceneDelegate dynamically w/ FlutterLaunchEngine (flutter#169276)" (flutter#169347) ...

…r#9318) flutter/flutter@85564cb...60050a0 2025-05-24 [email protected] Roll Skia from 0834eea9de33 to 91dc88dc70e5 (1 revision) (flutter/flutter#169414) 2025-05-24 [email protected] Roll Dart SDK from 0a6b16a55b9e to 7dab9bffe1f7 (1 revision) (flutter/flutter#169406) 2025-05-24 [email protected] Correct calculation for CupertinoTextSelectionToolbar vertical position (flutter/flutter#169308) 2025-05-24 [email protected] Baseline-align CupertinoTextField placeholder (flutter/flutter#166952) 2025-05-24 [email protected] Roll Dart SDK from 8354914ef97b to 0a6b16a55b9e (3 revisions) (flutter/flutter#169403) 2025-05-24 [email protected] Start removing Observatory support and references (flutter/flutter#169216) 2025-05-23 [email protected] Roll Skia from f42bb59753fe to 0834eea9de33 (3 revisions) (flutter/flutter#169393) 2025-05-23 [email protected] Roll Skia from 956fd8b14e22 to f42bb59753fe (2 revisions) (flutter/flutter#169379) 2025-05-23 [email protected] [Engine] Fast blurring algorithm for RSuperellipse (flutter/flutter#169187) 2025-05-23 [email protected] Add a page describing best CI practices for `flutter`-org repos (flutter/flutter#169364) 2025-05-23 [email protected] Revert "Mark web_tool_tests_1_2 as bringup." (flutter/flutter#169361) 2025-05-23 [email protected] Add changelog section for 3.32.0 and 3.32.1, and add note for ndk checking cherry pick (flutter/flutter#169369) 2025-05-23 [email protected] Roll Dart SDK from 085f110ecf33 to 8354914ef97b (1 revision) (flutter/flutter#169349) 2025-05-23 [email protected] Remove handling of the legacy `.flutter-plugins` file in `PluginHandler.kt`. (flutter/flutter#169317) 2025-05-23 [email protected] Use baseUri of WebAssetServer for reload_scripts.json (flutter/flutter#169267) 2025-05-23 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Use pub workspace (#168662)" (flutter/flutter#169357) 2025-05-23 [email protected] Use pub workspace (flutter/flutter#168662) If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/flutter-packages Please CC [email protected],[email protected] on the revert to ensure that a human is aware of the problem. To file a bug in Packages: https://github.com/flutter/flutter/issues/new/choose To report a problem with the AutoRoller itself, please file a bug: https://issues.skia.org/issues/new?component=1389291&template=1850622 Documentation for the AutoRoller is here: https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md

WolfMobileDev · 2025-07-03T02:15:01Z

In which tag should the submission be merged?

This reverts commit 3df4a3c.

…ter#166952)

#174889) Adds `computeMaxIntrinsicHeight` and `computeMinIntrinsicHeight` to `_RenderBaselineAlignedStack`. This should have been added in [Baseline-align CupertinoTextField placeholder](#166952). Fixes [CupertinoTextFormFieldRow with placeholder causes unnecessary scrolling in CupertinoAlertDialog](#174797) Fixes [CupertinoAlertDialog actions obstructs CupertinoTextField content with placeholder text](#174774)

flutter#174889) Adds `computeMaxIntrinsicHeight` and `computeMinIntrinsicHeight` to `_RenderBaselineAlignedStack`. This should have been added in [Baseline-align CupertinoTextField placeholder](flutter#166952). Fixes [CupertinoTextFormFieldRow with placeholder causes unnecessary scrolling in CupertinoAlertDialog](flutter#174797) Fixes [CupertinoAlertDialog actions obstructs CupertinoTextField content with placeholder text](flutter#174774)

Change placeholder alignment from center to topStart

2fca3ad

github-actions bot added a: text input Entering text in a text field or keyboard related problems framework flutter/packages/flutter repository. See also f: labels. f: cupertino flutter/packages/flutter/cupertino repository labels Apr 10, 2025

Add test

ab17db9

victorsanni marked this pull request as ready for review April 15, 2025 01:26

Merge branch 'master' into align-placeholder

4eaabfd

LongCatIsLooong reviewed Apr 15, 2025

View reviewed changes

packages/flutter/lib/src/cupertino/text_field.dart Show resolved Hide resolved

victorsanni marked this pull request as draft April 15, 2025 22:49

victorsanni added 7 commits April 15, 2025 15:49

Merge branch 'master' into align-placeholder

a82eb4f

Basic baseline alignment

64f998b

Merge branch 'master' into align-placeholder

54b5320

Implement computeDryLayout

200ddcb

Merge branch 'master' into align-placeholder

0988a5a

Remove unused import

bd372ba

BaselineAlignedStack

9333d22

victorsanni marked this pull request as ready for review May 15, 2025 23:01

Merge branch 'master' into align-placeholder

eb3ae21

victorsanni requested review from LongCatIsLooong and justinmc May 15, 2025 23:02

victorsanni changed the title ~~Change CupertinoTextField placeholder alignment from center to topStart~~ Baseline-align CupertinoTextField placeholder May 15, 2025

justinmc reviewed May 16, 2025

View reviewed changes

victorsanni added 2 commits May 16, 2025 13:45

SlottedMultiChildRenderObjectWidget

047eb39

Merge branch 'master' into align-placeholder

37f6449

victorsanni requested a review from justinmc May 16, 2025 20:46

justinmc approved these changes May 16, 2025

View reviewed changes

packages/flutter/test/cupertino/text_field_test.dart Show resolved Hide resolved

victorsanni added 3 commits May 16, 2025 15:05

Add test

30fe1e8

Merge branch 'master' into align-placeholder

20ac10b

Slight name tweak

1f19a29

victorsanni added the autosubmit Merge PR when tree becomes green via auto submit App label May 24, 2025

auto-submit bot added this pull request to the merge queue May 24, 2025

Merged via the queue into flutter:master with commit 3df4a3c May 24, 2025
76 checks passed

flutter-dashboard bot removed the autosubmit Merge PR when tree becomes green via auto submit App label May 24, 2025

engine-flutter-autoroll mentioned this pull request May 24, 2025

Roll Flutter from 85564cbba9e7 to 60050a0b4d56 (17 revisions) flutter/packages#9318

Merged

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 24, 2025

3df4a3c6a Baseline-align CupertinoTextField placeholder (flutter/flut…

2a02994

…ter#166952)

victorsanni mentioned this pull request May 30, 2025

CupertinoSearchTextField and CupertinoSliverNavigationBar.search more fidelity updates #169708

Merged

victorsanni deleted the align-placeholder branch July 1, 2025 20:02

danagbemava-nc mentioned this pull request Jul 2, 2025

[Apple Pencil][Regression] CupertinoTextField doesn't accept input from Apple Pencil #171510

Closed

justinmc added a commit to justinmc/flutter that referenced this pull request Jul 18, 2025

Revert "Baseline-align CupertinoTextField placeholder (flutter#166952)"

da20e79

This reverts commit 3df4a3c.

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 14, 2025

3df4a3c6a Baseline-align CupertinoTextField placeholder (flutter/flut…

05a9c67

…ter#166952)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 14, 2025

3df4a3c6a Baseline-align CupertinoTextField placeholder (flutter/flut…

dce8af8

…ter#166952)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 15, 2025

3df4a3c6a Baseline-align CupertinoTextField placeholder (flutter/flut…

f5b2b02

…ter#166952)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 15, 2025

3df4a3c6a Baseline-align CupertinoTextField placeholder (flutter/flut…

236be8e

…ter#166952)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 16, 2025

3df4a3c6a Baseline-align CupertinoTextField placeholder (flutter/flut…

5d343c8

…ter#166952)

victorsanni mentioned this pull request Sep 3, 2025

Correct intrinsics calculation for CupertinoTextField with placeholder #174889

Merged

LiWenHui96 mentioned this pull request Oct 10, 2025

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

Closed

victorsanni mentioned this pull request Oct 30, 2025

Add widget to stack children aligned to a reference baseline #177802

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Baseline-align CupertinoTextField placeholder #166952

Baseline-align CupertinoTextField placeholder #166952

Uh oh!

victorsanni commented Apr 10, 2025 •

edited

Loading

Uh oh!

victorsanni commented Apr 10, 2025

Uh oh!

Uh oh!

justinmc left a comment

Uh oh!

justinmc May 16, 2025

Uh oh!

justinmc May 16, 2025

Uh oh!

victorsanni May 16, 2025

Uh oh!

justinmc May 16, 2025

Uh oh!

justinmc left a comment •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

WolfMobileDev commented Jul 3, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Baseline-align CupertinoTextField placeholder #166952

Baseline-align CupertinoTextField placeholder #166952

Uh oh!

Conversation

victorsanni commented Apr 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

victorsanni commented Apr 10, 2025

Uh oh!

Uh oh!

justinmc left a comment

Choose a reason for hiding this comment

Uh oh!

justinmc May 16, 2025

Choose a reason for hiding this comment

Uh oh!

justinmc May 16, 2025

Choose a reason for hiding this comment

Uh oh!

victorsanni May 16, 2025

Choose a reason for hiding this comment

Uh oh!

justinmc May 16, 2025

Choose a reason for hiding this comment

Uh oh!

justinmc left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

WolfMobileDev commented Jul 3, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

victorsanni commented Apr 10, 2025 •

edited

Loading

justinmc left a comment •

edited

Loading