Skip to content

Commit

Permalink
Revert "Fix text field label animation duration and curve" (flutter#1…
Browse files Browse the repository at this point in the history 
…14646)

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

This reverts commit d5c53b8.

* Add doubleTapTimer.cancel back
  • Loading branch information
Casey Hillers committed Nov 4, 2022
1 parent 125b9a7 commit 9f6090c
Show file tree
Hide file tree
Showing 2 changed files with 23 additions and 81 deletions.
19 changes: 5 additions & 14 deletions packages/flutter/lib/src/material/input_decorator.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,7 @@ import 'theme_data.dart';
// Examples can assume:
// late Widget _myIcon;

// The duration value extracted from:
// 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 Duration _kTransitionDuration = Duration(milliseconds: 200);
const Curve _kTransitionCurve = Curves.fastOutSlowIn;
const double _kFinalLabelScale = 0.75;

Expand Down Expand Up @@ -194,7 +192,6 @@ class _BorderContainerState extends State<_BorderContainer> with TickerProviderS
_borderAnimation = CurvedAnimation(
parent: _controller,
curve: _kTransitionCurve,
reverseCurve: _kTransitionCurve.flipped,
);
_border = _InputBorderTween(
begin: widget.border,
Expand Down Expand Up @@ -1869,9 +1866,8 @@ class InputDecorator extends StatefulWidget {
}

class _InputDecoratorState extends State<InputDecorator> with TickerProviderStateMixin {
late final AnimationController _floatingLabelController;
late final Animation<double> _floatingLabelAnimation;
late final AnimationController _shakingLabelController;
late AnimationController _floatingLabelController;
late AnimationController _shakingLabelController;
final _InputBorderGap _borderGap = _InputBorderGap();

@override
Expand All @@ -1888,11 +1884,6 @@ class _InputDecoratorState extends State<InputDecorator> with TickerProviderStat
value: labelIsInitiallyFloating ? 1.0 : 0.0,
);
_floatingLabelController.addListener(_handleChange);
_floatingLabelAnimation = CurvedAnimation(
parent: _floatingLabelController,
curve: _kTransitionCurve,
reverseCurve: _kTransitionCurve.flipped,
);

_shakingLabelController = AnimationController(
duration: _kTransitionDuration,
Expand Down Expand Up @@ -2170,7 +2161,7 @@ class _InputDecoratorState extends State<InputDecorator> with TickerProviderStat
final Widget container = _BorderContainer(
border: border,
gap: _borderGap,
gapAnimation: _floatingLabelAnimation,
gapAnimation: _floatingLabelController.view,
fillColor: _getFillColor(themeData, defaults),
hoverColor: _getHoverColor(themeData),
isHovering: isHovering,
Expand Down Expand Up @@ -2350,7 +2341,7 @@ class _InputDecoratorState extends State<InputDecorator> with TickerProviderStat
isCollapsed: decoration.isCollapsed,
floatingLabelHeight: floatingLabelHeight,
floatingLabelAlignment: decoration.floatingLabelAlignment!,
floatingLabelProgress: _floatingLabelAnimation.value,
floatingLabelProgress: _floatingLabelController.value,
border: border,
borderGap: _borderGap,
alignLabelWithHint: decoration.alignLabelWithHint ?? false,
Expand Down
85 changes: 18 additions & 67 deletions packages/flutter/test/material/input_decorator_test.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -265,7 +265,7 @@ void main() {
);

// 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));
final double labelY50ms = tester.getTopLeft(find.text('label')).dy;
Expand Down Expand Up @@ -296,7 +296,7 @@ void main() {
);

// 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));
final double labelY50ms = tester.getTopLeft(find.text('label')).dy;
expect(labelY50ms, inExclusiveRange(12.0, 28.0));
Expand Down Expand Up @@ -563,7 +563,7 @@ void main() {
);

// 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));
final double labelY50ms = tester.getTopLeft(find.byKey(key)).dy;
expect(labelY50ms, inExclusiveRange(12.0, 20.0));
Expand Down Expand Up @@ -604,7 +604,7 @@ void main() {
);

// 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));
final double labelY50ms = tester.getTopLeft(find.byKey(key)).dy;
Expand Down Expand Up @@ -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('expands false', () {
testWidgets('multiline TextField no-strut', (WidgetTester tester) async {
Expand Down Expand Up @@ -1062,7 +1013,7 @@ void main() {
);

// 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));
final double hintOpacity50ms = getOpacity(tester, 'hint');
Expand Down Expand Up @@ -1096,7 +1047,7 @@ void main() {
);

// 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));
final double hintOpacity50ms = getOpacity(tester, 'hint');
Expand Down Expand Up @@ -2017,7 +1968,7 @@ void main() {
);

// 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));
final double hintOpacity50ms = getOpacity(tester, 'hint');
Expand Down Expand Up @@ -2052,7 +2003,7 @@ void main() {
);

// 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));
final double hintOpacity50ms = getOpacity(tester, 'hint');
Expand Down Expand Up @@ -2114,7 +2065,7 @@ void main() {
);

// 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));
final double hintOpacity50ms = getOpacity(tester, 'hint');
Expand Down Expand Up @@ -2149,7 +2100,7 @@ void main() {
);

// 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));
final double hintOpacity50ms = getOpacity(tester, 'hint');
Expand Down Expand Up @@ -4463,17 +4414,17 @@ void main() {

await pumpDecorator(hovering: true, filled: false);
expect(getBorderColor(tester), equals(enabledBorderColor));
await tester.pump(const Duration(milliseconds: 167));
await tester.pump(const Duration(milliseconds: 200));
expect(getBorderColor(tester), equals(blendedHoverColor));

await pumpDecorator(hovering: false, filled: false);
expect(getBorderColor(tester), equals(blendedHoverColor));
await tester.pump(const Duration(milliseconds: 167));
await tester.pump(const Duration(milliseconds: 200));
expect(getBorderColor(tester), equals(enabledBorderColor));

await pumpDecorator(hovering: false, filled: false, enabled: false);
expect(getBorderColor(tester), equals(enabledBorderColor));
await tester.pump(const Duration(milliseconds: 167));
await tester.pump(const Duration(milliseconds: 200));
expect(getBorderColor(tester), equals(disabledColor));

await pumpDecorator(hovering: true, filled: false, enabled: false);
Expand Down Expand Up @@ -4517,17 +4468,17 @@ void main() {

await pumpDecorator(focused: true, filled: false);
expect(getBorderColor(tester), equals(enabledBorderColor));
await tester.pump(const Duration(milliseconds: 167));
await tester.pump(const Duration(milliseconds: 200));
expect(getBorderColor(tester), equals(focusColor));

await pumpDecorator(focused: false, filled: false);
expect(getBorderColor(tester), equals(focusColor));
await tester.pump(const Duration(milliseconds: 167));
await tester.pump(const Duration(milliseconds: 200));
expect(getBorderColor(tester), equals(enabledBorderColor));

await pumpDecorator(focused: false, filled: false, enabled: false);
expect(getBorderColor(tester), equals(enabledBorderColor));
await tester.pump(const Duration(milliseconds: 167));
await tester.pump(const Duration(milliseconds: 200));
expect(getBorderColor(tester), equals(disabledColor));

await pumpDecorator(focused: true, filled: false, enabled: false);
Expand Down Expand Up @@ -5611,8 +5562,8 @@ void main() {

// Click for Focus.
await tester.tap(find.byType(TextField));
// Default animation duration is 167ms.
await tester.pumpFrames(target, const Duration(milliseconds: 80));
// Default animation duration is 200 millisecond.
await tester.pumpFrames(target, const Duration(milliseconds: 100));

expect(getLabelRect(tester).width, greaterThan(labelWidth));
expect(getLabelRect(tester).width, lessThanOrEqualTo(floatedLabelWidth));
Expand Down

0 comments on commit 9f6090c

Please sign in to comment.