Reverts "Fix TextField helper top padding on M3 (#145087)" (#145168) (#145172)
Reverts: flutter/flutter#145087
Initiated by: Jasguerrero
Reason for reverting: failing on accessibility checks b/329548765
Original PR Author: bleroux
Reviewed By: {justinmc}
This change reverts the following previous change: ## Description
`InputDecorator` adds a 8.0 gap beetween the container and the helper text. From the Material 3 specification, this gap should be 4.0. See https://m3.material.io/components/text-fields/specs#0c5c8d6d-2169-4d42-960c-51f6ee42eb57.
This PR sets the correct values for M3 without changing the value for M2.
| Before | After | M3 Spec |
|--------|--------|--------|
|  | |  |
If this change is accepted, a future step will be to make this value configurable, probably by `InputDecorationTheme`.
## Related Issue
Fixes https://github.com/flutter/flutter/issues/144984
## Tests
diff --git a/packages/flutter/lib/src/material/input_decorator.dart b/packages/flutter/lib/src/material/input_decorator.dart
index c75794e..136826b 100644
--- a/packages/flutter/lib/src/material/input_decorator.dart
+++ b/packages/flutter/lib/src/material/input_decorator.dart
@@ -726,9 +726,7 @@
_expands = expands,
_material3 = material3;
- // TODO(bleroux): consider defining this value as a Material token and making it
- // configurable by InputDecorationTheme.
- double get subtextGap => material3 ? 4.0 : 8.0;
+ static const double subtextGap = 8.0;
RenderBox? get icon => childForSlot(_DecorationSlot.icon);
RenderBox? get input => childForSlot(_DecorationSlot.input);
diff --git a/packages/flutter/test/material/input_decorator_test.dart b/packages/flutter/test/material/input_decorator_test.dart
index c35562d..2f54055 100644
--- a/packages/flutter/test/material/input_decorator_test.dart
+++ b/packages/flutter/test/material/input_decorator_test.dart
@@ -1504,20 +1504,23 @@
});
group('Material3 - InputDecoration helper/counter/error', () {
- // Overall height for InputDecorator (filled or outlined) is 76dp on mobile:
+ // Overall height for InputDecorator (filled or outlined) is 80dp on mobile:
// 8 - top padding
// 12 - floating label (font size = 16 * 0.75, line height is forced to 1.0)
// 4 - gap between label and input
// 24 - input text (font size = 16, line height = 1.5)
// 8 - bottom padding
- // 4 - gap above helper/error/counter
+ // 8 - gap above supporting text
// 16 - helper/counter (font size = 12, line height is 1.5)
const double topPadding = 8.0;
const double floatingLabelHeight = 12.0;
const double labelInputGap = 4.0;
const double inputHeight = 24.0;
const double bottomPadding = 8.0;
- const double helperGap = 4.0;
+ // TODO(bleroux): make the InputDecorator implementation compliant with M3 spec by changing
+ // the helperGap to 4.0 instead of 8.0.
+ // See https://github.com/flutter/flutter/issues/144984.
+ const double helperGap = 8.0;
const double helperHeight = 16.0;
const double containerHeight = topPadding + floatingLabelHeight + labelInputGap + inputHeight + bottomPadding; // 56.0
const double fullHeight = containerHeight + helperGap + helperHeight; // 80.0 (should be 76.0 based on M3 spec)