Skip to content

Commit 99411e5

Browse files
authored
Fix filled color is wrong for a focused and hovered TextField (#146976)
## Description This PR fixes the filled color for a focused and hovered text field. Before this PR, the filled color for a focused text field did not change when hovered, after this PR the filled color is blended with the hover color. The change removes a `isFocused` check which deactivated the blending. This check was introduced in flutter/flutter#32776, at that time it was needed because there was also a focus color animation. Sometimes later, the focus animation was removed, see flutter/flutter#33062, but the flag was not removed. **Before**: https://github.com/flutter/flutter/assets/840911/9698ba82-eb67-428a-8635-8054a4b8dfaf **After**: https://github.com/flutter/flutter/assets/840911/4c03a137-360d-4612-8946-765d7b5c698d ## Related Issue Fixes flutter/flutter#146573 ## Tests Adds 1 tests.
1 parent 3bd2980 commit 99411e5

File tree

2 files changed

+36
-11
lines changed

2 files changed

+36
-11
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1950,7 +1950,7 @@ class _InputDecoratorState extends State<InputDecorator> with TickerProviderStat
19501950
}
19511951

19521952
Color _getHoverColor(ThemeData themeData) {
1953-
if (decoration.filled == null || !decoration.filled! || isFocused || !decoration.enabled) {
1953+
if (decoration.filled == null || !decoration.filled! || !decoration.enabled) {
19541954
return Colors.transparent;
19551955
}
19561956
return decoration.hoverColor ?? themeData.inputDecorationTheme.hoverColor ?? themeData.hoverColor;

packages/flutter/test/material/input_decorator_test.dart

Lines changed: 35 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -350,7 +350,7 @@ void main() {
350350
..path(
351351
style: PaintingStyle.fill,
352352
color: theme.colorScheme.surfaceContainerHighest,
353-
)
353+
),
354354
);
355355
});
356356

@@ -409,7 +409,7 @@ void main() {
409409
..path(
410410
style: PaintingStyle.fill,
411411
color: theme.colorScheme.onSurface.withOpacity(0.04),
412-
)
412+
),
413413
);
414414
});
415415

@@ -470,7 +470,7 @@ void main() {
470470
..path(
471471
style: PaintingStyle.fill,
472472
color: Color.alphaBlend(theme.hoverColor, theme.colorScheme.surfaceContainerHighest),
473-
)
473+
),
474474
);
475475
});
476476

@@ -530,7 +530,32 @@ void main() {
530530
..path(
531531
style: PaintingStyle.fill,
532532
color: theme.colorScheme.surfaceContainerHighest,
533-
)
533+
),
534+
);
535+
});
536+
537+
testWidgets('container has correct color when focused and hovered', (WidgetTester tester) async {
538+
// Regression test for https://github.com/flutter/flutter/issues/146573.
539+
await tester.pumpWidget(
540+
buildInputDecorator(
541+
isFocused: true,
542+
isHovering: true,
543+
decoration: const InputDecoration(
544+
filled: true,
545+
labelText: labelText,
546+
helperText: helperText,
547+
),
548+
),
549+
);
550+
551+
final ThemeData theme = Theme.of(tester.element(findDecorator()));
552+
final Color focusColor = theme.colorScheme.surfaceContainerHighest;
553+
final Color hoverColor = theme.hoverColor;
554+
expect(findBorderPainter(), paints
555+
..path(
556+
style: PaintingStyle.fill,
557+
color: Color.alphaBlend(hoverColor, focusColor),
558+
),
534559
);
535560
});
536561

@@ -607,7 +632,7 @@ void main() {
607632
..path(
608633
style: PaintingStyle.fill,
609634
color: theme.colorScheme.surfaceContainerHighest,
610-
)
635+
),
611636
);
612637
});
613638

@@ -729,7 +754,7 @@ void main() {
729754
expect(findBorderPainter(), paints
730755
..path(
731756
style: PaintingStyle.stroke,
732-
)
757+
),
733758
);
734759
});
735760

@@ -784,7 +809,7 @@ void main() {
784809
expect(findBorderPainter(), paints
785810
..path(
786811
style: PaintingStyle.stroke,
787-
)
812+
),
788813
);
789814
});
790815

@@ -840,7 +865,7 @@ void main() {
840865
expect(findBorderPainter(), paints
841866
..path(
842867
style: PaintingStyle.stroke,
843-
)
868+
),
844869
);
845870
});
846871

@@ -896,7 +921,7 @@ void main() {
896921
expect(findBorderPainter(), paints
897922
..path(
898923
style: PaintingStyle.stroke,
899-
)
924+
),
900925
);
901926
});
902927

@@ -969,7 +994,7 @@ void main() {
969994
expect(findBorderPainter(), paints
970995
..path(
971996
style: PaintingStyle.stroke,
972-
)
997+
),
973998
);
974999
});
9751000

0 commit comments

Comments
 (0)