DEV/flutter_flutter
1
0
Fork 0
mirror of https://github.com/flutter/flutter.git synced 2026-02-20 02:29:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

Scale input decorator label width (#59010)

Browse Source
This commit is contained in:
Pierre-Louis 2020-06-09 20:03:02 +02:00 committed by GitHub
parent 01e60a1ca4
commit 22ea668f82
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 58 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/flutter/lib/src/material/input_decorator.dart
View File

@ -17,6 +17,7 @@ import 'theme_data.dart';
const Duration _kTransitionDuration = Duration(milliseconds: 200);
const Curve _kTransitionCurve = Curves.fastOutSlowIn;
const double _kFinalLabelScale = 0.75;
// Defines the gap in the InputDecorator's outline border where the
// floating label will appear.
@ -981,9 +982,11 @@ class _RenderDecoration extends RenderBox {
+ _boxSize(suffix).width
+ _boxSize(suffixIcon).width
+ contentPadding.right));
// Increase the available width for the label when it is scaled down.
final double invertedLabelScale = lerpDouble(1.00, 1 / _kFinalLabelScale, decoration.floatingLabelProgress);
boxToBaseline[label] = _layoutLineBox(
label,
boxConstraints.copyWith(maxWidth: inputWidth),
boxConstraints.copyWith(maxWidth: inputWidth * invertedLabelScale),
);
boxToBaseline[hint] = _layoutLineBox(
hint,
@ -1452,11 +1455,10 @@ class _RenderDecoration extends RenderBox {
final bool isOutlineBorder = decoration.border != null && decoration.border.isOutline;
// Temporary opt-in fix for https://github.com/flutter/flutter/issues/54028
// Center the scaled label relative to the border.
const double finalLabelScale = 0.75;
final double floatingY = decoration.fixTextFieldOutlineLabel
? isOutlineBorder ? (-labelHeight * finalLabelScale) / 2.0 + borderWeight / 2.0 : contentPadding.top
? isOutlineBorder ? (-labelHeight * _kFinalLabelScale) / 2.0 + borderWeight / 2.0 : contentPadding.top
: isOutlineBorder ? -labelHeight * 0.25 : contentPadding.top;
final double scale = lerpDouble(1.0, finalLabelScale, t);
final double scale = lerpDouble(1.0, _kFinalLabelScale, t);
double dx;
switch (textDirection) {
case TextDirection.rtl:

52
packages/flutter/test/material/input_decorator_test.dart
View File

@ -4069,6 +4069,58 @@ void main() {
expect(tester.getTopLeft(find.text('label')).dy, 20.0);
});
testWidgets('InputDecorator floating label width scales when focused', (WidgetTester tester) async {
final String longStringA = String.fromCharCodes(List<int>.generate(200, (_) => 65));
final String longStringB = String.fromCharCodes(List<int>.generate(200, (_) => 66));
await tester.pumpWidget(
Center(
child: Container(
width: 100,
height: 100,
child: buildInputDecorator(
// isFocused: false (default)
isEmpty: true,
decoration: InputDecoration(
labelText: longStringA,
),
),
),
),
);
await tester.pumpAndSettle();
expect(
find.text(longStringA),
paints..clipRect(rect: const Rect.fromLTWH(0, 0, 100.0, 16.0)),
);
await tester.pumpWidget(
Center(
child: Container(
width: 100,
height: 100,
child: buildInputDecorator(
isFocused: true,
isEmpty: true,
decoration: InputDecoration(
labelText: longStringB,
),
),
),
),
);
await tester.pumpAndSettle();
expect(
find.text(longStringB),
// 133.3 is approximately 100 / 0.75 (_kFinalLabelScale)
paints..clipRect(rect: const Rect.fromLTWH(0, 0, 133.0, 16.0)),
);
}, skip: isBrowser); // TODO(yjbanov): https://github.com/flutter/flutter/issues/44020
testWidgets('textAlignVertical can be updated', (WidgetTester tester) async {
// Regression test for https://github.com/flutter/flutter/issues/56933
const String hintText = 'hint';