Unverified Commit 9f6090c9 authored by Casey Hillers's avatar Casey Hillers Committed by GitHub

Revert "Fix text field label animation duration and curve" (#114646)

* Revert "Fix text field label animation duration and curve (#105966)"

This reverts commit d5c53b82.

* Add doubleTapTimer.cancel back
parent 125b9a76
...@@ -22,9 +22,7 @@ import 'theme_data.dart'; ...@@ -22,9 +22,7 @@ import 'theme_data.dart';
// Examples can assume: // Examples can assume:
// late Widget _myIcon; // late Widget _myIcon;
// The duration value extracted from: const Duration _kTransitionDuration = Duration(milliseconds: 200);
// https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/textfield/TextInputLayout.java
const Duration _kTransitionDuration = Duration(milliseconds: 167);
const Curve _kTransitionCurve = Curves.fastOutSlowIn; const Curve _kTransitionCurve = Curves.fastOutSlowIn;
const double _kFinalLabelScale = 0.75; const double _kFinalLabelScale = 0.75;
...@@ -194,7 +192,6 @@ class _BorderContainerState extends State<_BorderContainer> with TickerProviderS ...@@ -194,7 +192,6 @@ class _BorderContainerState extends State<_BorderContainer> with TickerProviderS
_borderAnimation = CurvedAnimation( _borderAnimation = CurvedAnimation(
parent: _controller, parent: _controller,
curve: _kTransitionCurve, curve: _kTransitionCurve,
reverseCurve: _kTransitionCurve.flipped,
); );
_border = _InputBorderTween( _border = _InputBorderTween(
begin: widget.border, begin: widget.border,
...@@ -1869,9 +1866,8 @@ class InputDecorator extends StatefulWidget { ...@@ -1869,9 +1866,8 @@ class InputDecorator extends StatefulWidget {
} }
class _InputDecoratorState extends State<InputDecorator> with TickerProviderStateMixin { class _InputDecoratorState extends State<InputDecorator> with TickerProviderStateMixin {
late final AnimationController _floatingLabelController; late AnimationController _floatingLabelController;
late final Animation<double> _floatingLabelAnimation; late AnimationController _shakingLabelController;
late final AnimationController _shakingLabelController;
final _InputBorderGap _borderGap = _InputBorderGap(); final _InputBorderGap _borderGap = _InputBorderGap();
@override @override
...@@ -1888,11 +1884,6 @@ class _InputDecoratorState extends State<InputDecorator> with TickerProviderStat ...@@ -1888,11 +1884,6 @@ class _InputDecoratorState extends State<InputDecorator> with TickerProviderStat
value: labelIsInitiallyFloating ? 1.0 : 0.0, value: labelIsInitiallyFloating ? 1.0 : 0.0,
); );
_floatingLabelController.addListener(_handleChange); _floatingLabelController.addListener(_handleChange);
_floatingLabelAnimation = CurvedAnimation(
parent: _floatingLabelController,
curve: _kTransitionCurve,
reverseCurve: _kTransitionCurve.flipped,
);
_shakingLabelController = AnimationController( _shakingLabelController = AnimationController(
duration: _kTransitionDuration, duration: _kTransitionDuration,
...@@ -2170,7 +2161,7 @@ class _InputDecoratorState extends State<InputDecorator> with TickerProviderStat ...@@ -2170,7 +2161,7 @@ class _InputDecoratorState extends State<InputDecorator> with TickerProviderStat
final Widget container = _BorderContainer( final Widget container = _BorderContainer(
border: border, border: border,
gap: _borderGap, gap: _borderGap,
gapAnimation: _floatingLabelAnimation, gapAnimation: _floatingLabelController.view,
fillColor: _getFillColor(themeData, defaults), fillColor: _getFillColor(themeData, defaults),
hoverColor: _getHoverColor(themeData), hoverColor: _getHoverColor(themeData),
isHovering: isHovering, isHovering: isHovering,
...@@ -2350,7 +2341,7 @@ class _InputDecoratorState extends State<InputDecorator> with TickerProviderStat ...@@ -2350,7 +2341,7 @@ class _InputDecoratorState extends State<InputDecorator> with TickerProviderStat
isCollapsed: decoration.isCollapsed, isCollapsed: decoration.isCollapsed,
floatingLabelHeight: floatingLabelHeight, floatingLabelHeight: floatingLabelHeight,
floatingLabelAlignment: decoration.floatingLabelAlignment!, floatingLabelAlignment: decoration.floatingLabelAlignment!,
floatingLabelProgress: _floatingLabelAnimation.value, floatingLabelProgress: _floatingLabelController.value,
border: border, border: border,
borderGap: _borderGap, borderGap: _borderGap,
alignLabelWithHint: decoration.alignLabelWithHint ?? false, alignLabelWithHint: decoration.alignLabelWithHint ?? false,
......
...@@ -265,7 +265,7 @@ void main() { ...@@ -265,7 +265,7 @@ void main() {
); );
// The label animates downwards from it's initial position // The label animates downwards from it's initial position
// above the input text. The animation's duration is 167ms. // above the input text. The animation's duration is 200ms.
{ {
await tester.pump(const Duration(milliseconds: 50)); await tester.pump(const Duration(milliseconds: 50));
final double labelY50ms = tester.getTopLeft(find.text('label')).dy; final double labelY50ms = tester.getTopLeft(find.text('label')).dy;
...@@ -296,7 +296,7 @@ void main() { ...@@ -296,7 +296,7 @@ void main() {
); );
// The label animates upwards from it's initial position // The label animates upwards from it's initial position
// above the input text. The animation's duration is 167ms. // above the input text. The animation's duration is 200ms.
await tester.pump(const Duration(milliseconds: 50)); await tester.pump(const Duration(milliseconds: 50));
final double labelY50ms = tester.getTopLeft(find.text('label')).dy; final double labelY50ms = tester.getTopLeft(find.text('label')).dy;
expect(labelY50ms, inExclusiveRange(12.0, 28.0)); expect(labelY50ms, inExclusiveRange(12.0, 28.0));
...@@ -563,7 +563,7 @@ void main() { ...@@ -563,7 +563,7 @@ void main() {
); );
// The label animates downwards from it's initial position // The label animates downwards from it's initial position
// above the input text. The animation's duration is 167ms. // above the input text. The animation's duration is 200ms.
await tester.pump(const Duration(milliseconds: 50)); await tester.pump(const Duration(milliseconds: 50));
final double labelY50ms = tester.getTopLeft(find.byKey(key)).dy; final double labelY50ms = tester.getTopLeft(find.byKey(key)).dy;
expect(labelY50ms, inExclusiveRange(12.0, 20.0)); expect(labelY50ms, inExclusiveRange(12.0, 20.0));
...@@ -604,7 +604,7 @@ void main() { ...@@ -604,7 +604,7 @@ void main() {
); );
// The label animates upwards from it's initial position // The label animates upwards from it's initial position
// above the input text. The animation's duration is 167ms. // above the input text. The animation's duration is 200ms.
{ {
await tester.pump(const Duration(milliseconds: 50)); await tester.pump(const Duration(milliseconds: 50));
final double labelY50ms = tester.getTopLeft(find.byKey(key)).dy; final double labelY50ms = tester.getTopLeft(find.byKey(key)).dy;
...@@ -720,55 +720,6 @@ void main() { ...@@ -720,55 +720,6 @@ void main() {
}); });
testWidgets('InputDecorator floating label animation duration and curve', (WidgetTester tester) async {
Future<void> pumpInputDecorator({
required bool isFocused,
}) async {
return tester.pumpWidget(
buildInputDecorator(
isEmpty: true,
isFocused: isFocused,
decoration: const InputDecoration(
labelText: 'label',
floatingLabelBehavior: FloatingLabelBehavior.auto,
),
),
);
}
await pumpInputDecorator(isFocused: false);
expect(tester.getTopLeft(find.text('label')).dy, 20.0);
// The label animates upwards and scales down.
// The animation duration is 167ms and the curve is fastOutSlowIn.
await pumpInputDecorator(isFocused: true);
await tester.pump(const Duration(milliseconds: 42));
expect(tester.getTopLeft(find.text('label')).dy, closeTo(18.06, 0.5));
await tester.pump(const Duration(milliseconds: 42));
expect(tester.getTopLeft(find.text('label')).dy, closeTo(13.78, 0.5));
await tester.pump(const Duration(milliseconds: 42));
expect(tester.getTopLeft(find.text('label')).dy, closeTo(12.31, 0.5));
await tester.pump(const Duration(milliseconds: 41));
expect(tester.getTopLeft(find.text('label')).dy, 12.0);
// If the animation changes direction without first reaching the
// AnimationStatus.completed or AnimationStatus.dismissed status,
// the CurvedAnimation stays on the same curve in the opposite direction.
// The pumpAndSettle is used to prevent this behavior.
await tester.pumpAndSettle();
// The label animates downwards and scales up.
// The animation duration is 167ms and the curve is fastOutSlowIn.
await pumpInputDecorator(isFocused: false);
await tester.pump(const Duration(milliseconds: 42));
expect(tester.getTopLeft(find.text('label')).dy, closeTo(13.94, 0.5));
await tester.pump(const Duration(milliseconds: 42));
expect(tester.getTopLeft(find.text('label')).dy, closeTo(18.22, 0.5));
await tester.pump(const Duration(milliseconds: 42));
expect(tester.getTopLeft(find.text('label')).dy, closeTo(19.69, 0.5));
await tester.pump(const Duration(milliseconds: 41));
expect(tester.getTopLeft(find.text('label')).dy, 20.0);
});
group('alignLabelWithHint', () { group('alignLabelWithHint', () {
group('expands false', () { group('expands false', () {
testWidgets('multiline TextField no-strut', (WidgetTester tester) async { testWidgets('multiline TextField no-strut', (WidgetTester tester) async {
...@@ -1062,7 +1013,7 @@ void main() { ...@@ -1062,7 +1013,7 @@ void main() {
); );
// The hint's opacity animates from 0.0 to 1.0. // The hint's opacity animates from 0.0 to 1.0.
// The animation's duration is 167ms. // The animation's duration is 200ms.
{ {
await tester.pump(const Duration(milliseconds: 50)); await tester.pump(const Duration(milliseconds: 50));
final double hintOpacity50ms = getOpacity(tester, 'hint'); final double hintOpacity50ms = getOpacity(tester, 'hint');
...@@ -1096,7 +1047,7 @@ void main() { ...@@ -1096,7 +1047,7 @@ void main() {
); );
// The hint's opacity animates from 1.0 to 0.0. // The hint's opacity animates from 1.0 to 0.0.
// The animation's duration is 167ms. // The animation's duration is 200ms.
{ {
await tester.pump(const Duration(milliseconds: 50)); await tester.pump(const Duration(milliseconds: 50));
final double hintOpacity50ms = getOpacity(tester, 'hint'); final double hintOpacity50ms = getOpacity(tester, 'hint');
...@@ -2017,7 +1968,7 @@ void main() { ...@@ -2017,7 +1968,7 @@ void main() {
); );
// The hint's opacity animates from 0.0 to 1.0. // The hint's opacity animates from 0.0 to 1.0.
// The animation's duration is 167ms. // The animation's duration is 200ms.
{ {
await tester.pump(const Duration(milliseconds: 50)); await tester.pump(const Duration(milliseconds: 50));
final double hintOpacity50ms = getOpacity(tester, 'hint'); final double hintOpacity50ms = getOpacity(tester, 'hint');
...@@ -2052,7 +2003,7 @@ void main() { ...@@ -2052,7 +2003,7 @@ void main() {
); );
// The hint's opacity animates from 1.0 to 0.0. // The hint's opacity animates from 1.0 to 0.0.
// The animation's duration is 167ms. // The animation's duration is 200ms.
{ {
await tester.pump(const Duration(milliseconds: 50)); await tester.pump(const Duration(milliseconds: 50));
final double hintOpacity50ms = getOpacity(tester, 'hint'); final double hintOpacity50ms = getOpacity(tester, 'hint');
...@@ -2114,7 +2065,7 @@ void main() { ...@@ -2114,7 +2065,7 @@ void main() {
); );
// The hint's opacity animates from 0.0 to 1.0. // The hint's opacity animates from 0.0 to 1.0.
// The animation's duration is 167ms. // The animation's duration is 200ms.
{ {
await tester.pump(const Duration(milliseconds: 50)); await tester.pump(const Duration(milliseconds: 50));
final double hintOpacity50ms = getOpacity(tester, 'hint'); final double hintOpacity50ms = getOpacity(tester, 'hint');
...@@ -2149,7 +2100,7 @@ void main() { ...@@ -2149,7 +2100,7 @@ void main() {
); );
// The hint's opacity animates from 1.0 to 0.0. // The hint's opacity animates from 1.0 to 0.0.
// The animation's duration is 167ms. // The animation's duration is 200ms.
{ {
await tester.pump(const Duration(milliseconds: 50)); await tester.pump(const Duration(milliseconds: 50));
final double hintOpacity50ms = getOpacity(tester, 'hint'); final double hintOpacity50ms = getOpacity(tester, 'hint');
...@@ -4463,17 +4414,17 @@ void main() { ...@@ -4463,17 +4414,17 @@ void main() {
await pumpDecorator(hovering: true, filled: false); await pumpDecorator(hovering: true, filled: false);
expect(getBorderColor(tester), equals(enabledBorderColor)); expect(getBorderColor(tester), equals(enabledBorderColor));
await tester.pump(const Duration(milliseconds: 167)); await tester.pump(const Duration(milliseconds: 200));
expect(getBorderColor(tester), equals(blendedHoverColor)); expect(getBorderColor(tester), equals(blendedHoverColor));
await pumpDecorator(hovering: false, filled: false); await pumpDecorator(hovering: false, filled: false);
expect(getBorderColor(tester), equals(blendedHoverColor)); expect(getBorderColor(tester), equals(blendedHoverColor));
await tester.pump(const Duration(milliseconds: 167)); await tester.pump(const Duration(milliseconds: 200));
expect(getBorderColor(tester), equals(enabledBorderColor)); expect(getBorderColor(tester), equals(enabledBorderColor));
await pumpDecorator(hovering: false, filled: false, enabled: false); await pumpDecorator(hovering: false, filled: false, enabled: false);
expect(getBorderColor(tester), equals(enabledBorderColor)); expect(getBorderColor(tester), equals(enabledBorderColor));
await tester.pump(const Duration(milliseconds: 167)); await tester.pump(const Duration(milliseconds: 200));
expect(getBorderColor(tester), equals(disabledColor)); expect(getBorderColor(tester), equals(disabledColor));
await pumpDecorator(hovering: true, filled: false, enabled: false); await pumpDecorator(hovering: true, filled: false, enabled: false);
...@@ -4517,17 +4468,17 @@ void main() { ...@@ -4517,17 +4468,17 @@ void main() {
await pumpDecorator(focused: true, filled: false); await pumpDecorator(focused: true, filled: false);
expect(getBorderColor(tester), equals(enabledBorderColor)); expect(getBorderColor(tester), equals(enabledBorderColor));
await tester.pump(const Duration(milliseconds: 167)); await tester.pump(const Duration(milliseconds: 200));
expect(getBorderColor(tester), equals(focusColor)); expect(getBorderColor(tester), equals(focusColor));
await pumpDecorator(focused: false, filled: false); await pumpDecorator(focused: false, filled: false);
expect(getBorderColor(tester), equals(focusColor)); expect(getBorderColor(tester), equals(focusColor));
await tester.pump(const Duration(milliseconds: 167)); await tester.pump(const Duration(milliseconds: 200));
expect(getBorderColor(tester), equals(enabledBorderColor)); expect(getBorderColor(tester), equals(enabledBorderColor));
await pumpDecorator(focused: false, filled: false, enabled: false); await pumpDecorator(focused: false, filled: false, enabled: false);
expect(getBorderColor(tester), equals(enabledBorderColor)); expect(getBorderColor(tester), equals(enabledBorderColor));
await tester.pump(const Duration(milliseconds: 167)); await tester.pump(const Duration(milliseconds: 200));
expect(getBorderColor(tester), equals(disabledColor)); expect(getBorderColor(tester), equals(disabledColor));
await pumpDecorator(focused: true, filled: false, enabled: false); await pumpDecorator(focused: true, filled: false, enabled: false);
...@@ -5611,8 +5562,8 @@ void main() { ...@@ -5611,8 +5562,8 @@ void main() {
// Click for Focus. // Click for Focus.
await tester.tap(find.byType(TextField)); await tester.tap(find.byType(TextField));
// Default animation duration is 167ms. // Default animation duration is 200 millisecond.
await tester.pumpFrames(target, const Duration(milliseconds: 80)); await tester.pumpFrames(target, const Duration(milliseconds: 100));
expect(getLabelRect(tester).width, greaterThan(labelWidth)); expect(getLabelRect(tester).width, greaterThan(labelWidth));
expect(getLabelRect(tester).width, lessThanOrEqualTo(floatedLabelWidth)); expect(getLabelRect(tester).width, lessThanOrEqualTo(floatedLabelWidth));
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment