From 255b71f192437a47bf28c7e14832dac968fdfb8b Mon Sep 17 00:00:00 2001 From: Markus Aksli <68219924+markusaksli-nc@users.noreply.github.com> Date: Fri, 8 Jul 2022 20:46:33 +0300 Subject: [PATCH] Switch hint text to Opacity instead of AnimatedOpacity (#107156) --- .../lib/src/material/input_decorator.dart | 4 +- .../input_date_picker_form_field_test.dart | 7 +- .../test/material/input_decorator_test.dart | 107 ++++-------------- .../test/material/text_field_test.dart | 15 ++- 4 files changed, 41 insertions(+), 92 deletions(-) diff --git a/packages/flutter/lib/src/material/input_decorator.dart b/packages/flutter/lib/src/material/input_decorator.dart index dbbb4b2b50..b88faa5364 100644 --- a/packages/flutter/lib/src/material/input_decorator.dart +++ b/packages/flutter/lib/src/material/input_decorator.dart @@ -2157,10 +2157,8 @@ class _InputDecoratorState extends State 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!, diff --git a/packages/flutter/test/material/input_date_picker_form_field_test.dart b/packages/flutter/test/material/input_date_picker_form_field_test.dart index d1432d4eb6..39fb9b5508 100644 --- a/packages/flutter/test/material/input_date_picker_form_field_test.dart +++ b/packages/flutter/test/material/input_date_picker_form_field_test.dart @@ -61,13 +61,12 @@ void main() { } double textOpacity(WidgetTester tester, String textValue) { - final FadeTransition opacityWidget = tester.widget( + return tester.widget( find.ancestor( of: find.text(textValue), - matching: find.byType(FadeTransition), + matching: find.byType(Opacity), ).first, - ); - return opacityWidget.opacity.value; + ).opacity; } group('InputDatePickerFormField', () { diff --git a/packages/flutter/test/material/input_decorator_test.dart b/packages/flutter/test/material/input_decorator_test.dart index a7b63da15f..7a9d7e6637 100644 --- a/packages/flutter/test/material/input_decorator_test.dart +++ b/packages/flutter/test/material/input_decorator_test.dart @@ -144,6 +144,15 @@ double getOpacity(WidgetTester tester, String textValue) { return opacityWidget.opacity.value; } +double getStaticOpacity(WidgetTester tester, String textValue) { + return tester.widget( + 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 @@ -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); @@ -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); @@ -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); @@ -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); @@ -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); }); @@ -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); @@ -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); }); @@ -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); @@ -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); @@ -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); @@ -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); @@ -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); }); @@ -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); @@ -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); @@ -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); @@ -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); @@ -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); }); @@ -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( @@ -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( @@ -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); }); @@ -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 @@ -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 { diff --git a/packages/flutter/test/material/text_field_test.dart b/packages/flutter/test/material/text_field_test.dart index 971d266ffd..f4a544e301 100644 --- a/packages/flutter/test/material/text_field_test.dart +++ b/packages/flutter/test/material/text_field_test.dart @@ -131,6 +131,15 @@ double getOpacity(WidgetTester tester, Finder finder) { ).opacity.value; } +double getStaticOpacity(WidgetTester tester, Finder finder) { + return tester.widget( + find.ancestor( + of: finder, + matching: find.byType(Opacity), + ).first, + ).opacity; +} + class TestFormatter extends TextInputFormatter { TestFormatter(this.onFormatEditUpdate); FormatEditUpdateCallback onFormatEditUpdate; @@ -3708,7 +3717,7 @@ 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(); @@ -3716,7 +3725,7 @@ void main() { // 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 @@ -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'));