Skip to content

F
Front-End
Unverified Commit d5c53b82 authored by M. Javad Pourqavam's avatar M. Javad Pourqavam Committed by GitHub
Browse files
Options

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

parent e39fa7a8
Hide whitespace changes
Inline Side-by-side
Showing with 82 additions and 23 deletions
packages/flutter/lib/src/material/input_decorator.dart
View file @ d5c53b82
......@@ -22,7 +22,9 @@ import 'theme_data.dart';
// Examples can assume:
// late Widget _myIcon;
const Duration _kTransitionDuration = Duration(milliseconds: 200);
// 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 Curve _kTransitionCurve = Curves.fastOutSlowIn;
const double _kFinalLabelScale = 0.75;
......@@ -192,6 +194,7 @@ class _BorderContainerState extends State<_BorderContainer> with TickerProviderS
_borderAnimation = CurvedAnimation(
parent: _controller,
curve: _kTransitionCurve,
reverseCurve: _kTransitionCurve.flipped,
);
_border = _InputBorderTween(
begin: widget.border,
......@@ -1866,8 +1869,9 @@ class InputDecorator extends StatefulWidget {
}
class _InputDecoratorState extends State<InputDecorator> with TickerProviderStateMixin {
late AnimationController _floatingLabelController;
late AnimationController _shakingLabelController;
late final AnimationController _floatingLabelController;
late final Animation<double> _floatingLabelAnimation;
late final AnimationController _shakingLabelController;
final _InputBorderGap _borderGap = _InputBorderGap();
@override
......@@ -1884,6 +1888,11 @@ 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,
......@@ -2161,7 +2170,7 @@ class _InputDecoratorState extends State<InputDecorator> with TickerProviderStat
final Widget container = _BorderContainer(
border: border,
gap: _borderGap,
gapAnimation: _floatingLabelController.view,
gapAnimation: _floatingLabelAnimation,
fillColor: _getFillColor(themeData, defaults),
hoverColor: _getHoverColor(themeData),
isHovering: isHovering,
......@@ -2341,7 +2350,7 @@ class _InputDecoratorState extends State<InputDecorator> with TickerProviderStat
isCollapsed: decoration.isCollapsed,
floatingLabelHeight: floatingLabelHeight,
floatingLabelAlignment: decoration.floatingLabelAlignment!,
floatingLabelProgress: _floatingLabelController.value,
floatingLabelProgress: _floatingLabelAnimation.value,
border: border,
borderGap: _borderGap,
alignLabelWithHint: decoration.alignLabelWithHint ?? false,
......
packages/flutter/lib/src/widgets/text_selection.dart
View file @ d5c53b82
......@@ -2510,6 +2510,7 @@ class _TextSelectionGestureDetectorState extends State<TextSelectionGestureDetec
if (!_isDoubleTap) {
widget.onSingleTapUp?.call(details);
_lastTapOffset = details.globalPosition;
_doubleTapTimer?.cancel();
_doubleTapTimer = Timer(kDoubleTapTimeout, _doubleTapTimeout);
}
_isDoubleTap = false;
......
packages/flutter/test/material/input_decorator_test.dart
View file @ d5c53b82
......@@ -265,7 +265,7 @@ void main() {
);
// The label animates downwards from it's initial position
// above the input text. The animation's duration is 200ms.
// above the input text. The animation's duration is 167ms.
{
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 200ms.
// above the input text. The animation's duration is 167ms.
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 200ms.
// above the input text. The animation's duration is 167ms.
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 200ms.
// above the input text. The animation's duration is 167ms.
{
await tester.pump(const Duration(milliseconds: 50));
final double labelY50ms = tester.getTopLeft(find.byKey(key)).dy;
......@@ -720,6 +720,55 @@ 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 {
......@@ -1013,7 +1062,7 @@ void main() {
);
// The hint's opacity animates from 0.0 to 1.0.
// The animation's duration is 200ms.
// The animation's duration is 167ms.
{
await tester.pump(const Duration(milliseconds: 50));
final double hintOpacity50ms = getOpacity(tester, 'hint');
......@@ -1047,7 +1096,7 @@ void main() {
);
// The hint's opacity animates from 1.0 to 0.0.
// The animation's duration is 200ms.
// The animation's duration is 167ms.
{
await tester.pump(const Duration(milliseconds: 50));
final double hintOpacity50ms = getOpacity(tester, 'hint');
......@@ -1968,7 +2017,7 @@ void main() {
);
// The hint's opacity animates from 0.0 to 1.0.
// The animation's duration is 200ms.
// The animation's duration is 167ms.
{
await tester.pump(const Duration(milliseconds: 50));
final double hintOpacity50ms = getOpacity(tester, 'hint');
......@@ -2003,7 +2052,7 @@ void main() {
);
// The hint's opacity animates from 1.0 to 0.0.
// The animation's duration is 200ms.
// The animation's duration is 167ms.
{
await tester.pump(const Duration(milliseconds: 50));
final double hintOpacity50ms = getOpacity(tester, 'hint');
......@@ -2065,7 +2114,7 @@ void main() {
);
// The hint's opacity animates from 0.0 to 1.0.
// The animation's duration is 200ms.
// The animation's duration is 167ms.
{
await tester.pump(const Duration(milliseconds: 50));
final double hintOpacity50ms = getOpacity(tester, 'hint');
......@@ -2100,7 +2149,7 @@ void main() {
);
// The hint's opacity animates from 1.0 to 0.0.
// The animation's duration is 200ms.
// The animation's duration is 167ms.
{
await tester.pump(const Duration(milliseconds: 50));
final double hintOpacity50ms = getOpacity(tester, 'hint');
......@@ -4414,17 +4463,17 @@ void main() {
await pumpDecorator(hovering: true, filled: false);
expect(getBorderColor(tester), equals(enabledBorderColor));
await tester.pump(const Duration(milliseconds: 200));
await tester.pump(const Duration(milliseconds: 167));
expect(getBorderColor(tester), equals(blendedHoverColor));
await pumpDecorator(hovering: false, filled: false);
expect(getBorderColor(tester), equals(blendedHoverColor));
await tester.pump(const Duration(milliseconds: 200));
await tester.pump(const Duration(milliseconds: 167));
expect(getBorderColor(tester), equals(enabledBorderColor));
await pumpDecorator(hovering: false, filled: false, enabled: false);
expect(getBorderColor(tester), equals(enabledBorderColor));
await tester.pump(const Duration(milliseconds: 200));
await tester.pump(const Duration(milliseconds: 167));
expect(getBorderColor(tester), equals(disabledColor));
await pumpDecorator(hovering: true, filled: false, enabled: false);
......@@ -4468,17 +4517,17 @@ void main() {
await pumpDecorator(focused: true, filled: false);
expect(getBorderColor(tester), equals(enabledBorderColor));
await tester.pump(const Duration(milliseconds: 200));
await tester.pump(const Duration(milliseconds: 167));
expect(getBorderColor(tester), equals(focusColor));
await pumpDecorator(focused: false, filled: false);
expect(getBorderColor(tester), equals(focusColor));
await tester.pump(const Duration(milliseconds: 200));
await tester.pump(const Duration(milliseconds: 167));
expect(getBorderColor(tester), equals(enabledBorderColor));
await pumpDecorator(focused: false, filled: false, enabled: false);
expect(getBorderColor(tester), equals(enabledBorderColor));
await tester.pump(const Duration(milliseconds: 200));
await tester.pump(const Duration(milliseconds: 167));
expect(getBorderColor(tester), equals(disabledColor));
await pumpDecorator(focused: true, filled: false, enabled: false);
......@@ -5562,8 +5611,8 @@ void main() {
// Click for Focus.
await tester.tap(find.byType(TextField));
// Default animation duration is 200 millisecond.
await tester.pumpFrames(target, const Duration(milliseconds: 100));
// Default animation duration is 167ms.
await tester.pumpFrames(target, const Duration(milliseconds: 80));
expect(getLabelRect(tester).width, greaterThan(labelWidth));
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

HIAST - GitLab