development/flutter
development/flutter
1
0
Fork 0
mirror of https://github.com/flutter/flutter synced 2024-10-13 11:42:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Turn off container focus highlight for filled text fields. (#33062)

Browse source 
This turns off focus highlight for filled text fields, since it turns out not to be to spec.
This commit is contained in:
Greg Spencer 2019-05-20 13:39:53 -07:00 committed by GitHub
parent e2042bae6d
commit d0c603d0bb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 4 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
packages/flutter/lib/src/material/input_decorator.dart
View file

@ -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,
);

29
packages/flutter/test/material/input_decorator_test.dart
View file

@ -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));