Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

InputDecorator: Switch hint to Opacity instead of AnimatedOpacity #107156

Merged
merged 1 commit into from
Jul 8, 2022
Merged

InputDecorator: Switch hint to Opacity instead of AnimatedOpacity #107156

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 1 addition & 3 deletions packages/flutter/lib/src/material/input_decorator.dart
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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