Fix border color is wrong for a focused and hovered TextField (#146127)
## 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 | |--------|--------| |  | | </details> ## Related Issue Fixes https://github.com/flutter/flutter/issues/145897 ## Tests Adds 4 tests.
This commit is contained in:
parent
e41881ade2
commit
0ed26dc81d
@ -4703,20 +4703,20 @@ class _InputDecoratorDefaultsM3 extends InputDecorationTheme {
|
|||||||
return BorderSide(color: _colors.onSurface.withOpacity(0.38));
|
return BorderSide(color: _colors.onSurface.withOpacity(0.38));
|
||||||
}
|
}
|
||||||
if (states.contains(MaterialState.error)) {
|
if (states.contains(MaterialState.error)) {
|
||||||
if (states.contains(MaterialState.hovered)) {
|
|
||||||
return BorderSide(color: _colors.onErrorContainer);
|
|
||||||
}
|
|
||||||
if (states.contains(MaterialState.focused)) {
|
if (states.contains(MaterialState.focused)) {
|
||||||
return BorderSide(color: _colors.error, width: 2.0);
|
return BorderSide(color: _colors.error, width: 2.0);
|
||||||
}
|
}
|
||||||
|
if (states.contains(MaterialState.hovered)) {
|
||||||
|
return BorderSide(color: _colors.onErrorContainer);
|
||||||
|
}
|
||||||
return BorderSide(color: _colors.error);
|
return BorderSide(color: _colors.error);
|
||||||
}
|
}
|
||||||
if (states.contains(MaterialState.hovered)) {
|
|
||||||
return BorderSide(color: _colors.onSurface);
|
|
||||||
}
|
|
||||||
if (states.contains(MaterialState.focused)) {
|
if (states.contains(MaterialState.focused)) {
|
||||||
return BorderSide(color: _colors.primary, width: 2.0);
|
return BorderSide(color: _colors.primary, width: 2.0);
|
||||||
}
|
}
|
||||||
|
if (states.contains(MaterialState.hovered)) {
|
||||||
|
return BorderSide(color: _colors.onSurface);
|
||||||
|
}
|
||||||
return BorderSide(color: _colors.onSurfaceVariant);
|
return BorderSide(color: _colors.onSurfaceVariant);
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -4726,20 +4726,20 @@ class _InputDecoratorDefaultsM3 extends InputDecorationTheme {
|
|||||||
return BorderSide(color: _colors.onSurface.withOpacity(0.12));
|
return BorderSide(color: _colors.onSurface.withOpacity(0.12));
|
||||||
}
|
}
|
||||||
if (states.contains(MaterialState.error)) {
|
if (states.contains(MaterialState.error)) {
|
||||||
if (states.contains(MaterialState.hovered)) {
|
|
||||||
return BorderSide(color: _colors.onErrorContainer);
|
|
||||||
}
|
|
||||||
if (states.contains(MaterialState.focused)) {
|
if (states.contains(MaterialState.focused)) {
|
||||||
return BorderSide(color: _colors.error, width: 2.0);
|
return BorderSide(color: _colors.error, width: 2.0);
|
||||||
}
|
}
|
||||||
|
if (states.contains(MaterialState.hovered)) {
|
||||||
|
return BorderSide(color: _colors.onErrorContainer);
|
||||||
|
}
|
||||||
return BorderSide(color: _colors.error);
|
return BorderSide(color: _colors.error);
|
||||||
}
|
}
|
||||||
if (states.contains(MaterialState.hovered)) {
|
|
||||||
return BorderSide(color: _colors.onSurface);
|
|
||||||
}
|
|
||||||
if (states.contains(MaterialState.focused)) {
|
if (states.contains(MaterialState.focused)) {
|
||||||
return BorderSide(color: _colors.primary, width: 2.0);
|
return BorderSide(color: _colors.primary, width: 2.0);
|
||||||
}
|
}
|
||||||
|
if (states.contains(MaterialState.hovered)) {
|
||||||
|
return BorderSide(color: _colors.onSurface);
|
||||||
|
}
|
||||||
return BorderSide(color: _colors.outline);
|
return BorderSide(color: _colors.outline);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -544,6 +544,25 @@ void main() {
|
|||||||
expect(getBorderColor(tester), theme.colorScheme.primary);
|
expect(getBorderColor(tester), theme.colorScheme.primary);
|
||||||
expect(getBorderWeight(tester), 2.0);
|
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', () {
|
group('when field is in error', () {
|
||||||
@ -635,6 +654,25 @@ void main() {
|
|||||||
expect(getBorderColor(tester), theme.colorScheme.onErrorContainer);
|
expect(getBorderColor(tester), theme.colorScheme.onErrorContainer);
|
||||||
expect(getBorderWeight(tester), 1.0);
|
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 {
|
testWidgets('default container height is 48dp on desktop', (WidgetTester tester) async {
|
||||||
@ -872,6 +910,25 @@ void main() {
|
|||||||
expect(getBorderColor(tester), theme.colorScheme.primary);
|
expect(getBorderColor(tester), theme.colorScheme.primary);
|
||||||
expect(getBorderWeight(tester), 2.0);
|
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', () {
|
group('when field is in error', () {
|
||||||
@ -959,6 +1016,25 @@ void main() {
|
|||||||
expect(getBorderColor(tester), theme.colorScheme.onErrorContainer);
|
expect(getBorderColor(tester), theme.colorScheme.onErrorContainer);
|
||||||
expect(getBorderWeight(tester), 1.0);
|
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 {
|
testWidgets('default container height is 48dp on desktop', (WidgetTester tester) async {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user