Unverified Commit 829e44db authored by Qun Cheng's avatar Qun Cheng Committed by GitHub

Fixed label alignment (#115409)

Co-authored-by: 's avatarQun Cheng <quncheng@google.com>
parent 55927d8b
...@@ -703,6 +703,7 @@ class _RenderDecoration extends RenderBox with SlottedContainerRenderObjectMixin ...@@ -703,6 +703,7 @@ class _RenderDecoration extends RenderBox with SlottedContainerRenderObjectMixin
required TextBaseline textBaseline, required TextBaseline textBaseline,
required bool isFocused, required bool isFocused,
required bool expands, required bool expands,
required bool material3,
TextAlignVertical? textAlignVertical, TextAlignVertical? textAlignVertical,
}) : assert(decoration != null), }) : assert(decoration != null),
assert(textDirection != null), assert(textDirection != null),
...@@ -713,7 +714,8 @@ class _RenderDecoration extends RenderBox with SlottedContainerRenderObjectMixin ...@@ -713,7 +714,8 @@ class _RenderDecoration extends RenderBox with SlottedContainerRenderObjectMixin
_textBaseline = textBaseline, _textBaseline = textBaseline,
_textAlignVertical = textAlignVertical, _textAlignVertical = textAlignVertical,
_isFocused = isFocused, _isFocused = isFocused,
_expands = expands; _expands = expands,
_material3 = material3;
static const double subtextGap = 8.0; static const double subtextGap = 8.0;
...@@ -831,6 +833,16 @@ class _RenderDecoration extends RenderBox with SlottedContainerRenderObjectMixin ...@@ -831,6 +833,16 @@ class _RenderDecoration extends RenderBox with SlottedContainerRenderObjectMixin
markNeedsLayout(); markNeedsLayout();
} }
bool get material3 => _material3;
bool _material3 = false;
set material3(bool value) {
if (_material3 == value) {
return;
}
_material3 = value;
markNeedsLayout();
}
// Indicates that the decoration should be aligned to accommodate an outline // Indicates that the decoration should be aligned to accommodate an outline
// border. // border.
bool get _isOutlineAligned { bool get _isOutlineAligned {
...@@ -1473,18 +1485,26 @@ class _RenderDecoration extends RenderBox with SlottedContainerRenderObjectMixin ...@@ -1473,18 +1485,26 @@ class _RenderDecoration extends RenderBox with SlottedContainerRenderObjectMixin
// _BorderContainer's x and is independent of label's x. // _BorderContainer's x and is independent of label's x.
switch (textDirection) { switch (textDirection) {
case TextDirection.rtl: case TextDirection.rtl:
decoration.borderGap.start = lerpDouble(labelX + _boxSize(label).width, double offsetToPrefixIcon = 0.0;
_boxSize(container).width / 2.0 + floatWidth / 2.0, if (prefixIcon != null && !decoration.alignLabelWithHint) {
floatAlign); offsetToPrefixIcon = material3 ? _boxSize(prefixIcon).width - left : 0;
}
decoration.borderGap.start = lerpDouble(labelX + _boxSize(label).width + offsetToPrefixIcon,
_boxSize(container).width / 2.0 + floatWidth / 2.0,
floatAlign);
break; break;
case TextDirection.ltr: case TextDirection.ltr:
// The value of _InputBorderGap.start is relative to the origin of the // The value of _InputBorderGap.start is relative to the origin of the
// _BorderContainer which is inset by the icon's width. Although, when // _BorderContainer which is inset by the icon's width. Although, when
// floating label is centered, it's already relative to _BorderContainer. // floating label is centered, it's already relative to _BorderContainer.
decoration.borderGap.start = lerpDouble(labelX - _boxSize(icon).width, double offsetToPrefixIcon = 0.0;
_boxSize(container).width / 2.0 - floatWidth / 2.0, if (prefixIcon != null && !decoration.alignLabelWithHint) {
floatAlign); offsetToPrefixIcon = material3 ? (-_boxSize(prefixIcon).width + left) : 0;
}
decoration.borderGap.start = lerpDouble(labelX - _boxSize(icon).width + offsetToPrefixIcon,
_boxSize(container).width / 2.0 - floatWidth / 2.0,
floatAlign);
break; break;
} }
decoration.borderGap.extent = label!.size.width * _kFinalLabelScale; decoration.borderGap.extent = label!.size.width * _kFinalLabelScale;
...@@ -1529,17 +1549,26 @@ class _RenderDecoration extends RenderBox with SlottedContainerRenderObjectMixin ...@@ -1529,17 +1549,26 @@ class _RenderDecoration extends RenderBox with SlottedContainerRenderObjectMixin
final double scale = lerpDouble(1.0, _kFinalLabelScale, t)!; final double scale = lerpDouble(1.0, _kFinalLabelScale, t)!;
final double centeredFloatX = _boxParentData(container!).offset.dx + final double centeredFloatX = _boxParentData(container!).offset.dx +
_boxSize(container).width / 2.0 - floatWidth / 2.0; _boxSize(container).width / 2.0 - floatWidth / 2.0;
final double floatStartX; final double startX;
double floatStartX;
switch (textDirection) { switch (textDirection) {
case TextDirection.rtl: // origin is on the right case TextDirection.rtl: // origin is on the right
floatStartX = labelOffset.dx + labelWidth * (1.0 - scale); startX = labelOffset.dx + labelWidth * (1.0 - scale);
floatStartX = startX;
if (prefixIcon != null && !decoration.alignLabelWithHint) {
floatStartX += material3 ? _boxSize(prefixIcon).width - contentPadding.left : 0.0;
}
break; break;
case TextDirection.ltr: // origin on the left case TextDirection.ltr: // origin on the left
floatStartX = labelOffset.dx; startX = labelOffset.dx;
floatStartX = startX;
if (prefixIcon != null && !decoration.alignLabelWithHint) {
floatStartX += material3 ? -_boxSize(prefixIcon).width + contentPadding.left : 0.0;
}
break; break;
} }
final double floatEndX = lerpDouble(floatStartX, centeredFloatX, floatAlign)!; final double floatEndX = lerpDouble(floatStartX, centeredFloatX, floatAlign)!;
final double dx = lerpDouble(floatStartX, floatEndX, t)!; final double dx = lerpDouble(startX, floatEndX, t)!;
final double dy = lerpDouble(0.0, floatingY - labelOffset.dy, t)!; final double dy = lerpDouble(0.0, floatingY - labelOffset.dy, t)!;
_labelTransform = Matrix4.identity() _labelTransform = Matrix4.identity()
..translate(dx, labelOffset.dy + dy) ..translate(dx, labelOffset.dy + dy)
...@@ -1662,6 +1691,7 @@ class _Decorator extends RenderObjectWidget with SlottedMultiChildRenderObjectWi ...@@ -1662,6 +1691,7 @@ class _Decorator extends RenderObjectWidget with SlottedMultiChildRenderObjectWi
textAlignVertical: textAlignVertical, textAlignVertical: textAlignVertical,
isFocused: isFocused, isFocused: isFocused,
expands: expands, expands: expands,
material3: Theme.of(context).useMaterial3,
); );
} }
......
...@@ -2823,6 +2823,25 @@ void main() { ...@@ -2823,6 +2823,25 @@ void main() {
expect(getBorderBottom(tester), 120.0); expect(getBorderBottom(tester), 120.0);
expect(getBorderWeight(tester), 1.0); expect(getBorderWeight(tester), 1.0);
}); });
testWidgets('Floating label is aligned with prefixIcon by default in M3', (WidgetTester tester) async {
await tester.pumpWidget(
buildInputDecorator(
useMaterial3: useMaterial3,
decoration: const InputDecoration(
prefixIcon: Icon(Icons.ac_unit),
labelText: 'label',
border: OutlineInputBorder(),
),
isFocused: true,
),
);
expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, 56.0));
expect(tester.getTopLeft(find.text('label')).dx, useMaterial3 ? 12.0 : 48.0);
expect(tester.getBottomLeft(find.text('text')).dx, 48.0);
expect(getBorderWeight(tester), 2.0);
});
}); });
group('3 point interpolation alignment', () { group('3 point interpolation alignment', () {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment