firka/flutter
firka/flutter
5
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix border color is wrong for a focused and hovered TextField (#146127)

Browse Source 
## Description

This PRs fixes the active indicator color for a filled text field and the border color for an outlined text field.
Previously, when a text field was focused and hovered, the hover color was used. With this PR the focus color is used.

Screenshots for a focused and hovered text field:

| Before | After |
|--------|--------|
| ![image](https://github.com/flutter/flutter/assets/840911/aeca2b25-e28b-4609-bd47-9d72b3cfb80d) | ![image](https://github.com/flutter/flutter/assets/840911/f4331178-8f1e-4cb8-a93f-7052a6770af7)| 

</details> 

## Related Issue

Fixes https://github.com/flutter/flutter/issues/145897

## Tests

Adds 4 tests.
This commit is contained in:
Bruno Leroux 2024-04-02 22:08:11 +02:00 committed by GitHub
parent e41881ade2
commit 0ed26dc81d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 88 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
packages/flutter/lib/src/material/input_decorator.dart
View File

@ -4703,20 +4703,20 @@ class _InputDecoratorDefaultsM3 extends InputDecorationTheme {
return BorderSide(color: _colors.onSurface.withOpacity(0.38));
}
if (states.contains(MaterialState.error)) {
if (states.contains(MaterialState.hovered)) {
return BorderSide(color: _colors.onErrorContainer);
}
if (states.contains(MaterialState.focused)) {
return BorderSide(color: _colors.error, width: 2.0);
}
if (states.contains(MaterialState.hovered)) {
return BorderSide(color: _colors.onErrorContainer);
}
return BorderSide(color: _colors.error);
}
if (states.contains(MaterialState.hovered)) {
return BorderSide(color: _colors.onSurface);
}
if (states.contains(MaterialState.focused)) {
return BorderSide(color: _colors.primary, width: 2.0);
}
if (states.contains(MaterialState.hovered)) {
return BorderSide(color: _colors.onSurface);
}
return BorderSide(color: _colors.onSurfaceVariant);
});
@ -4726,20 +4726,20 @@ class _InputDecoratorDefaultsM3 extends InputDecorationTheme {
return BorderSide(color: _colors.onSurface.withOpacity(0.12));
}
if (states.contains(MaterialState.error)) {
if (states.contains(MaterialState.hovered)) {
return BorderSide(color: _colors.onErrorContainer);
}
if (states.contains(MaterialState.focused)) {
return BorderSide(color: _colors.error, width: 2.0);
}
if (states.contains(MaterialState.hovered)) {
return BorderSide(color: _colors.onErrorContainer);
}
return BorderSide(color: _colors.error);
}
if (states.contains(MaterialState.hovered)) {
return BorderSide(color: _colors.onSurface);
}
if (states.contains(MaterialState.focused)) {
return BorderSide(color: _colors.primary, width: 2.0);
}
if (states.contains(MaterialState.hovered)) {
return BorderSide(color: _colors.onSurface);
}
return BorderSide(color: _colors.outline);
});

76
packages/flutter/test/material/input_decorator_test.dart
View File

@ -544,6 +544,25 @@ void main() {
expect(getBorderColor(tester), theme.colorScheme.primary);
expect(getBorderWeight(tester), 2.0);
});
testWidgets('active indicator has correct weight and color when focused and hovered', (WidgetTester tester) async {
// Regression test for https://github.com/flutter/flutter/issues/145897.
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()));
expect(getBorderColor(tester), theme.colorScheme.primary);
expect(getBorderWeight(tester), 2.0);
});
});
group('when field is in error', () {
@ -635,6 +654,25 @@ void main() {
expect(getBorderColor(tester), theme.colorScheme.onErrorContainer);
expect(getBorderWeight(tester), 1.0);
});
testWidgets('active indicator has correct weight and color when focused and hovered', (WidgetTester tester) async {
// Regression test for https://github.com/flutter/flutter/issues/145897.
await tester.pumpWidget(
buildInputDecorator(
isFocused: true,
isHovering: true,
decoration: const InputDecoration(
filled: true,
labelText: labelText,
errorText: errorText,
),
),
);
final ThemeData theme = Theme.of(tester.element(findDecorator()));
expect(getBorderColor(tester), theme.colorScheme.error);
expect(getBorderWeight(tester), 2.0);
});
});
testWidgets('default container height is 48dp on desktop', (WidgetTester tester) async {
@ -872,6 +910,25 @@ void main() {
expect(getBorderColor(tester), theme.colorScheme.primary);
expect(getBorderWeight(tester), 2.0);
});
testWidgets('outline has correct weight and color when focused and hovered', (WidgetTester tester) async {
// Regression test for https://github.com/flutter/flutter/issues/145897.
await tester.pumpWidget(
buildInputDecorator(
isFocused: true,
isHovering: true,
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: labelText,
helperText: helperText,
),
),
);
final ThemeData theme = Theme.of(tester.element(findDecorator()));
expect(getBorderColor(tester), theme.colorScheme.primary);
expect(getBorderWeight(tester), 2.0);
});
});
group('when field is in error', () {
@ -959,6 +1016,25 @@ void main() {
expect(getBorderColor(tester), theme.colorScheme.onErrorContainer);
expect(getBorderWeight(tester), 1.0);
});
testWidgets('outline has correct weight and color when focused and hovered', (WidgetTester tester) async {
// Regression test for https://github.com/flutter/flutter/issues/145897.
await tester.pumpWidget(
buildInputDecorator(
isFocused: true,
isHovering: true,
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: labelText,
errorText: errorText,
),
),
);
final ThemeData theme = Theme.of(tester.element(findDecorator()));
expect(getBorderColor(tester), theme.colorScheme.error);
expect(getBorderWeight(tester), 2.0);
});
});
testWidgets('default container height is 48dp on desktop', (WidgetTester tester) async {