firka/flutter
firka/flutter
5
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

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

This reverts commit d5c53b82e910d157b0e041c635904a970f473c62.

* Add doubleTapTimer.cancel back
This commit is contained in:
Casey Hillers 2022-11-03 18:47:54 -07:00 committed by GitHub
parent 125b9a769e
commit 9f6090c9ad
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 23 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
packages/flutter/lib/src/material/input_decorator.dart
View File

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

85
packages/flutter/test/material/input_decorator_test.dart
View File

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