Add InputDecoration alignLabelWithHint parameter by justinmc · Pull Request #24993 · flutter/flutter

justinmc · 2018-12-05T18:52:39Z

Text labels were previously hard coded to align in the center of a multiline text field:

This PR adds the alignLabelWithHint param to InputDecoration that allows you to opt in to aligning the label to the top, in the same place that the hint and the first line of text will appear.

justinmc · 2018-12-05T18:53:19Z

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

 const Curve _kTransitionCurve = Curves.fastOutSlowIn;

+/// Alignment before focus, relevant to multiline inupts
+enum TextFieldLabelAlignment {


Is there an enum somewhere that I can reuse instead?

You could use AlignmentGeometry and make the default value AlignmentDirectional.centerStart. The docs could attention to AlignmentDirection.topStart as a common alternative. Using AlignmentGeometry is a little more complicated and it adds a bunch of options that probably aren't needed.

This enum shouldn't really be called TextField... since it's for configuring InputDecorator.

Since it's really just a glorified flag, you could make it a flag. Like bool alignLabelWithHint

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

packages/flutter/test/material/input_decorator_test.dart

justinmc · 2018-12-05T21:00:03Z

@HansMuller This is ready for a real review now. Let me know if I can elaborate on documentation or anything as well.

HansMuller

Please add a check for InputDecorator.debugFillProperties() and InputDecoration.debugFillProperties too.

HansMuller · 2018-12-05T22:36:52Z

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

 const Curve _kTransitionCurve = Curves.fastOutSlowIn;

+/// Alignment before focus, relevant to multiline inupts
+enum TextFieldLabelAlignment {


You could use AlignmentGeometry and make the default value AlignmentDirectional.centerStart. The docs could attention to AlignmentDirection.topStart as a common alternative. Using AlignmentGeometry is a little more complicated and it adds a bunch of options that probably aren't needed.

This enum shouldn't really be called TextField... since it's for configuring InputDecorator.

Since it's really just a glorified flag, you could make it a flag. Like bool alignLabelWithHint

HansMuller · 2018-12-05T22:38:16Z

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

    boxConstraints = boxConstraints.copyWith(maxWidth: inputWidth);
    if (label != null) // The label is not baseline aligned.
-      label.layout(boxConstraints, parentUsesSize: true);
+      layoutLineBox(label);


The labelAlignment check will be needed here as well. If label alignment is the center (as before) then it's height doesn't contribute to the height of the prefix-hint-input-suffix baseline-aligned.

HansMuller · 2018-12-05T22:45:02Z

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

        }
-        if (label != null)
-          centerLayout(label, start - label.size.width);
+        if (label != null) {


Even though there are only two cases here, we consistently use switch to dispatch enum values. Here and below...

https://github.com/flutter/flutter/wiki/Style-guide-for-Flutter-repo#avoid-using-if-chains-or--or--with-enum-values

HansMuller · 2018-12-05T22:53:23Z

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

  /// If provided, this replaces the semantic label of the [counterText].
  final String semanticCounterText;

+  /// When the input is multiline (maxLines > 1) and before it is focused, the


This is tricky. It can be specified for any InputDecorator, even if the InputDecorator doesn't contain a multiline texfield.

You could say that it's typically specified when the decorator's child is a multline [TextField], i.e. a text field for which [TextField.maxLines] is null or > 1, to override the default center alignment for the label.

HansMuller · 2018-12-05T23:09:55Z

packages/flutter/test/material/input_decorator_test.dart

+      ),
+    );
+    await tester.pumpAndSettle();
+    expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, 56.0));


Also test this against a multiline text field (the default child for buildInputDecorator is Text('text').

Rather than checking absolute top/left values, verify that the label is in the same location as the hint (other tests verify that the hint ends up in the right place).

packages/flutter/test/material/input_decorator_test.dart

justinmc · 2018-12-06T17:55:59Z

@HansMuller Ready for re-review.

Is this what you were looking for regarding the debugFillProperties comment? 6fd5ad4 It looks like InputDecoration has no debugFillProperties method, and InputDecorator doesn't directly have alignLabelWithHint. Let me know if I should add a debugFillProperties or anything like that.

HansMuller

LGTM, just needs some small changes

HansMuller · 2018-12-06T20:08:34Z

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

+      if (decoration.alignLabelWithHint) {
+        layoutLineBox(label);
+      } else {
+        label.layout(boxConstraints, parentUsesSize: true);


In this case, best to preserve the comment FWIW

// The label is centered, not baseline aligned

HansMuller · 2018-12-06T20:09:43Z

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


+  /// Typically set to true when the [InputDecorator] contains a multiline
+  /// [TextField] ([TextField.maxLines] is null or > 1) to override the default
+  /// behavior of aligning the label in the center of the [TextField].


in the center => with the center

HansMuller · 2018-12-06T20:12:22Z

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

+    this.alignLabelWithHint = false,
  }) : assert(isDense != null),
       assert(isCollapsed != null),
      assert(filled != null);


Give this line one more indent space and add assert(alignLabelWithHint != null)

HansMuller · 2018-12-06T20:12:48Z

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

    properties.add(DiagnosticsProperty<InputBorder>('errorBorder', errorBorder, defaultValue: defaultTheme.errorBorder));
    properties.add(DiagnosticsProperty<InputBorder>('focusedBorder', focusedBorder, defaultValue: defaultTheme.focusedErrorBorder));
-    properties.add(DiagnosticsProperty<InputBorder>('focusedErrorborder', focusedErrorBorder, defaultValue: defaultTheme.focusedErrorBorder));
+    properties.add(DiagnosticsProperty<InputBorder>('focusedErrorBorder', focusedErrorBorder, defaultValue: defaultTheme.focusedErrorBorder));


My test already caught a mistake haha.

justinmc · 2018-12-07T17:03:17Z

Ready to merge after the end of code freeze.

InputDecorator param for alignment of label

b6b9710

justinmc self-assigned this Dec 5, 2018

justinmc requested a review from HansMuller December 5, 2018 18:52

googlebot added the cla: yes label Dec 5, 2018

justinmc commented Dec 5, 2018

View reviewed changes

packages/flutter/lib/src/material/input_decorator.dart Outdated Show resolved Hide resolved

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

justinmc added 2 commits December 5, 2018 11:33

Put baseline/center code in the right place where label is layed out

fe529a1

Fix existing test

69f78bc

justinmc changed the title ~~WIP InputDecorator label alignment param~~ InputDecorator label alignment param Dec 5, 2018

Test top label positioning

110c0c7

justinmc force-pushed the text-form-field-label-align branch from a899d91 to 110c0c7 Compare December 5, 2018 20:56

justinmc commented Dec 5, 2018

View reviewed changes

packages/flutter/test/material/input_decorator_test.dart Outdated Show resolved Hide resolved

HansMuller reviewed Dec 5, 2018

View reviewed changes

Rename to alignLabelWithHint, and make it a bool

a08e628

justinmc force-pushed the text-form-field-label-align branch from 064db5d to a08e628 Compare December 6, 2018 16:38

justinmc added 2 commits December 6, 2018 09:10

Test for TextField with and without alignLabelWithHint set

5ffe900

alignLabelWithHint in theme as well

99f6a3f

debugFillProperties addition and test

6fd5ad4

justinmc force-pushed the text-form-field-label-align branch from 06fbe5d to 6fd5ad4 Compare December 6, 2018 17:57

HansMuller approved these changes Dec 6, 2018

View reviewed changes

HansMuller changed the title ~~InputDecorator label alignment param~~ Add InputDecoration alignLabelWithHint parameter Dec 6, 2018

justinmc added 2 commits December 6, 2018 13:21

Small style fixes for review

e5f72f8

Fix analyze const error

ae882ea

justinmc added 2 commits December 13, 2018 11:12

Merge branch 'master' into text-form-field-label-align

830084d

Merge branch 'master' into text-form-field-label-align

d1b9f4d

justinmc merged commit 89fa4cc into flutter:master Dec 18, 2018

justinmc deleted the text-form-field-label-align branch December 18, 2018 18:04

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

Conversation

justinmc commented Dec 5, 2018 • edited by HansMuller Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

justinmc commented Dec 5, 2018

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!

Uh oh!

justinmc commented Dec 6, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

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!

justinmc commented Dec 7, 2018

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

justinmc commented Dec 5, 2018 •

edited by HansMuller

Loading

justinmc commented Dec 6, 2018 •

edited

Loading