Skip to content

Commit

Permalink
Switch hint text to Opacity instead of AnimatedOpacity (#107156)
Browse files Browse the repository at this point in the history
  • Loading branch information
@markusaksli-nc
markusaksli-nc committed Jul 8, 2022
1 parent fd54ddf commit 255b71f
Show file tree
Hide file tree
Showing 4 changed files with 41 additions and 92 deletions.
4 changes: 1 addition & 3 deletions packages/flutter/lib/src/material/input_decorator.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2157,10 +2157,8 @@ class _InputDecoratorState extends State<InputDecorator> with TickerProviderStat
final TextBaseline textBaseline = labelStyle.textBaseline!;

final TextStyle hintStyle = _getInlineHintStyle(themeData);
final Widget? hint = decoration!.hintText == null ? null : AnimatedOpacity(
final Widget? hint = decoration!.hintText == null ? null : Opacity(
opacity: (isEmpty && !_hasInlineLabel) ? 1.0 : 0.0,
duration: _kTransitionDuration,
curve: _kTransitionCurve,
alwaysIncludeSemantics: true,
child: Text(
decoration!.hintText!,
Expand Down
7 changes: 3 additions & 4 deletions packages/flutter/test/material/input_date_picker_form_field_test.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,13 +61,12 @@ void main() {
}

double textOpacity(WidgetTester tester, String textValue) {
final FadeTransition opacityWidget = tester.widget<FadeTransition>(
return tester.widget<Opacity>(
find.ancestor(
of: find.text(textValue),
matching: find.byType(FadeTransition),
matching: find.byType(Opacity),
).first,
);
return opacityWidget.opacity.value;
).opacity;
}

group('InputDatePickerFormField', () {
Expand Down
107 changes: 25 additions & 82 deletions packages/flutter/test/material/input_decorator_test.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,6 +144,15 @@ double getOpacity(WidgetTester tester, String textValue) {
return opacityWidget.opacity.value;
}

double getStaticOpacity(WidgetTester tester, String textValue) {
return tester.widget<Opacity>(
find.ancestor(
of: find.text(textValue),
matching: find.byType(Opacity),
).first,
).opacity;
}

void main() {
testWidgets('InputDecorator input/label text layout', (WidgetTester tester) async {
// The label appears above the input text
Expand Down Expand Up @@ -963,7 +972,7 @@ void main() {
expect(tester.getBottomLeft(find.text('text')).dy, 44.0);
expect(tester.getTopLeft(find.text('label')).dy, 20.0);
expect(tester.getBottomLeft(find.text('label')).dy, 36.0);
expect(getOpacity(tester, 'hint'), 0.0);
expect(getStaticOpacity(tester, 'hint'), 0.0);
expect(getBorderBottom(tester), 56.0);
expect(getBorderWeight(tester), 1.0);

Expand All @@ -979,17 +988,6 @@ void main() {
),
);

// The hint's opacity animates from 0.0 to 1.0.
// The animation's duration is 200ms.
{
await tester.pump(const Duration(milliseconds: 50));
final double hintOpacity50ms = getOpacity(tester, 'hint');
expect(hintOpacity50ms, inExclusiveRange(0.0, 1.0));
await tester.pump(const Duration(milliseconds: 50));
final double hintOpacity100ms = getOpacity(tester, 'hint');
expect(hintOpacity100ms, inExclusiveRange(hintOpacity50ms, 1.0));
}

await tester.pumpAndSettle();
expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, 56.0));
expect(tester.getTopLeft(find.text('text')).dy, 28.0);
Expand All @@ -998,7 +996,7 @@ void main() {
expect(tester.getBottomLeft(find.text('label')).dy, 24.0);
expect(tester.getTopLeft(find.text('hint')).dy, 28.0);
expect(tester.getBottomLeft(find.text('hint')).dy, 44.0);
expect(getOpacity(tester, 'hint'), 1.0);
expect(getStaticOpacity(tester, 'hint'), 1.0);
expect(getBorderBottom(tester), 56.0);
expect(getBorderWeight(tester), 2.0);

Expand All @@ -1012,17 +1010,6 @@ void main() {
),
);

// The hint's opacity animates from 1.0 to 0.0.
// The animation's duration is 200ms.
{
await tester.pump(const Duration(milliseconds: 50));
final double hintOpacity50ms = getOpacity(tester, 'hint');
expect(hintOpacity50ms, inExclusiveRange(0.0, 1.0));
await tester.pump(const Duration(milliseconds: 50));
final double hintOpacity100ms = getOpacity(tester, 'hint');
expect(hintOpacity100ms, inExclusiveRange(0.0, hintOpacity50ms));
}

await tester.pumpAndSettle();
expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, 56.0));
expect(tester.getTopLeft(find.text('text')).dy, 28.0);
Expand All @@ -1031,7 +1018,7 @@ void main() {
expect(tester.getBottomLeft(find.text('label')).dy, 24.0);
expect(tester.getTopLeft(find.text('hint')).dy, 28.0);
expect(tester.getBottomLeft(find.text('hint')).dy, 44.0);
expect(getOpacity(tester, 'hint'), 0.0);
expect(getStaticOpacity(tester, 'hint'), 0.0);
expect(getBorderBottom(tester), 56.0);
expect(getBorderWeight(tester), 2.0);
});
Expand Down Expand Up @@ -1071,7 +1058,7 @@ void main() {
expect(tester.getBottomLeft(find.text('text')).dy, 40.0);
expect(tester.getTopLeft(find.text('label')).dy, 16.0);
expect(tester.getBottomLeft(find.text('label')).dy, 32.0);
expect(getOpacity(tester, 'hint'), 0.0);
expect(getStaticOpacity(tester, 'hint'), 0.0);
expect(getBorderBottom(tester), 48.0);
expect(getBorderWeight(tester), 1.0);

Expand All @@ -1093,7 +1080,7 @@ void main() {
expect(tester.getBottomLeft(find.text('text')).dy, 40.0);
expect(tester.getTopLeft(find.text('label')).dy, 8.0);
expect(tester.getBottomLeft(find.text('label')).dy, 20.0);
expect(getOpacity(tester, 'hint'), 1.0);
expect(getStaticOpacity(tester, 'hint'), 1.0);
expect(getBorderBottom(tester), 48.0);
expect(getBorderWeight(tester), 2.0);
});
Expand Down Expand Up @@ -1868,7 +1855,7 @@ void main() {
expect(tester.getBottomLeft(find.text('text')).dy, 40.0);
expect(tester.getTopLeft(find.text('label')).dy, 16.0);
expect(tester.getBottomLeft(find.text('label')).dy, 32.0);
expect(getOpacity(tester, 'hint'), 0.0);
expect(getStaticOpacity(tester, 'hint'), 0.0);
expect(getBorderBottom(tester), 48.0);
expect(getBorderWeight(tester), 1.0);

Expand All @@ -1885,17 +1872,6 @@ void main() {
),
);

// The hint's opacity animates from 0.0 to 1.0.
// The animation's duration is 200ms.
{
await tester.pump(const Duration(milliseconds: 50));
final double hintOpacity50ms = getOpacity(tester, 'hint');
expect(hintOpacity50ms, inExclusiveRange(0.0, 1.0));
await tester.pump(const Duration(milliseconds: 50));
final double hintOpacity100ms = getOpacity(tester, 'hint');
expect(hintOpacity100ms, inExclusiveRange(hintOpacity50ms, 1.0));
}

await tester.pumpAndSettle();
expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, 48.0));
expect(tester.getTopLeft(find.text('text')).dy, 24.0);
Expand All @@ -1904,7 +1880,7 @@ void main() {
expect(tester.getBottomLeft(find.text('label')).dy, 24.0);
expect(tester.getTopLeft(find.text('hint')).dy, 24.0);
expect(tester.getBottomLeft(find.text('hint')).dy, 40.0);
expect(getOpacity(tester, 'hint'), 1.0);
expect(getStaticOpacity(tester, 'hint'), 1.0);
expect(getBorderBottom(tester), 48.0);
expect(getBorderWeight(tester), 2.0);

Expand All @@ -1919,17 +1895,6 @@ void main() {
),
);

// The hint's opacity animates from 1.0 to 0.0.
// The animation's duration is 200ms.
{
await tester.pump(const Duration(milliseconds: 50));
final double hintOpacity50ms = getOpacity(tester, 'hint');
expect(hintOpacity50ms, inExclusiveRange(0.0, 1.0));
await tester.pump(const Duration(milliseconds: 50));
final double hintOpacity100ms = getOpacity(tester, 'hint');
expect(hintOpacity100ms, inExclusiveRange(0.0, hintOpacity50ms));
}

await tester.pumpAndSettle();
expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, 48.0));
expect(tester.getTopLeft(find.text('text')).dy, 24.0);
Expand All @@ -1938,7 +1903,7 @@ void main() {
expect(tester.getBottomLeft(find.text('label')).dy, 24.0);
expect(tester.getTopLeft(find.text('hint')).dy, 24.0);
expect(tester.getBottomLeft(find.text('hint')).dy, 40.0);
expect(getOpacity(tester, 'hint'), 0.0);
expect(getStaticOpacity(tester, 'hint'), 0.0);
expect(getBorderBottom(tester), 48.0);
expect(getBorderWeight(tester), 2.0);
});
Expand All @@ -1962,7 +1927,7 @@ void main() {
expect(tester.getBottomLeft(find.text('text')).dy, 48.0);
expect(tester.getTopLeft(find.text('label')).dy, 24.0);
expect(tester.getBottomLeft(find.text('label')).dy, 40.0);
expect(getOpacity(tester, 'hint'), 0.0);
expect(getStaticOpacity(tester, 'hint'), 0.0);
expect(getBorderBottom(tester), 64.0);
expect(getBorderWeight(tester), 1.0);

Expand All @@ -1979,17 +1944,6 @@ void main() {
),
);

// The hint's opacity animates from 0.0 to 1.0.
// The animation's duration is 200ms.
{
await tester.pump(const Duration(milliseconds: 50));
final double hintOpacity50ms = getOpacity(tester, 'hint');
expect(hintOpacity50ms, inExclusiveRange(0.0, 1.0));
await tester.pump(const Duration(milliseconds: 50));
final double hintOpacity100ms = getOpacity(tester, 'hint');
expect(hintOpacity100ms, inExclusiveRange(hintOpacity50ms, 1.0));
}

await tester.pumpAndSettle();
expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, 64.0));
expect(tester.getTopLeft(find.text('text')).dy, 32.0);
Expand All @@ -1998,7 +1952,7 @@ void main() {
expect(tester.getBottomLeft(find.text('label')).dy, 24.0);
expect(tester.getTopLeft(find.text('hint')).dy, 32.0);
expect(tester.getBottomLeft(find.text('hint')).dy, 48.0);
expect(getOpacity(tester, 'hint'), 1.0);
expect(getStaticOpacity(tester, 'hint'), 1.0);
expect(getBorderBottom(tester), 64.0);
expect(getBorderWeight(tester), 2.0);

Expand All @@ -2013,17 +1967,6 @@ void main() {
),
);

// The hint's opacity animates from 1.0 to 0.0.
// The animation's duration is 200ms.
{
await tester.pump(const Duration(milliseconds: 50));
final double hintOpacity50ms = getOpacity(tester, 'hint');
expect(hintOpacity50ms, inExclusiveRange(0.0, 1.0));
await tester.pump(const Duration(milliseconds: 50));
final double hintOpacity100ms = getOpacity(tester, 'hint');
expect(hintOpacity100ms, inExclusiveRange(0.0, hintOpacity50ms));
}

await tester.pumpAndSettle();
expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, 64.0));
expect(tester.getTopLeft(find.text('text')).dy, 32.0);
Expand All @@ -2032,7 +1975,7 @@ void main() {
expect(tester.getBottomLeft(find.text('label')).dy, 24.0);
expect(tester.getTopLeft(find.text('hint')).dy, 32.0);
expect(tester.getBottomLeft(find.text('hint')).dy, 48.0);
expect(getOpacity(tester, 'hint'), 0.0);
expect(getStaticOpacity(tester, 'hint'), 0.0);
expect(getBorderBottom(tester), 64.0);
expect(getBorderWeight(tester), 2.0);
});
Expand Down Expand Up @@ -3270,7 +3213,7 @@ void main() {
expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, 18.0));
expect(tester.getSize(find.text('text')).height, 16.0);
expect(tester.getTopLeft(find.text('text')).dy, 1.0);
expect(getOpacity(tester, 'hint'), 0.0);
expect(getStaticOpacity(tester, 'hint'), 0.0);
expect(getBorderWeight(tester), 1.0);

await tester.pumpWidget(
Expand All @@ -3293,7 +3236,7 @@ void main() {
expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, 16.0));
expect(tester.getSize(find.text('text')).height, 16.0);
expect(tester.getTopLeft(find.text('text')).dy, 0.0);
expect(getOpacity(tester, 'hint'), 0.0);
expect(getStaticOpacity(tester, 'hint'), 0.0);
expect(getBorderWeight(tester), 1.0);

await tester.pumpWidget(
Expand All @@ -3315,7 +3258,7 @@ void main() {
expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, kMinInteractiveDimension));
expect(tester.getSize(find.text('text')).height, 16.0);
expect(tester.getTopLeft(find.text('text')).dy, 16.0);
expect(getOpacity(tester, 'hint'), 0.0);
expect(getStaticOpacity(tester, 'hint'), 0.0);
expect(getBorderWeight(tester), 0.0);
});

Expand All @@ -3337,7 +3280,7 @@ void main() {
expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, 16.0));
expect(tester.getSize(find.text('text')).height, 16.0);
expect(tester.getTopLeft(find.text('text')).dy, 0.0);
expect(getOpacity(tester, 'hint'), 0.0);
expect(getStaticOpacity(tester, 'hint'), 0.0);
expect(getBorderWeight(tester), 0.0);

// The hint should appear
Expand Down Expand Up @@ -5083,7 +5026,7 @@ void main() {
);
await tester.pumpAndSettle();

expect(getOpacity(tester, 'hint'), 1.0);
expect(getStaticOpacity(tester, 'hint'), 1.0);
});

testWidgets('InputDecorator floating label width scales when focused', (WidgetTester tester) async {
Expand Down
15 changes: 12 additions & 3 deletions packages/flutter/test/material/text_field_test.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,15 @@ double getOpacity(WidgetTester tester, Finder finder) {
).opacity.value;
}

double getStaticOpacity(WidgetTester tester, Finder finder) {
return tester.widget<Opacity>(
find.ancestor(
of: finder,
matching: find.byType(Opacity),
).first,
).opacity;
}

class TestFormatter extends TextInputFormatter {
TestFormatter(this.onFormatEditUpdate);
FormatEditUpdateCallback onFormatEditUpdate;
Expand Down Expand Up @@ -3708,15 +3717,15 @@ void main() {
// Neither the prefix or the suffix should initially be visible, only the hint.
expect(getOpacity(tester, find.text('Prefix')), 0.0);
expect(getOpacity(tester, find.text('Suffix')), 0.0);
expect(getOpacity(tester, find.text('Hint')), 1.0);
expect(getStaticOpacity(tester, find.text('Hint')), 1.0);

await tester.tap(find.byKey(secondKey));
await tester.pumpAndSettle();

// Focus the Input. The hint, prefix, and suffix should appear
expect(getOpacity(tester, find.text('Prefix')), 1.0);
expect(getOpacity(tester, find.text('Suffix')), 1.0);
expect(getOpacity(tester, find.text('Hint')), 1.0);
expect(getStaticOpacity(tester, find.text('Hint')), 1.0);

// Enter some text, and the hint should disappear and the prefix and suffix
// should continue to be visible
Expand All @@ -3725,7 +3734,7 @@ void main() {

expect(getOpacity(tester, find.text('Prefix')), 1.0);
expect(getOpacity(tester, find.text('Suffix')), 1.0);
expect(getOpacity(tester, find.text('Hint')), 0.0);
expect(getStaticOpacity(tester, find.text('Hint')), 0.0);

// Check and make sure that the right styles were applied.
final Text prefixText = tester.widget(find.text('Prefix'));
Expand Down

0 comments on commit 255b71f

Please sign in to comment.