Allow users to center align the floating label #90157

werainkhatri · 2021-09-15T22:58:20Z

Added InputDecorator.floatingLabelAlignment to allow users to align the floating label left or center of the input field.

Fixes #27357
Design Doc

Pre-launch Checklist

I read the Contributor Guide and followed the process outlined there for submitting PRs.
I read the Tree Hygiene wiki page, which explains my responsibilities.
I read and followed the Flutter Style Guide, including Features we expect every widget to implement.
I signed the CLA.
I listed at least one issue that this PR fixes in the description above.
I updated/added relevant documentation (doc comments with ///).
I added new tests to check the change I am making or feature I am adding, or Hixie said the PR is test-exempt.
All existing and new tests are passing.

skia-gold · 2021-09-15T23:05:59Z

Gold has detected about 12 new digest(s) on patchset 2.
View them at https://flutter-gold.skia.org/cl/github/90157

skia-gold · 2021-09-16T17:30:59Z

Gold has detected about 8 new digest(s) on patchset 3.
View them at https://flutter-gold.skia.org/cl/github/90157

justinmc

Thanks for the great PR and design doc! I've left some comments on your design doc about the potential for some more fully-featured solutions to this problem. Let me know what you think.

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

skia-gold · 2021-10-05T10:35:56Z

Gold has detected about 14 new digest(s) on patchset 5.
View them at https://flutter-gold.skia.org/cl/github/90157

justinmc · 2021-10-07T20:41:03Z

By the way, these are the issues that I think this PR might fix related to rounded borders: #82321 #28862

justinmc · 2021-10-11T18:19:16Z

@werainkhatri Looks like there is a test failure on Linux web:

00:53 +164 ~1: test/material/input_decorator_test.dart: FloatingLabelAlignment.toString() ══╡ EXCEPTION CAUGHT BY FLUTTER TEST FRAMEWORK ╞════════════════════════════════════════════════════ The following TestFailure object was thrown running a test: Expected: 'FloatingLabelAlignment(x: -1.0)' Actual: 'FloatingLabelAlignment(x: -1)' Which: is different. Expected: ... ment(x: -1.0) Actual: ... ment(x: -1) ^ Differ at offset 28

Full error

00:53 +164 ~1: test/material/input_decorator_test.dart: FloatingLabelAlignment.toString() ══╡ EXCEPTION CAUGHT BY FLUTTER TEST FRAMEWORK ╞════════════════════════════════════════════════════ The following TestFailure object was thrown running a test: Expected: 'FloatingLabelAlignment(x: -1.0)' Actual: 'FloatingLabelAlignment(x: -1)' Which: is different. Expected: ... ment(x: -1.0) Actual: ... ment(x: -1) ^ Differ at offset 28 When the exception was thrown, this was the stack: ../dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 251:49 throw_ ../packages/test_api/src/expect/async_matcher.dart.js 145:22 fail ../packages/test_api/src/expect/async_matcher.dart.js 142:12 _expect ../packages/test_api/src/expect/async_matcher.dart.js 75:12 expect$ ../packages/flutter_test/src/deprecated.dart.js 6684:12 expect$ input_decorator_test.dart.js 13672:21 <fn> ../dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54 runBody ../dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 123:5 _async input_decorator_test.dart.js 13671:92 <fn> ../packages/flutter_test/src/deprecated.dart.js 6647:19 <fn> ../dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 45:50 <fn> ../packages/stack_trace/src/stack_zone_specification.dart.js 160:98 <fn> ../packages/stack_trace/src/stack_zone_specification.dart.js 212:16 [_run] ../packages/stack_trace/src/stack_zone_specification.dart.js 160:80 <fn> ../dart-sdk/lib/async/zone.dart 1436:47 _rootRunUnary ../dart-sdk/lib/async/zone.dart 1335:19 runUnary ../dart-sdk/lib/async/future_impl.dart 160:18 handleValue ../dart-sdk/lib/async/future_impl.dart 767:44 handleValueCallback ../dart-sdk/lib/async/future_impl.dart 796:13 _propagateToListeners ../dart-sdk/lib/async/future_impl.dart 602:5 [_completeWithValue] ../dart-sdk/lib/async/future_impl.dart 640:7 <fn> ../packages/fake_async/fake_async.dart.js 123:40 flushMicrotasks ../packages/flutter_test/src/deprecated.dart.js 5469:19 <fn> ../dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54 runBody ../dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 123:5 _async ../packages/flutter_test/src/deprecated.dart.js 5466:62 <fn> ../dart-sdk/lib/async/future.dart 276:37 <fn> ../packages/stack_trace/src/stack_zone_specification.dart.js 212:16 [_run] ../packages/stack_trace/src/stack_zone_specification.dart.js 155:71 <fn> ../dart-sdk/lib/async/zone.dart 1420:47 _rootRun ../dart-sdk/lib/async/zone.dart 1328:19 run ../dart-sdk/lib/async/zone.dart 1236:7 runGuarded ../dart-sdk/lib/async/zone.dart 1276:23 <fn> ../packages/stack_trace/src/stack_zone_specification.dart.js 212:16 [_run] ../packages/stack_trace/src/stack_zone_specification.dart.js 155:71 <fn> ../dart-sdk/lib/async/zone.dart 1428:13 _rootRun ../dart-sdk/lib/async/zone.dart 1328:19 run ../dart-sdk/lib/async/zone.dart 1236:7 runGuarded ../dart-sdk/lib/async/zone.dart 1276:23 callback ../dart-sdk/lib/async/schedule_microtask.dart 40:11 _microtaskLoop ../dart-sdk/lib/async/schedule_microtask.dart 49:5 _startMicrotaskLoop ../dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 166:15 <fn> The test description was: FloatingLabelAlignment.toString() ════════════════════════════════════════════════════════════════════════════════════════════════════ 00:53 +164 ~1 -1: test/material/input_decorator_test.dart: FloatingLabelAlignment.toString() [E] Test failed. See exception logs above. The test description was: FloatingLabelAlignment.toString()

skia-gold · 2021-10-12T21:06:15Z

Gold has detected about 12 new digest(s) on patchset 6.
View them at https://flutter-gold.skia.org/cl/github/90157

flutter-dashboard · 2021-10-12T21:27:33Z

Golden file changes have been found for this pull request. Click here to view and triage (e.g. because this is an intentional change).

If you are still iterating on this change and are not ready to resolve the images on the Flutter Gold dashboard, consider marking this PR as a draft pull request above. You will still be able to view image results on the dashboard, commenting will be silenced, and the check will not try to resolve itself until marked ready for review.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

Changes reported for pull request #90157 at sha 0496a1f24bf0cc83be6ff6247e8a6692a89210bc

justinmc

Some questions and some smaller changes for you. I think overall this approach looks pretty nice to me. I need to check out your branch and play around with it myself still, will do that soon.

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

packages/flutter/test/material/input_decorator_test.dart

skia-gold · 2021-10-15T04:51:16Z

Gold has detected about 16 new digest(s) on patchset 7.
View them at https://flutter-gold.skia.org/cl/github/90157

skia-gold · 2021-10-15T05:11:16Z

Gold has detected about 8 new digest(s) on patchset 8.
View them at https://flutter-gold.skia.org/cl/github/90157

flutter-dashboard · 2021-10-15T05:30:32Z

Golden file changes are available for triage from new commit, Click here to view.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

Changes reported for pull request #90157 at sha f7f4b97e64c5a63f43c185535be97da0ea102630

mat100payette · 2021-10-22T01:59:02Z

By the way, these are the issues that I think this PR might fix related to rounded borders: #82321 #28862

Has this been verified, or we just hoping it does ?

justinmc

I tried running this on my own machine and it seems to work great.

The only major thing that I think we should change is that the x calculation should be done based on arbitrary FloatingLabelBehavior.x, not just by checking for center, even though it's not supported for now. See my comment about that and let me know what you think.

Otherwise most of my comments are small nits. Thanks for being patient with this PR and sorry it took me so long to try this out!

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

justinmc · 2021-11-01T17:08:44Z

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

Good catch.

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

packages/flutter/test/material/input_decorator_test.dart

justinmc · 2021-11-01T17:30:39Z

@mat100payette Here's what the border from #82321 looks like when the label is centered:

The fade in/out of the border under the label is a little weird, but otherwise it looks pretty good. I've left a comment in that issue to discuss allowing arbitrary x values or not.

skia-gold · 2021-11-02T06:41:25Z

Gold has detected about 2 new digest(s) on patchset 9.
View them at https://flutter-gold.skia.org/cl/github/90157

skia-gold · 2021-11-02T06:56:25Z

Gold has detected about 8 new digest(s) on patchset 10.
View them at https://flutter-gold.skia.org/cl/github/90157

flutter-dashboard · 2021-11-02T07:12:51Z

Golden file changes are available for triage from new commit, Click here to view.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

Changes reported for pull request #90157 at sha 1c338fc

justinmc · 2021-11-02T18:35:34Z

It seems like arbitrary values for FloatingLabelAlignment would not help with rounded rects according to #82321 (comment), so that's another reason to leave that out of this PR for now and just use left and center.

werainkhatri · 2021-11-02T20:24:31Z

It seems like arbitrary values for FloatingLabelAlignment would not help with rounded rects according to #82321 (comment), so that's another reason to leave that out of this PR for now and just use left and center.

Fair enough. I have made the default constructor for FloatingLabelAlignment private anyway. Do take a look at my replies to unresolved conversations above.

justinmc

Thanks for handling the RTL stuff. I noticed one case where the docs need to be clarify left/right, otherwise just a few nits.

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

justinmc · 2021-11-15T21:34:01Z

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

 if (label != null) {
 final Offset labelOffset = _boxParentData(label!).offset;
- final double labelHeight = label!.size.height;
+ final double labelHeight = _boxSize(label).height;


Good call switching to _boxSize.

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

packages/flutter/test/material/input_decorator_test.dart

werainkhatri · 2021-11-16T14:57:43Z

Should I make FloatingLabelAlignment.x private?

justinmc · 2021-11-16T23:31:46Z

Yes that's a good idea, you should make it private. Just in case in the future if we change how it works under the hood for some reason, it definitely won't be a breaking change if x is private.

justinmc

LGTM 👍

CC @LongCatIsLooong for secondary review.

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

packages/flutter/test/material/input_decorator_test.dart

justinmc · 2021-11-23T20:31:40Z

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

 if (label != null) {
 final double labelX = _boxParentData(label!).offset.dx;
+ // +1 shifts the range of x from (-1.0, 1.0) to (0.0, 2.0).
+ final double floatAlign = decoration.floatingLabelAlignment._x + 1;


Thanks for making the calculations work with any _x and not just center and left 👍

justinmc · 2021-11-23T22:36:48Z

No secondary review needed actually, I'll go ahead and merge this. Thanks for the PR!

flutter-dashboard bot added f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels. labels Sep 15, 2021

google-cla bot added the cla: yes label Sep 15, 2021

This was referenced Sep 15, 2021

Design doc for InputDecoration.centerFloatingLabel flutter/website#6284

Merged

Goldens for InputDecoration centerFloatingLabel flutter/goldens#224

Closed

werainkhatri force-pushed the center-floating-label branch from 48aedc3 to bbb743d Compare September 16, 2021 07:37

HansMuller requested a review from justinmc September 17, 2021 21:53

justinmc mentioned this pull request Sep 23, 2021

Center Floating Label for Highlighted TextField #27357

Closed

justinmc reviewed Sep 23, 2021

View reviewed changes

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

werainkhatri force-pushed the center-floating-label branch from 400d049 to d916ffc Compare September 24, 2021 10:52

werainkhatri requested a review from justinmc September 24, 2021 21:11

werainkhatri force-pushed the center-floating-label branch from d916ffc to 3885f93 Compare October 5, 2021 10:27

flutter-dashboard bot added the will affect goldens Changes to golden files label Oct 12, 2021

justinmc reviewed Oct 14, 2021

View reviewed changes

werainkhatri requested a review from justinmc October 16, 2021 17:29

justinmc reviewed Nov 1, 2021

View reviewed changes

justinmc mentioned this pull request Nov 1, 2021

TextField with rounded corners - floating label shows extra whitespace #82321

Closed

added centerFloatingLabel

a242d3f

werainkhatri added 8 commits November 2, 2021 11:59

added and tested centerFloatingLabel

c028a4c

fixed doc issue

20b97d2

fix code style

2323763

added FloatingLabelAlignment

46ee307

fix toString bug

96e787e

improved documentation

539fa32

fixed doc reference bug

290502b

nits fixed, added support for arbitrary FloatingLabelAlignment.x

9fe11db

werainkhatri force-pushed the center-floating-label branch from f7f4b97 to 9fe11db Compare November 2, 2021 06:36

fixes analyze issues

1c338fc

werainkhatri requested a review from justinmc November 2, 2021 07:28

werainkhatri added 2 commits November 15, 2021 20:00

removes golden tests

c7b0733

updates left to start, improves tests and docs.

1eabfe1

justinmc reviewed Nov 15, 2021

View reviewed changes

fixes doc, makes x private, adds tests with outline border

3b9bb22

werainkhatri requested a review from justinmc November 18, 2021 15:09

justinmc approved these changes Nov 23, 2021

View reviewed changes

justinmc requested a review from LongCatIsLooong November 23, 2021 20:32

improves doc and naming.

8c51fc9

justinmc merged commit f62a128 into flutter:master Nov 23, 2021

werainkhatri deleted the center-floating-label branch September 8, 2022 06:02

Allow users to center align the floating label #90157

Allow users to center align the floating label #90157

Uh oh!

Conversation

werainkhatri commented Sep 15, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pre-launch Checklist

skia-gold commented Sep 15, 2021

skia-gold commented Sep 16, 2021

justinmc left a comment

Choose a reason for hiding this comment

Uh oh!

skia-gold commented Oct 5, 2021

justinmc commented Oct 7, 2021

justinmc commented Oct 11, 2021

skia-gold commented Oct 12, 2021

flutter-dashboard bot commented Oct 12, 2021

justinmc left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

skia-gold commented Oct 15, 2021

skia-gold commented Oct 15, 2021

flutter-dashboard bot commented Oct 15, 2021

mat100payette commented Oct 22, 2021

justinmc left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

justinmc Nov 1, 2021

Choose a reason for hiding this comment

Uh oh!

Uh oh!

justinmc commented Nov 1, 2021

skia-gold commented Nov 2, 2021

skia-gold commented Nov 2, 2021

flutter-dashboard bot commented Nov 2, 2021

justinmc commented Nov 2, 2021

werainkhatri commented Nov 2, 2021

justinmc left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

justinmc Nov 15, 2021

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

werainkhatri commented Nov 16, 2021

justinmc commented Nov 16, 2021

justinmc left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

justinmc Nov 23, 2021

Choose a reason for hiding this comment

justinmc commented Nov 23, 2021

Labels

4 participants

werainkhatri commented Sep 15, 2021 •

edited

Loading