Text field vertical align #34355

justinmc · 2019-06-12T20:44:14Z

Description

TextFields currently vertically center their text when they have an outline border. The difference between this and top alignment is almost nothing in most cases except when the input is very tall (see issue). We need to decide if we need that vertically centering functionality at all, and if so, when exactly.

Currently, this PR is just an exploration of how we could force top alignment, since according to #29927 (comment), we may not need this vertical centering at all.

Related Issues

Closes #29927
Reopened from #31079

justinmc · 2019-06-13T17:05:32Z

TODO:

Ensure compatibility with labels and hints.
Ensure compatibility with alignLabelWithHint (labelText of multiline TextFormField should be top aligned #18081 (comment)).
Ensure that the default cases of the tests added in this PR pass on master.
Delete outlineBaseline code.

justinmc · 2019-06-17T21:34:20Z

This PR adds a parameter textAlignVertical that determines text's vertical position within the field.

No border

TextField(
  textAlignVertical: TextAlignVertical.top, // default
)

TextField(
  textAlignVertical: TextAlignVertical.center,
)

TextField(
  textAlignVertical: TextAlignVertical.bottom,
)

TextField(
  textAlignVertical: TextAlignVertical(y: -0.5),
)

Border

Previously, when the TextField had a border, the text would be centered. This behavior is preserved by default, but it's also possible to position the text within a bordered TextField using textAlignVertical:

TextField(
  textAlignVertical: TextAlignVertical.top,
  decoration: InputDecoration(
    border: OutlineInputBorder(),
  ),
)

alignLabelWithHint

The behavior of alignLabelWithHint in existing cases shouldn't change with this PR. This was previously used to place the label at the top of the input when it would otherwise be centered.

However, textAlignVeritcal does affect the position of the hint, and so now alignLabelWithHint can be used to place the label in places not possible before:

TextField(
  textAlignVertical: TextAlignVertical.bottom,
  decoration: InputDecoration(
    alignLabelWithHint: true,
    hintText: 'hint',
    labelText: 'label',
  ),
)

justinmc · 2019-06-17T21:45:50Z

packages/flutter/lib/src/material/input_decorator.dart

outlineBaseline is no longer needed because centering is done by textAlignVertical now.

Maybe some of this comment needs to be retained above?

justinmc · 2019-06-17T21:50:56Z

I confirmed that this address the problem mentioned in #18081 (comment).

HansMuller

This looks good; just small potatoes.

HansMuller · 2019-06-17T23:34:31Z

packages/flutter/lib/src/material/input_decorator.dart

+    if (_textAlignVertical == value)
+      return;
+    _textAlignVertical = value;
+    markNeedsLayout();


Maybe only do this if the "effective" value of _textAlignVertical changed. For example if it was null and _isOutlineAligned is true, then only markNeedsLayout if the old value wasn't TextAlignVerticalCenter.

HansMuller · 2019-06-17T23:37:05Z

packages/flutter/lib/src/material/input_decorator.dart

+    // input and align the remaining part of the text and prefix/suffix.
    final double overflow = math.max(0, contentHeight - maxContainerHeight);
-    final double baselineAdjustment = fixAboveInput - overflow;
+    final double textAlignVerticalFactor = (textAlignVertical.y + 1.0) / 2.0;


It's not obvious (to me) what the + 1.0 and the 1 - adjustments are for here and on the next line.

HansMuller · 2019-06-17T23:37:51Z

packages/flutter/lib/src/material/input_decorator.dart

Maybe some of this comment needs to be retained above?

HansMuller · 2019-06-17T23:39:58Z

packages/flutter/lib/src/material/input_decorator.dart

          start += centerLayout(prefixIcon, start);
        }
-        if (label != null)
+        if (label != null) {


HansMuller · 2019-06-17T23:42:05Z

packages/flutter/lib/src/material/input_decorator.dart

+
+/// The vertical alignment of text within an input.
+///
+/// This consists simply of a double [y] that can range from -1.0 to 1.0. -1.0


This consists simply of a double [y] => A single [y] value

HansMuller · 2019-06-17T23:46:04Z

packages/flutter/lib/src/material/input_decorator.dart

+  }) : assert(y != null),
+       assert(y >= -1.0 && y <= 1.0);
+
+  /// A value ranging from -1.0 to 1.0 that corresponds to the topmost to the


that corresponds to the topmost to the => bottommost possible text position => that defines the topmost and bottommost locations of the top and bottom of the input text box.

HansMuller · 2019-06-17T23:49:10Z

packages/flutter/lib/src/material/input_decorator.dart

+  /// bottommost possible text position.
+  final double y;
+
+  /// A TextAlignVertical that aligns to the top of the input.


I think these values might be easier to understand if they were defined in terms of their effect on a TextField's input text. Like: Aligns a TextField's input Text with the topmost location within the TextField.

HansMuller · 2019-06-17T23:50:55Z

packages/flutter/lib/src/material/input_decorator.dart

+
+  @override
+  String toString() {
+    return 'TextAlignVertical(y: $y)';


I think you'd want $runtimeType(y: $y) because subclassing

HansMuller · 2019-06-17T23:51:53Z

packages/flutter/lib/src/material/input_decorator.dart

+  /// {@template flutter.widgets.inputDecorator.textAlignVertical}
+  /// How the text should be aligned vertically.
+  ///
+  /// Cannot be null.


I think it can be null.

Good catch!

HansMuller · 2019-06-17T23:52:37Z

packages/flutter/lib/src/material/input_decorator.dart

  final TextAlign textAlign;

+  /// {@template flutter.widgets.inputDecorator.textAlignVertical}
+  /// How the text should be aligned vertically.


Best to explain this a little more carefully, since what we're talking about depends on how the textfield is decorated.

HansMuller

LGTM

HansMuller · 2019-06-18T22:14:12Z

packages/flutter/lib/src/material/input_decorator.dart

+  /// How the text should be aligned vertically.
+  ///
+  /// Determines the alignment of the baseline within the available space of
+  /// the input.  For example, TextAlignVertical.top will place the baseline


extra space after the "."

Maybe say: input (typically a TextField).

HansMuller · 2019-06-18T22:16:09Z

packages/flutter/lib/src/material/input_decorator.dart

+  /// the input.  For example, TextAlignVertical.top will place the baseline
+  /// such that the text, and any attached decoration like prefix and suffix,
+  /// is as close to the top of the input as possible without overflowing.
+  /// Likewise, prefix and suffix height are included in the calculation at


The heights of the prefix and suffix are similarly included for other alignment values.

HansMuller · 2019-06-18T22:18:17Z

packages/flutter/lib/src/material/input_decorator.dart

+///
+/// See also:
+///
+///  * [TextField.textAlignVertical]


Links like this are usually followed by a brief explanation. Like:

[TextField.textAlignVertical], which defines the alignment of a text field's prefix, input, and suffix, within the text field's [InputDecorator].

Adds the `textAlignVertical` param to TextField and InputDecorator, allowing arbitrary vertical positioning of text in its input.

googlebot added the cla: yes label Jun 12, 2019

justinmc added work in progress; do not review and removed cla: yes labels Jun 12, 2019

googlebot added the cla: yes label Jun 12, 2019

justinmc added f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels. and removed cla: yes labels Jun 12, 2019

googlebot added the cla: yes label Jun 12, 2019

justinmc force-pushed the text-field-vertical-align branch from a457e20 to 01ebf49 Compare June 13, 2019 16:59

justinmc force-pushed the text-field-vertical-align branch 2 times, most recently from 9493d4c to b1be182 Compare June 17, 2019 17:40

justinmc removed the work in progress; do not review label Jun 17, 2019

justinmc commented Jun 17, 2019

View reviewed changes

justinmc requested a review from HansMuller June 17, 2019 21:47

Squashed everything to fix version incompatibility error

b9e01fc

justinmc force-pushed the text-field-vertical-align branch from 1759ff3 to b9e01fc Compare June 17, 2019 22:49

Document missed param

a72bc55

HansMuller reviewed Jun 17, 2019

View reviewed changes

justinmc added 4 commits June 18, 2019 07:23

Perf improvement for setting textAlignVertical and docs improvements

f730d05

Docs improvements

d69a6dd

Fix mac rounding failures

06177d0

Link to uses of textAlignVertical in See Also

7dc47fe

justinmc self-assigned this Jun 18, 2019

HansMuller approved these changes Jun 18, 2019

View reviewed changes

Code review doc improvements

aeb8950

justinmc merged commit b798b27 into flutter:master Jun 19, 2019

justinmc deleted the text-field-vertical-align branch June 19, 2019 15:24

This was referenced Jun 19, 2019

Textfield text is centered vertically when expands = true and using an OutlineInputBorder #29927

Closed

CupertinoTextField vertical alignment #34723

Merged

Fix Vertical Alignment Regression #34859

Merged

justinmc mentioned this pull request Jul 3, 2019

CupertinoTextField should vertically center align the content text as well as the placeholder text, or make the vertical alignment configurable #33785

Closed

johnsonmh pushed a commit to johnsonmh/flutter that referenced this pull request Jul 30, 2019

Text field vertical align (flutter#34355)

8c1b98c

Adds the `textAlignVertical` param to TextField and InputDecorator, allowing arbitrary vertical positioning of text in its input.

justinmc mentioned this pull request Aug 6, 2019

Clearing a TextField by tapping on its suffixIcon causes its ripple to break, and the field stays gray. #36324

Closed

This was referenced Aug 23, 2019

TextFormField TextAlignVertical support #39123

Closed

Add the textAlignVertical param to TextFormField #39144

Merged

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

Text field vertical align #34355

Text field vertical align #34355

Uh oh!

Conversation

justinmc commented Jun 12, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related Issues

Uh oh!

justinmc commented Jun 13, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

justinmc commented Jun 17, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

No border

Border

alignLabelWithHint

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

justinmc commented Jun 17, 2019

Uh oh!

HansMuller left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

HansMuller left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

HansMuller Jun 18, 2019 • 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!

justinmc commented Jun 12, 2019 •

edited

Loading

justinmc commented Jun 13, 2019 •

edited

Loading

justinmc commented Jun 17, 2019 •

edited

Loading

HansMuller Jun 18, 2019 •

edited

Loading