Skip to content
This repository was archived by the owner on Feb 22, 2023. It is now read-only.

Commit 255b71f

Browse files
markusaksli-ncmarkusaksli-nc
authored
Switch hint text to Opacity instead of AnimatedOpacity (#107156)
1 parent fd54ddf commit 255b71f

File tree

4 files changed

+41
-92
lines changed

4 files changed

+41
-92
lines changed

‎packages/flutter/lib/src/material/input_decorator.dart‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2157,10 +2157,8 @@ class _InputDecoratorState extends State<InputDecorator> with TickerProviderStat
21572157
final TextBaseline textBaseline = labelStyle.textBaseline!;
21582158

21592159
final TextStyle hintStyle = _getInlineHintStyle(themeData);
2160-
final Widget? hint = decoration!.hintText == null ? null : AnimatedOpacity(
2160+
final Widget? hint = decoration!.hintText == null ? null : Opacity(
21612161
opacity: (isEmpty && !_hasInlineLabel) ? 1.0 : 0.0,
2162-
duration: _kTransitionDuration,
2163-
curve: _kTransitionCurve,
21642162
alwaysIncludeSemantics: true,
21652163
child: Text(
21662164
decoration!.hintText!,

‎packages/flutter/test/material/input_date_picker_form_field_test.dart‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -61,13 +61,12 @@ void main() {
6161
}
6262

6363
double textOpacity(WidgetTester tester, String textValue) {
64-
final FadeTransition opacityWidget = tester.widget<FadeTransition>(
64+
return tester.widget<Opacity>(
6565
find.ancestor(
6666
of: find.text(textValue),
67-
matching: find.byType(FadeTransition),
67+
matching: find.byType(Opacity),
6868
).first,
69-
);
70-
return opacityWidget.opacity.value;
69+
).opacity;
7170
}
7271

7372
group('InputDatePickerFormField', () {

‎packages/flutter/test/material/input_decorator_test.dart‎

Lines changed: 25 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -144,6 +144,15 @@ double getOpacity(WidgetTester tester, String textValue) {
144144
return opacityWidget.opacity.value;
145145
}
146146

147+
double getStaticOpacity(WidgetTester tester, String textValue) {
148+
return tester.widget<Opacity>(
149+
find.ancestor(
150+
of: find.text(textValue),
151+
matching: find.byType(Opacity),
152+
).first,
153+
).opacity;
154+
}
155+
147156
void main() {
148157
testWidgets('InputDecorator input/label text layout', (WidgetTester tester) async {
149158
// The label appears above the input text
@@ -963,7 +972,7 @@ void main() {
963972
expect(tester.getBottomLeft(find.text('text')).dy, 44.0);
964973
expect(tester.getTopLeft(find.text('label')).dy, 20.0);
965974
expect(tester.getBottomLeft(find.text('label')).dy, 36.0);
966-
expect(getOpacity(tester, 'hint'), 0.0);
975+
expect(getStaticOpacity(tester, 'hint'), 0.0);
967976
expect(getBorderBottom(tester), 56.0);
968977
expect(getBorderWeight(tester), 1.0);
969978

@@ -979,17 +988,6 @@ void main() {
979988
),
980989
);
981990

982-
// The hint's opacity animates from 0.0 to 1.0.
983-
// The animation's duration is 200ms.
984-
{
985-
await tester.pump(const Duration(milliseconds: 50));
986-
final double hintOpacity50ms = getOpacity(tester, 'hint');
987-
expect(hintOpacity50ms, inExclusiveRange(0.0, 1.0));
988-
await tester.pump(const Duration(milliseconds: 50));
989-
final double hintOpacity100ms = getOpacity(tester, 'hint');
990-
expect(hintOpacity100ms, inExclusiveRange(hintOpacity50ms, 1.0));
991-
}
992-
993991
await tester.pumpAndSettle();
994992
expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, 56.0));
995993
expect(tester.getTopLeft(find.text('text')).dy, 28.0);
@@ -998,7 +996,7 @@ void main() {
998996
expect(tester.getBottomLeft(find.text('label')).dy, 24.0);
999997
expect(tester.getTopLeft(find.text('hint')).dy, 28.0);
1000998
expect(tester.getBottomLeft(find.text('hint')).dy, 44.0);
1001-
expect(getOpacity(tester, 'hint'), 1.0);
999+
expect(getStaticOpacity(tester, 'hint'), 1.0);
10021000
expect(getBorderBottom(tester), 56.0);
10031001
expect(getBorderWeight(tester), 2.0);
10041002

@@ -1012,17 +1010,6 @@ void main() {
10121010
),
10131011
);
10141012

1015-
// The hint's opacity animates from 1.0 to 0.0.
1016-
// The animation's duration is 200ms.
1017-
{
1018-
await tester.pump(const Duration(milliseconds: 50));
1019-
final double hintOpacity50ms = getOpacity(tester, 'hint');
1020-
expect(hintOpacity50ms, inExclusiveRange(0.0, 1.0));
1021-
await tester.pump(const Duration(milliseconds: 50));
1022-
final double hintOpacity100ms = getOpacity(tester, 'hint');
1023-
expect(hintOpacity100ms, inExclusiveRange(0.0, hintOpacity50ms));
1024-
}
1025-
10261013
await tester.pumpAndSettle();
10271014
expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, 56.0));
10281015
expect(tester.getTopLeft(find.text('text')).dy, 28.0);
@@ -1031,7 +1018,7 @@ void main() {
10311018
expect(tester.getBottomLeft(find.text('label')).dy, 24.0);
10321019
expect(tester.getTopLeft(find.text('hint')).dy, 28.0);
10331020
expect(tester.getBottomLeft(find.text('hint')).dy, 44.0);
1034-
expect(getOpacity(tester, 'hint'), 0.0);
1021+
expect(getStaticOpacity(tester, 'hint'), 0.0);
10351022
expect(getBorderBottom(tester), 56.0);
10361023
expect(getBorderWeight(tester), 2.0);
10371024
});
@@ -1071,7 +1058,7 @@ void main() {
10711058
expect(tester.getBottomLeft(find.text('text')).dy, 40.0);
10721059
expect(tester.getTopLeft(find.text('label')).dy, 16.0);
10731060
expect(tester.getBottomLeft(find.text('label')).dy, 32.0);
1074-
expect(getOpacity(tester, 'hint'), 0.0);
1061+
expect(getStaticOpacity(tester, 'hint'), 0.0);
10751062
expect(getBorderBottom(tester), 48.0);
10761063
expect(getBorderWeight(tester), 1.0);
10771064

@@ -1093,7 +1080,7 @@ void main() {
10931080
expect(tester.getBottomLeft(find.text('text')).dy, 40.0);
10941081
expect(tester.getTopLeft(find.text('label')).dy, 8.0);
10951082
expect(tester.getBottomLeft(find.text('label')).dy, 20.0);
1096-
expect(getOpacity(tester, 'hint'), 1.0);
1083+
expect(getStaticOpacity(tester, 'hint'), 1.0);
10971084
expect(getBorderBottom(tester), 48.0);
10981085
expect(getBorderWeight(tester), 2.0);
10991086
});
@@ -1868,7 +1855,7 @@ void main() {
18681855
expect(tester.getBottomLeft(find.text('text')).dy, 40.0);
18691856
expect(tester.getTopLeft(find.text('label')).dy, 16.0);
18701857
expect(tester.getBottomLeft(find.text('label')).dy, 32.0);
1871-
expect(getOpacity(tester, 'hint'), 0.0);
1858+
expect(getStaticOpacity(tester, 'hint'), 0.0);
18721859
expect(getBorderBottom(tester), 48.0);
18731860
expect(getBorderWeight(tester), 1.0);
18741861

@@ -1885,17 +1872,6 @@ void main() {
18851872
),
18861873
);
18871874

1888-
// The hint's opacity animates from 0.0 to 1.0.
1889-
// The animation's duration is 200ms.
1890-
{
1891-
await tester.pump(const Duration(milliseconds: 50));
1892-
final double hintOpacity50ms = getOpacity(tester, 'hint');
1893-
expect(hintOpacity50ms, inExclusiveRange(0.0, 1.0));
1894-
await tester.pump(const Duration(milliseconds: 50));
1895-
final double hintOpacity100ms = getOpacity(tester, 'hint');
1896-
expect(hintOpacity100ms, inExclusiveRange(hintOpacity50ms, 1.0));
1897-
}
1898-
18991875
await tester.pumpAndSettle();
19001876
expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, 48.0));
19011877
expect(tester.getTopLeft(find.text('text')).dy, 24.0);
@@ -1904,7 +1880,7 @@ void main() {
19041880
expect(tester.getBottomLeft(find.text('label')).dy, 24.0);
19051881
expect(tester.getTopLeft(find.text('hint')).dy, 24.0);
19061882
expect(tester.getBottomLeft(find.text('hint')).dy, 40.0);
1907-
expect(getOpacity(tester, 'hint'), 1.0);
1883+
expect(getStaticOpacity(tester, 'hint'), 1.0);
19081884
expect(getBorderBottom(tester), 48.0);
19091885
expect(getBorderWeight(tester), 2.0);
19101886

@@ -1919,17 +1895,6 @@ void main() {
19191895
),
19201896
);
19211897

1922-
// The hint's opacity animates from 1.0 to 0.0.
1923-
// The animation's duration is 200ms.
1924-
{
1925-
await tester.pump(const Duration(milliseconds: 50));
1926-
final double hintOpacity50ms = getOpacity(tester, 'hint');
1927-
expect(hintOpacity50ms, inExclusiveRange(0.0, 1.0));
1928-
await tester.pump(const Duration(milliseconds: 50));
1929-
final double hintOpacity100ms = getOpacity(tester, 'hint');
1930-
expect(hintOpacity100ms, inExclusiveRange(0.0, hintOpacity50ms));
1931-
}
1932-
19331898
await tester.pumpAndSettle();
19341899
expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, 48.0));
19351900
expect(tester.getTopLeft(find.text('text')).dy, 24.0);
@@ -1938,7 +1903,7 @@ void main() {
19381903
expect(tester.getBottomLeft(find.text('label')).dy, 24.0);
19391904
expect(tester.getTopLeft(find.text('hint')).dy, 24.0);
19401905
expect(tester.getBottomLeft(find.text('hint')).dy, 40.0);
1941-
expect(getOpacity(tester, 'hint'), 0.0);
1906+
expect(getStaticOpacity(tester, 'hint'), 0.0);
19421907
expect(getBorderBottom(tester), 48.0);
19431908
expect(getBorderWeight(tester), 2.0);
19441909
});
@@ -1962,7 +1927,7 @@ void main() {
19621927
expect(tester.getBottomLeft(find.text('text')).dy, 48.0);
19631928
expect(tester.getTopLeft(find.text('label')).dy, 24.0);
19641929
expect(tester.getBottomLeft(find.text('label')).dy, 40.0);
1965-
expect(getOpacity(tester, 'hint'), 0.0);
1930+
expect(getStaticOpacity(tester, 'hint'), 0.0);
19661931
expect(getBorderBottom(tester), 64.0);
19671932
expect(getBorderWeight(tester), 1.0);
19681933

@@ -1979,17 +1944,6 @@ void main() {
19791944
),
19801945
);
19811946

1982-
// The hint's opacity animates from 0.0 to 1.0.
1983-
// The animation's duration is 200ms.
1984-
{
1985-
await tester.pump(const Duration(milliseconds: 50));
1986-
final double hintOpacity50ms = getOpacity(tester, 'hint');
1987-
expect(hintOpacity50ms, inExclusiveRange(0.0, 1.0));
1988-
await tester.pump(const Duration(milliseconds: 50));
1989-
final double hintOpacity100ms = getOpacity(tester, 'hint');
1990-
expect(hintOpacity100ms, inExclusiveRange(hintOpacity50ms, 1.0));
1991-
}
1992-
19931947
await tester.pumpAndSettle();
19941948
expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, 64.0));
19951949
expect(tester.getTopLeft(find.text('text')).dy, 32.0);
@@ -1998,7 +1952,7 @@ void main() {
19981952
expect(tester.getBottomLeft(find.text('label')).dy, 24.0);
19991953
expect(tester.getTopLeft(find.text('hint')).dy, 32.0);
20001954
expect(tester.getBottomLeft(find.text('hint')).dy, 48.0);
2001-
expect(getOpacity(tester, 'hint'), 1.0);
1955+
expect(getStaticOpacity(tester, 'hint'), 1.0);
20021956
expect(getBorderBottom(tester), 64.0);
20031957
expect(getBorderWeight(tester), 2.0);
20041958

@@ -2013,17 +1967,6 @@ void main() {
20131967
),
20141968
);
20151969

2016-
// The hint's opacity animates from 1.0 to 0.0.
2017-
// The animation's duration is 200ms.
2018-
{
2019-
await tester.pump(const Duration(milliseconds: 50));
2020-
final double hintOpacity50ms = getOpacity(tester, 'hint');
2021-
expect(hintOpacity50ms, inExclusiveRange(0.0, 1.0));
2022-
await tester.pump(const Duration(milliseconds: 50));
2023-
final double hintOpacity100ms = getOpacity(tester, 'hint');
2024-
expect(hintOpacity100ms, inExclusiveRange(0.0, hintOpacity50ms));
2025-
}
2026-
20271970
await tester.pumpAndSettle();
20281971
expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, 64.0));
20291972
expect(tester.getTopLeft(find.text('text')).dy, 32.0);
@@ -2032,7 +1975,7 @@ void main() {
20321975
expect(tester.getBottomLeft(find.text('label')).dy, 24.0);
20331976
expect(tester.getTopLeft(find.text('hint')).dy, 32.0);
20341977
expect(tester.getBottomLeft(find.text('hint')).dy, 48.0);
2035-
expect(getOpacity(tester, 'hint'), 0.0);
1978+
expect(getStaticOpacity(tester, 'hint'), 0.0);
20361979
expect(getBorderBottom(tester), 64.0);
20371980
expect(getBorderWeight(tester), 2.0);
20381981
});
@@ -3270,7 +3213,7 @@ void main() {
32703213
expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, 18.0));
32713214
expect(tester.getSize(find.text('text')).height, 16.0);
32723215
expect(tester.getTopLeft(find.text('text')).dy, 1.0);
3273-
expect(getOpacity(tester, 'hint'), 0.0);
3216+
expect(getStaticOpacity(tester, 'hint'), 0.0);
32743217
expect(getBorderWeight(tester), 1.0);
32753218

32763219
await tester.pumpWidget(
@@ -3293,7 +3236,7 @@ void main() {
32933236
expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, 16.0));
32943237
expect(tester.getSize(find.text('text')).height, 16.0);
32953238
expect(tester.getTopLeft(find.text('text')).dy, 0.0);
3296-
expect(getOpacity(tester, 'hint'), 0.0);
3239+
expect(getStaticOpacity(tester, 'hint'), 0.0);
32973240
expect(getBorderWeight(tester), 1.0);
32983241

32993242
await tester.pumpWidget(
@@ -3315,7 +3258,7 @@ void main() {
33153258
expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, kMinInteractiveDimension));
33163259
expect(tester.getSize(find.text('text')).height, 16.0);
33173260
expect(tester.getTopLeft(find.text('text')).dy, 16.0);
3318-
expect(getOpacity(tester, 'hint'), 0.0);
3261+
expect(getStaticOpacity(tester, 'hint'), 0.0);
33193262
expect(getBorderWeight(tester), 0.0);
33203263
});
33213264

@@ -3337,7 +3280,7 @@ void main() {
33373280
expect(tester.getSize(find.byType(InputDecorator)), const Size(800.0, 16.0));
33383281
expect(tester.getSize(find.text('text')).height, 16.0);
33393282
expect(tester.getTopLeft(find.text('text')).dy, 0.0);
3340-
expect(getOpacity(tester, 'hint'), 0.0);
3283+
expect(getStaticOpacity(tester, 'hint'), 0.0);
33413284
expect(getBorderWeight(tester), 0.0);
33423285

33433286
// The hint should appear
@@ -5083,7 +5026,7 @@ void main() {
50835026
);
50845027
await tester.pumpAndSettle();
50855028

5086-
expect(getOpacity(tester, 'hint'), 1.0);
5029+
expect(getStaticOpacity(tester, 'hint'), 1.0);
50875030
});
50885031

50895032
testWidgets('InputDecorator floating label width scales when focused', (WidgetTester tester) async {

‎packages/flutter/test/material/text_field_test.dart‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -131,6 +131,15 @@ double getOpacity(WidgetTester tester, Finder finder) {
131131
).opacity.value;
132132
}
133133

134+
double getStaticOpacity(WidgetTester tester, Finder finder) {
135+
return tester.widget<Opacity>(
136+
find.ancestor(
137+
of: finder,
138+
matching: find.byType(Opacity),
139+
).first,
140+
).opacity;
141+
}
142+
134143
class TestFormatter extends TextInputFormatter {
135144
TestFormatter(this.onFormatEditUpdate);
136145
FormatEditUpdateCallback onFormatEditUpdate;
@@ -3708,15 +3717,15 @@ void main() {
37083717
// Neither the prefix or the suffix should initially be visible, only the hint.
37093718
expect(getOpacity(tester, find.text('Prefix')), 0.0);
37103719
expect(getOpacity(tester, find.text('Suffix')), 0.0);
3711-
expect(getOpacity(tester, find.text('Hint')), 1.0);
3720+
expect(getStaticOpacity(tester, find.text('Hint')), 1.0);
37123721

37133722
await tester.tap(find.byKey(secondKey));
37143723
await tester.pumpAndSettle();
37153724

37163725
// Focus the Input. The hint, prefix, and suffix should appear
37173726
expect(getOpacity(tester, find.text('Prefix')), 1.0);
37183727
expect(getOpacity(tester, find.text('Suffix')), 1.0);
3719-
expect(getOpacity(tester, find.text('Hint')), 1.0);
3728+
expect(getStaticOpacity(tester, find.text('Hint')), 1.0);
37203729

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

37263735
expect(getOpacity(tester, find.text('Prefix')), 1.0);
37273736
expect(getOpacity(tester, find.text('Suffix')), 1.0);
3728-
expect(getOpacity(tester, find.text('Hint')), 0.0);
3737+
expect(getStaticOpacity(tester, find.text('Hint')), 0.0);
37293738

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

0 commit comments

Comments
 (0)