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 https://github.com/flutter/flutter/pull/32776, at that time it was needed because there was also a focus color animation. Sometimes later, the focus animation was removed, see https://github.com/flutter/flutter/pull/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 https://github.com/flutter/flutter/issues/146573

## Tests

Adds 1 tests.
This commit is contained in:
Bruno Leroux
2024-04-25 01:45:50 +02:00
committed by GitHub
parent 3bd2980665
commit 99411e5b24
2 changed files with 36 additions and 11 deletions

View File

@@ -1950,7 +1950,7 @@ class _InputDecoratorState extends State<InputDecorator> with TickerProviderStat
}
Color _getHoverColor(ThemeData themeData) {
if (decoration.filled == null || !decoration.filled! || isFocused || !decoration.enabled) {
if (decoration.filled == null || !decoration.filled! || !decoration.enabled) {
return Colors.transparent;
}
return decoration.hoverColor ?? themeData.inputDecorationTheme.hoverColor ?? themeData.hoverColor;

View File

@@ -350,7 +350,7 @@ void main() {
..path(
style: PaintingStyle.fill,
color: theme.colorScheme.surfaceContainerHighest,
)
),
);
});
@@ -409,7 +409,7 @@ void main() {
..path(
style: PaintingStyle.fill,
color: theme.colorScheme.onSurface.withOpacity(0.04),
)
),
);
});
@@ -470,7 +470,7 @@ void main() {
..path(
style: PaintingStyle.fill,
color: Color.alphaBlend(theme.hoverColor, theme.colorScheme.surfaceContainerHighest),
)
),
);
});
@@ -530,7 +530,32 @@ void main() {
..path(
style: PaintingStyle.fill,
color: theme.colorScheme.surfaceContainerHighest,
)
),
);
});
testWidgets('container has correct color when focused and hovered', (WidgetTester tester) async {
// Regression test for https://github.com/flutter/flutter/issues/146573.
await tester.pumpWidget(
buildInputDecorator(
isFocused: true,
isHovering: true,
decoration: const InputDecoration(
filled: true,
labelText: labelText,
helperText: helperText,
),
),
);
final ThemeData theme = Theme.of(tester.element(findDecorator()));
final Color focusColor = theme.colorScheme.surfaceContainerHighest;
final Color hoverColor = theme.hoverColor;
expect(findBorderPainter(), paints
..path(
style: PaintingStyle.fill,
color: Color.alphaBlend(hoverColor, focusColor),
),
);
});
@@ -607,7 +632,7 @@ void main() {
..path(
style: PaintingStyle.fill,
color: theme.colorScheme.surfaceContainerHighest,
)
),
);
});
@@ -729,7 +754,7 @@ void main() {
expect(findBorderPainter(), paints
..path(
style: PaintingStyle.stroke,
)
),
);
});
@@ -784,7 +809,7 @@ void main() {
expect(findBorderPainter(), paints
..path(
style: PaintingStyle.stroke,
)
),
);
});
@@ -840,7 +865,7 @@ void main() {
expect(findBorderPainter(), paints
..path(
style: PaintingStyle.stroke,
)
),
);
});
@@ -896,7 +921,7 @@ void main() {
expect(findBorderPainter(), paints
..path(
style: PaintingStyle.stroke,
)
),
);
});
@@ -969,7 +994,7 @@ void main() {
expect(findBorderPainter(), paints
..path(
style: PaintingStyle.stroke,
)
),
);
});