Fixes InputDecorator to work with textScaleFactor, fixes Material Design differences. #12595

gspencergoog · 2017-10-18T02:04:58Z

There were a number of differences with the Material Design spec, including
several different padding values and underline thickness. This corrects
that so that the decorator is in line with the Material Design spec now.

Also, the decorator properly handles changes to the textScaleFactor, where
before it would not re-layout when needed, painting the cursor and
underline incorrectly.

The decorator also now properly animates helper, error, and hint text when
the textScaleFactor or input decoration properties change.

Helper text is now properly displayed in dense mode, as the spec shows.
Before this change, it was never displayed in dense mode.

Fixes #12485

Hixie · 2017-10-18T20:53:19Z

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

@@ -368,9 +368,13 @@ class InputDecorator extends StatelessWidget {
  /// Defaults to false.
  final bool isEmpty;

-  /// The widget below this widget in the tree.
+  /// The widget below this widget in the tree.  Typically, this is an [EditableText] widget.


I don't think that's true. In fact, of the two (non-test) cases where we create an InputDecorator in our code base, neither uses EditableText here. One uses a RepaintBoundary that contains an EditableText, and the other uses a Row to do fancy stuff.

I think most people using this directly will be doing so because they want to create a widget that matches a text field but isn't one.

OK, reverted.

HansMuller

This looks good, just a few minor comments.

HansMuller · 2017-10-18T21:40:46Z

dev/manual_tests/lib/card_collection.dart

+    _cardModels = new List<CardModel>.generate(
+      _cardModels.length,
+      (int i) {
+        _cardModels[i].height = _editable ? max(_cardHeights[i], 60.0) : _cardHeights[i];


Is this papering over the fact that we'll draw the textfield underline through the middle of the textfield if there isn't enough room?

Maybe we should draw the underline at all, if there isn't enough vertical. Maybe we should provide a constant (lib/src/material/constants.dart) like kMinTextFieldSize?

Well, we won't do that anymore, it'll just overflow, so it's not really papering over anything. I'm mainly fixing the demo here to not overflow. It does mean that the behavior has changed, but the old behavior was wrong.

If they are overflowing their container now, then they can either turn on "isDense" in the InputDecoration, or give the text field a InputDecoration.collapsed decoration.

The height of the text field can't be a constant, unfortunately. If it's multi-line or the textScaleFactor is >1.0, or the child of the decorator isn't a text field at all, then it'll be wrong.

HansMuller · 2017-10-18T21:44:02Z

dev/manual_tests/lib/card_collection.dart

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.

+import 'dart:math';


Glad to see that you've checked this old manual test!

Well, it's part of the Travis smoke tests, so it kind of had to be fixed...

HansMuller · 2017-10-18T21:52:39Z

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


-    double topPadding = isCollapsed ? 0.0 : (isDense ? 12.0 : 16.0);
+    double topPadding = isCollapsed ? 0.0 : 2.0 * (isDense ?  _kDensePadding : _kNormalPadding);


It's hard to understand why there's a factor of 2 here. Maybe add a comment where these constants are defined.

OK, I've added some new constants to document it better.

HansMuller · 2017-10-18T21:55:17Z

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


+      final double topPaddingIncrement = labelTextHeight + (isDense ? _kDensePadding : _kNormalPadding) - 4.0;


This another example of holding the changes to a higher standard than the original code: what's the -4 for here? I think it's comment-worthy.

This turns out to be just a measurement error on my part: it's the height of the label descender (at the default font size), so I can just remove it here and below.

HansMuller · 2017-10-18T22:07:31Z

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

-          style: subtextStyle,
-          textAlign: textAlign,
-          overflow: TextOverflow.ellipsis,
+      final double linePadding = _kBottomBorderHeight + (isDense ? _kDensePadding : _kNormalPadding) - 4.0;


Same nit about -4.0 as above here.

HansMuller · 2017-10-18T22:08:10Z

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

+            errorText ?? helperText,
+            style: subtextStyle,
+            textAlign: textAlign,
+            overflow: TextOverflow.ellipsis,


HansMuller · 2017-10-18T22:16:18Z

packages/flutter/test/material/input_decorator_test.dart

@@ -52,4 +53,190 @@ void main() {

    expect(tester.element(find.byKey(key)).size, equals(const Size(800.0, 60.0)));
  });
+


Shouldn't we have a test that verifies that the divider (the text underline) appears when it's supposed and that it appears in the correct place?

Good point. Added.

…ign differences. There were a number of differences with the Material Design spec, including several different padding values and underline thickness. This corrects that so that the decorator is in line with the Material Design spec now. Also, the decorator properly handles changes to the textScaleFactor, where before it would not re-layout when needed, painting the cursor and underline incorrectly. The decorator also now properly animates helper, error, and hint text when the textScaleFactor or input decoration properties change.

HansMuller · 2017-10-19T16:35:52Z

LGTM

…rial Design differences. (flutter#12595)" This reverts commit 67cf791. Reverting because this causes scuba regressions that I'd like to address in another PR that is pending, but we'd like to roll Flutter.

…rial Design differences. (#12595)" (#12678) This reverts commit 67cf791. Reverting because this causes scuba regressions that I'd like to address in another PR that is pending, but we'd like to roll Flutter.

…xes Material Design differences. (flutter#12595)" (flutter#12678)" This reverts commit 72dc7d9. Re-landing my InputDecorator changes so that I can land the character counter PR.

…xes Material Design differences. (#12595)" (#12678)" (#12689) This reverts commit 72dc7d9. Re-landing my InputDecorator changes so that I can land the character counter PR.

googlebot added the cla: yes label Oct 18, 2017

gspencergoog requested a review from HansMuller October 18, 2017 02:05

gspencergoog force-pushed the input_hint_pos branch 5 times, most recently from 358b03c to ccab76b Compare October 18, 2017 20:21

Hixie reviewed Oct 18, 2017

View reviewed changes

gspencergoog force-pushed the input_hint_pos branch from 218bebb to 96b1bd5 Compare October 18, 2017 21:17

HansMuller reviewed Oct 18, 2017

View reviewed changes

gspencergoog added 3 commits October 18, 2017 15:51

Fixing helper text on multiline fields.

ec72ff4

Fixing card_collection demo

fc65fa0

gspencergoog force-pushed the input_hint_pos branch from 96b1bd5 to fc65fa0 Compare October 18, 2017 22:51

gspencergoog added 2 commits October 18, 2017 16:40

Review changes

2528b6d

Adding tests for divider and isDense

7b136c9

gspencergoog force-pushed the input_hint_pos branch from ddf5133 to 7b136c9 Compare October 19, 2017 01:44

gspencergoog merged commit 67cf791 into flutter:master Oct 19, 2017

gspencergoog deleted the input_hint_pos branch February 12, 2018 18:11

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fixes InputDecorator to work with textScaleFactor, fixes Material Design differences. #12595

Fixes InputDecorator to work with textScaleFactor, fixes Material Design differences. #12595

gspencergoog commented Oct 18, 2017 •

edited

Loading

Hixie Oct 18, 2017

gspencergoog Oct 18, 2017

HansMuller left a comment

HansMuller Oct 18, 2017

gspencergoog Oct 18, 2017

HansMuller Oct 18, 2017

gspencergoog Oct 18, 2017

HansMuller Oct 18, 2017

gspencergoog Oct 18, 2017

HansMuller Oct 18, 2017

gspencergoog Oct 18, 2017

HansMuller Oct 18, 2017

gspencergoog Oct 18, 2017

HansMuller Oct 18, 2017

HansMuller Oct 18, 2017

gspencergoog Oct 18, 2017

HansMuller commented Oct 19, 2017


		double topPadding = isCollapsed ? 0.0 : (isDense ? 12.0 : 16.0);
		double topPadding = isCollapsed ? 0.0 : 2.0 * (isDense ? _kDensePadding : _kNormalPadding);


		final double topPaddingIncrement = labelTextHeight + (isDense ? _kDensePadding : _kNormalPadding) - 4.0;

		@@ -52,4 +53,190 @@ void main() {

		expect(tester.element(find.byKey(key)).size, equals(const Size(800.0, 60.0)));
		});

Fixes InputDecorator to work with textScaleFactor, fixes Material Design differences. #12595

Fixes InputDecorator to work with textScaleFactor, fixes Material Design differences. #12595

Conversation

gspencergoog commented Oct 18, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

HansMuller left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

HansMuller commented Oct 19, 2017

gspencergoog commented Oct 18, 2017 •

edited

Loading