mirror of
https://github.com/flutter/flutter
synced 2024-10-13 11:42:54 +00:00
Turn off container focus highlight for filled text fields. (#33062)
This turns off focus highlight for filled text fields, since it turns out not to be to spec.
This commit is contained in:
parent
e2042bae6d
commit
d0c603d0bb
|
@ -69,8 +69,6 @@ class _InputBorderPainter extends CustomPainter {
|
|||
@required this.gap,
|
||||
@required this.textDirection,
|
||||
@required this.fillColor,
|
||||
@required this.focusAnimation,
|
||||
@required this.focusColorTween,
|
||||
@required this.hoverAnimation,
|
||||
@required this.hoverColorTween,
|
||||
}) : super(repaint: repaint);
|
||||
|
@ -81,17 +79,10 @@ class _InputBorderPainter extends CustomPainter {
|
|||
final _InputBorderGap gap;
|
||||
final TextDirection textDirection;
|
||||
final Color fillColor;
|
||||
final ColorTween focusColorTween;
|
||||
final Animation<double> focusAnimation;
|
||||
final ColorTween hoverColorTween;
|
||||
final Animation<double> hoverAnimation;
|
||||
|
||||
Color get blendedColor {
|
||||
return Color.alphaBlend(
|
||||
hoverColorTween.evaluate(hoverAnimation),
|
||||
Color.alphaBlend(focusColorTween.evaluate(focusAnimation), fillColor),
|
||||
);
|
||||
}
|
||||
Color get blendedColor => Color.alphaBlend(hoverColorTween.evaluate(hoverAnimation), fillColor);
|
||||
|
||||
@override
|
||||
void paint(Canvas canvas, Size size) {
|
||||
|
@ -120,7 +111,6 @@ class _InputBorderPainter extends CustomPainter {
|
|||
@override
|
||||
bool shouldRepaint(_InputBorderPainter oldPainter) {
|
||||
return borderAnimation != oldPainter.borderAnimation
|
||||
|| focusAnimation != oldPainter.focusAnimation
|
||||
|| hoverAnimation != oldPainter.hoverAnimation
|
||||
|| gapAnimation != oldPainter.gapAnimation
|
||||
|| border != oldPainter.border
|
||||
|
@ -140,8 +130,6 @@ class _BorderContainer extends StatefulWidget {
|
|||
@required this.gap,
|
||||
@required this.gapAnimation,
|
||||
@required this.fillColor,
|
||||
@required this.focusColor,
|
||||
@required this.isFocused,
|
||||
@required this.hoverColor,
|
||||
@required this.isHovering,
|
||||
this.child,
|
||||
|
@ -154,8 +142,6 @@ class _BorderContainer extends StatefulWidget {
|
|||
final _InputBorderGap gap;
|
||||
final Animation<double> gapAnimation;
|
||||
final Color fillColor;
|
||||
final Color focusColor;
|
||||
final bool isFocused;
|
||||
final Color hoverColor;
|
||||
final bool isHovering;
|
||||
final Widget child;
|
||||
|
@ -165,29 +151,18 @@ class _BorderContainer extends StatefulWidget {
|
|||
}
|
||||
|
||||
class _BorderContainerState extends State<_BorderContainer> with TickerProviderStateMixin {
|
||||
static const Duration _kFocusInDuration = Duration(milliseconds: 45);
|
||||
static const Duration _kFocusOutDuration = Duration(milliseconds: 15);
|
||||
static const Duration _kHoverDuration = Duration(milliseconds: 15);
|
||||
|
||||
AnimationController _controller;
|
||||
AnimationController _focusColorController;
|
||||
AnimationController _hoverColorController;
|
||||
Animation<double> _borderAnimation;
|
||||
_InputBorderTween _border;
|
||||
Animation<double> _focusAnimation;
|
||||
ColorTween _focusColorTween;
|
||||
Animation<double> _hoverAnimation;
|
||||
ColorTween _hoverColorTween;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_focusColorController = AnimationController(
|
||||
duration: _kFocusInDuration,
|
||||
reverseDuration: _kFocusOutDuration,
|
||||
value: widget.isFocused ? 1.0 : 0.0,
|
||||
vsync: this,
|
||||
);
|
||||
_hoverColorController = AnimationController(
|
||||
duration: _kHoverDuration,
|
||||
value: widget.isHovering ? 1.0 : 0.0,
|
||||
|
@ -205,11 +180,6 @@ class _BorderContainerState extends State<_BorderContainer> with TickerProviderS
|
|||
begin: widget.border,
|
||||
end: widget.border,
|
||||
);
|
||||
_focusAnimation = CurvedAnimation(
|
||||
parent: _focusColorController,
|
||||
curve: Curves.linear,
|
||||
);
|
||||
_focusColorTween = ColorTween(begin: Colors.transparent, end: widget.focusColor);
|
||||
_hoverAnimation = CurvedAnimation(
|
||||
parent: _hoverColorController,
|
||||
curve: Curves.linear,
|
||||
|
@ -220,7 +190,6 @@ class _BorderContainerState extends State<_BorderContainer> with TickerProviderS
|
|||
@override
|
||||
void dispose() {
|
||||
_controller.dispose();
|
||||
_focusColorController.dispose();
|
||||
_hoverColorController.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
@ -237,16 +206,6 @@ class _BorderContainerState extends State<_BorderContainer> with TickerProviderS
|
|||
..value = 0.0
|
||||
..forward();
|
||||
}
|
||||
if (widget.focusColor != oldWidget.focusColor) {
|
||||
_focusColorTween = ColorTween(begin: Colors.transparent, end: widget.focusColor);
|
||||
}
|
||||
if (widget.isFocused != oldWidget.isFocused) {
|
||||
if (widget.isFocused) {
|
||||
_focusColorController.forward();
|
||||
} else {
|
||||
_focusColorController.reverse();
|
||||
}
|
||||
}
|
||||
if (widget.hoverColor != oldWidget.hoverColor) {
|
||||
_hoverColorTween = ColorTween(begin: Colors.transparent, end: widget.hoverColor);
|
||||
}
|
||||
|
@ -266,7 +225,6 @@ class _BorderContainerState extends State<_BorderContainer> with TickerProviderS
|
|||
repaint: Listenable.merge(<Listenable>[
|
||||
_borderAnimation,
|
||||
widget.gap,
|
||||
_focusColorController,
|
||||
_hoverColorController,
|
||||
]),
|
||||
borderAnimation: _borderAnimation,
|
||||
|
@ -275,8 +233,6 @@ class _BorderContainerState extends State<_BorderContainer> with TickerProviderS
|
|||
gap: widget.gap,
|
||||
textDirection: Directionality.of(context),
|
||||
fillColor: widget.fillColor,
|
||||
focusColorTween: _focusColorTween,
|
||||
focusAnimation: _focusAnimation,
|
||||
hoverColorTween: _hoverColorTween,
|
||||
hoverAnimation: _hoverAnimation,
|
||||
),
|
||||
|
@ -1862,7 +1818,7 @@ class _InputDecoratorState extends State<InputDecorator> with TickerProviderStat
|
|||
return themeData.hintColor;
|
||||
}
|
||||
|
||||
Color _getBorderColor(ThemeData themeData) {
|
||||
Color _getDefaultBorderColor(ThemeData themeData) {
|
||||
if (isFocused) {
|
||||
switch (themeData.brightness) {
|
||||
case Brightness.dark:
|
||||
|
@ -1903,12 +1859,6 @@ class _InputDecoratorState extends State<InputDecorator> with TickerProviderStat
|
|||
return lightEnabled;
|
||||
}
|
||||
|
||||
Color _getFocusColor(ThemeData themeData) {
|
||||
if (decoration.filled == null || !decoration.filled || !decoration.enabled)
|
||||
return Colors.transparent;
|
||||
return decoration.focusColor ?? themeData.inputDecorationTheme?.focusColor ?? themeData.focusColor;
|
||||
}
|
||||
|
||||
Color _getHoverColor(ThemeData themeData) {
|
||||
if (decoration.filled == null || !decoration.filled || isFocused || !decoration.enabled)
|
||||
return Colors.transparent;
|
||||
|
@ -1973,7 +1923,7 @@ class _InputDecoratorState extends State<InputDecorator> with TickerProviderStat
|
|||
Color borderColor;
|
||||
if (decoration.enabled) {
|
||||
borderColor = decoration.errorText == null
|
||||
? _getBorderColor(themeData)
|
||||
? _getDefaultBorderColor(themeData)
|
||||
: themeData.errorColor;
|
||||
} else {
|
||||
borderColor = (decoration.filled == true && decoration.border?.isOutline != true)
|
||||
|
@ -2026,9 +1976,7 @@ class _InputDecoratorState extends State<InputDecorator> with TickerProviderStat
|
|||
gap: _borderGap,
|
||||
gapAnimation: _floatingLabelController.view,
|
||||
fillColor: _getFillColor(themeData),
|
||||
focusColor: _getFocusColor(themeData),
|
||||
hoverColor: _getHoverColor(themeData),
|
||||
isFocused: isFocused,
|
||||
isHovering: isHovering,
|
||||
);
|
||||
|
||||
|
|
|
@ -2122,7 +2122,6 @@ void main() {
|
|||
|
||||
testWidgets('InputDecorator draws and animates focusColor', (WidgetTester tester) async {
|
||||
const Color focusColor = Color(0xFF0000FF);
|
||||
const Color fillColor = Color(0x0A000000);
|
||||
const Color disabledColor = Color(0x05000000);
|
||||
const Color enabledBorderColor = Color(0x1f000000);
|
||||
|
||||
|
@ -2142,33 +2141,7 @@ void main() {
|
|||
);
|
||||
}
|
||||
|
||||
// Test filled text field.
|
||||
await pumpDecorator(focused: false);
|
||||
expect(getContainerColor(tester), equals(fillColor));
|
||||
await tester.pump(const Duration(seconds: 10));
|
||||
expect(getContainerColor(tester), equals(fillColor));
|
||||
|
||||
await pumpDecorator(focused: true);
|
||||
expect(getContainerColor(tester), equals(fillColor));
|
||||
await tester.pump(const Duration(milliseconds: 45));
|
||||
expect(getContainerColor(tester), equals(focusColor));
|
||||
|
||||
await pumpDecorator(focused: false);
|
||||
expect(getContainerColor(tester), equals(focusColor));
|
||||
await tester.pump(const Duration(milliseconds: 15));
|
||||
expect(getContainerColor(tester), equals(fillColor));
|
||||
|
||||
await pumpDecorator(focused: false, enabled: false);
|
||||
expect(getContainerColor(tester), equals(disabledColor));
|
||||
await tester.pump(const Duration(seconds: 10));
|
||||
expect(getContainerColor(tester), equals(disabledColor));
|
||||
|
||||
await pumpDecorator(focused: true, enabled: false);
|
||||
expect(getContainerColor(tester), equals(disabledColor));
|
||||
await tester.pump(const Duration(seconds: 10));
|
||||
expect(getContainerColor(tester), equals(disabledColor));
|
||||
|
||||
// Test outline text field.
|
||||
// Test outline text field default border.
|
||||
await pumpDecorator(focused: false, filled: false);
|
||||
await tester.pumpAndSettle();
|
||||
expect(getBorderColor(tester), equals(enabledBorderColor));
|
||||
|
|
Loading…
Reference in a new issue