Skip to content

Commit b1677f6

Browse files
authored
Reland fix TextField helper top padding on M3 (flutter#146754)
This is a reland of flutter#145087 which was reverted in flutter#145168. flutter#146637 was merged and might help here. ## 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 | |--------|--------|--------| | ![image](https://github.com/flutter/flutter/assets/840911/9947f334-d98f-4f7e-9da7-ca6d5c0770ac) | ![image](https://github.com/flutter/flutter/assets/840911/081dec4b-eb9f-4eee-a7dc-2538e7110ff0)| ![image](https://github.com/flutter/flutter/assets/840911/c8c8f045-3b79-43a5-a1a3-cc6d5460644f) | If this change is accepted, a future step will be to make this value configurable, probably by `InputDecorationTheme`. ## Related Issue Fixes flutter#144984 ## Tests Updates a value used by several existing tests.
1 parent cae2079 commit b1677f6

File tree

2 files changed

+6
-7
lines changed

2 files changed

+6
-7
lines changed

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -729,7 +729,9 @@ class _RenderDecoration extends RenderBox with SlottedContainerRenderObjectMixin
729729
_expands = expands,
730730
_material3 = material3;
731731

732-
static const double subtextGap = 8.0;
732+
// TODO(bleroux): consider defining this value as a Material token and making it
733+
// configurable by InputDecorationTheme.
734+
double get subtextGap => material3 ? 4.0 : 8.0;
733735

734736
RenderBox? get icon => childForSlot(_DecorationSlot.icon);
735737
RenderBox? get input => childForSlot(_DecorationSlot.input);

packages/flutter/test/material/input_decorator_test.dart

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4490,23 +4490,20 @@ void main() {
44904490
});
44914491

44924492
group('Material3 - InputDecoration helper/counter/error', () {
4493-
// Overall height for InputDecorator (filled or outlined) is 80dp on mobile:
4493+
// Overall height for InputDecorator (filled or outlined) is 76dp on mobile:
44944494
// 8 - top padding
44954495
// 12 - floating label (font size = 16 * 0.75, line height is forced to 1.0)
44964496
// 4 - gap between label and input
44974497
// 24 - input text (font size = 16, line height = 1.5)
44984498
// 8 - bottom padding
4499-
// 8 - gap above supporting text
4499+
// 4 - gap above helper/error/counter
45004500
// 16 - helper/counter (font size = 12, line height is 1.5)
45014501
const double topPadding = 8.0;
45024502
const double floatingLabelHeight = 12.0;
45034503
const double labelInputGap = 4.0;
45044504
const double inputHeight = 24.0;
45054505
const double bottomPadding = 8.0;
4506-
// TODO(bleroux): make the InputDecorator implementation compliant with M3 spec by changing
4507-
// the helperGap to 4.0 instead of 8.0.
4508-
// See https://github.com/flutter/flutter/issues/144984.
4509-
const double helperGap = 8.0;
4506+
const double helperGap = 4.0;
45104507
const double helperHeight = 16.0;
45114508
const double containerHeight = topPadding + floatingLabelHeight + labelInputGap + inputHeight + bottomPadding; // 56.0
45124509
const double fullHeight = containerHeight + helperGap + helperHeight; // 80.0 (should be 76.0 based on M3 spec)

0 commit comments

Comments
 (0)