Fix `ReorderableList` items jumping when drag direction reverses mid-animation #173241

lukemmtt · 2025-08-04T18:55:59Z

When rapidly dragging items in a ReorderableList before animations complete, items would jump to their expected positions rather than smoothly transitioning.

Problem

The issue occurs when a reorder animation is interrupted by starting a new drag operation. The interrupted animation would reset to the starting position of the original animation rather than capturing the current animated position, causing a visual jump.

Solution

This PR fixes the issue by:

Storing the previous target offset before updating to a new target
When an animation is interrupted, calculating the actual current position based on the animation's progress
Using this calculated position as the new starting point for the next animation

This PR is part of a series of ReorderableList enhancements I've developed for TimeFinder:

Fixes #173243

Code Changes

// Before
_startOffset = offset;

// After  
final double currentAnimValue = Curves.easeInOut.transform(_offsetAnimation\!.value);
final Offset currentPosition = Offset.lerp(_startOffset, previousTarget, currentAnimValue)\!;
_startOffset = currentPosition;

This ensures smooth transitions without visual jumping, making rapid reordering gestures feel more responsive and natural.

Pre-launch Checklist

I read the Contributor Guide and followed the process outlined there for submitting PRs.
I read the Tree Hygiene page, which explains my responsibilities.
I read and followed the Flutter Style Guide, including Features we expect every widget to implement.
I listed at least one issue that this PR fixes in the description above.
I added new tests to check the change I am making, or this PR is test-exempt.
I followed the breaking change policy and added migration guide as needed.
All existing and new tests are passing.
The analyzer (flutter analyze --flutter-repo) does not report any problems on my PR.
I am willing to follow-up on review comments in a timely manner.

gemini-code-assist

Code Review

The pull request correctly fixes an animation jump issue in ReorderableList when an ongoing animation is interrupted. The fix involves calculating the item's current visual position and starting the new animation from there, which prevents the jump. A new test case is added to cover this scenario. My review includes suggestions to make the new test more robust by improving its assertions and to remove a redundant loop to make it more concise and efficient.

packages/flutter/test/widgets/reorderable_list_test.dart

Piinks

Hey @lukemmtt thanks for sending another PR! Really appreciate the changes you are putting into this widget. 🙌
It looks like there are some failing tests here currently, can you take a look?

lukemmtt · 2025-08-06T22:51:16Z

@Piinks Glad to help! And for sure, checking these now actually. Thanks for the attention to these PRs!

lukemmtt · 2025-08-07T02:42:14Z

Lints fixed 👍🏻

Piinks · 2025-08-11T22:18:31Z

packages/flutter/test/widgets/reorderable_list_test.dart

+    // If it jumps due to the bug, it will be at Y=108
+    // With correct behavior, it should still be close to its starting position
+    if (item1Y < 120 && item1Y > 90) {
+      fail('Animation jumping detected! Item1 jumped to Y=$item1Y when crossing threshold');


It looks like this is currently failing.

Should be resolved now, I think

flutter-dashboard · 2025-08-31T22:20:33Z

This pull request executed golden file tests, but it has not been updated in a while (20+ days). Test results from Gold expire after as many days, so this pull request will need to be updated with a fresh commit in order to get results from Gold.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

Piinks · 2025-09-26T21:56:19Z

Hey @lukemmtt do you have plans to return to this change?

flutter-dashboard · 2025-09-27T15:26:09Z

This pull request has been changed to a draft. The currently pending flutter-gold status will not be able to resolve until a new commit is pushed or the change is marked ready for review again.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

lukemmtt · 2025-09-27T15:54:36Z

@Piinks Thanks for the follow-up, and yes—happy to revisit this one!

I've just done some edits, seems to be passing now locally, but I'll keep an eye on the CI checks in case my environment isn't set up perfectly.

Piinks · 2025-10-07T23:22:48Z

It looks like the failure was resolved, thank you!
Can you rebase with the tip of tree to resolve the conflicts? I think we are ready to get this in! 🎊

lukemmtt · 2025-10-08T02:15:52Z

@Piinks Should be good now, let me know, thank you!

Piinks

LGTM! Thank you!

Piinks · 2025-10-22T20:24:45Z

The google testing failures appear unrelated, rebasing to kick off another run.

…imation

Piinks · 2025-11-04T23:30:14Z

Fab! We an merge this now, safe to land. 🎊

…erses mid-animation (flutter/flutter#173241)

flutter/flutter@e5d5c01...c5e809a 2025-11-06 [email protected] Remove WindowingOwner.hasTopLevelWindows (flutter/flutter#178033) 2025-11-06 [email protected] Fix DropdownMenu escape key does not close the menu (flutter/flutter#178002) 2025-11-06 [email protected] Update documentation tool reference in image.dart (flutter/flutter#177782) 2025-11-06 [email protected] Roll Skia from 4eb2383d38f2 to 5c4e1352128f (5 revisions) (flutter/flutter#178094) 2025-11-06 [email protected] Revert "Refactor OverlayPortal semantics (#173005)" (flutter/flutter#178007) 2025-11-06 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Fix verified input test failure in CI (attempt 4) (#178018)" (flutter/flutter#178089) 2025-11-06 98614782+auto-submit[bot]@users.noreply.github.com Reverts "[web] Unify Surface code between Skwasm and CanvasKit (#177138)" (flutter/flutter#178085) 2025-11-05 [email protected] Fix verified input test failure in CI (attempt 4) (flutter/flutter#178018) 2025-11-05 [email protected] fix: inconsistent horizontal spacing between hours and mins in time picker for non-english language (flutter/flutter#173706) 2025-11-05 [email protected] Roll Fuchsia Linux SDK from mpsxF1gd-jbKNvmpm... to cm88aTLui5yorSGYQ... (flutter/flutter#178074) 2025-11-05 [email protected] Fix(ios): Remove arm64 exclusion to support Xcode 26 simulators (flutter/flutter#177065) 2025-11-05 [email protected] Roll Skia from 2ff897e9b440 to 4eb2383d38f2 (18 revisions) (flutter/flutter#178070) 2025-11-05 [email protected] [web] Unify Surface code between Skwasm and CanvasKit (flutter/flutter#177138) 2025-11-05 [email protected] Update more missing ninja deps (flutter/flutter#178079) 2025-11-05 [email protected] Add ninja / cmake deps to failing tests (flutter/flutter#178054) 2025-11-05 [email protected] [web] Don't add webparagraph suite to CI (flutter/flutter#177681) 2025-11-05 [email protected] Fixing broken link in engine readme (flutter/flutter#177987) 2025-11-05 [email protected] Print reason for adb command failure in verified input test (attempt 3) (flutter/flutter#178005) 2025-11-05 [email protected] Fix `ReorderableList` items jumping when drag direction reverses mid-animation (flutter/flutter#173241) 2025-11-05 [email protected] Replace deprecated `withOpacity` in `overflow_bar.0.dart‎` example (flutter/flutter#177813) 2025-11-05 [email protected] Replace deprecated `withOpacity` in `data_table.1.dart‎` example (flutter/flutter#177812) 2025-11-05 [email protected] Replace deprecated `withOpacity` in `switch.1.dart` example (flutter/flutter#177811) 2025-11-04 [email protected] Roll Skia from c89b6118266b to 2ff897e9b440 (6 revisions) (flutter/flutter#177999) 2025-11-04 [email protected] Fix verified input test in CI (attempt 2) (flutter/flutter#177961) 2025-11-04 [email protected] Replace rendering for solid color circles (both filled and stroked) to use SDFs (flutter/flutter#177482) 2025-11-04 [email protected] Roll Fuchsia Linux SDK from vxK5obzfr1X9P2kSh... to mpsxF1gd-jbKNvmpm... (flutter/flutter#177996) 2025-11-04 [email protected] Validate that platforms specified in .ci.yaml target names match the platforms defined in the platform_properties section (flutter/flutter#177523) 2025-11-04 [email protected] Roll Packages from 1a7075b to 3d926aa (6 revisions) (flutter/flutter#177998) 2025-11-04 [email protected] Remove dead code from snippet_generator (flutter/flutter#174440) If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/flutter-packages Please CC [email protected] on the revert to ensure that a human is aware of the problem. To file a bug in Packages: https://github.com/flutter/flutter/issues/new/choose To report a problem with the AutoRoller itself, please file a bug: https://issues.skia.org/issues/new?component=1389291&template=1850622 Documentation for the AutoRoller is here: https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md

…animation (flutter#173241) When rapidly dragging items in a ReorderableList before animations complete, items would jump to their expected positions rather than smoothly transitioning. ## Problem <p align="center"> <img src="https://github.com/user-attachments/assets/0efb250c-2960-4942-959f-59eccc20cefb" alt="demo2" width="250"> </p> The issue occurs when a reorder animation is interrupted by starting a new drag operation. The interrupted animation would reset to the starting position of the original animation rather than capturing the current animated position, causing a visual jump. ## Solution This PR fixes the issue by: 1. Storing the previous target offset before updating to a new target 2. When an animation is interrupted, calculating the actual current position based on the animation's progress 3. Using this calculated position as the new starting point for the next animation <p align="center"> <img src="https://github.com/user-attachments/assets/c24e4834-1c6b-41c1-8f44-17b4c79e0993" alt="demo2" width="250"> </p> This PR is part of a series of `ReorderableList` enhancements I've developed for [TimeFinder](https://timefinder.app): - flutter#172740 - flutter#172380 - flutter#172739 - flutter#172738 Fixes flutter#173243 ## Code Changes ```dart // Before _startOffset = offset; // After final double currentAnimValue = Curves.easeInOut.transform(_offsetAnimation\!.value); final Offset currentPosition = Offset.lerp(_startOffset, previousTarget, currentAnimValue)\!; _startOffset = currentPosition; ``` This ensures smooth transitions without visual jumping, making rapid reordering gestures feel more responsive and natural. ## Pre-launch Checklist - [x] I read the [Contributor Guide] and followed the process outlined there for submitting PRs. - [x] I read the [Tree Hygiene] page, which explains my responsibilities. - [x] I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement]. - [x] I listed at least one issue that this PR fixes in the description above. - [x] I added new tests to check the change I am making, or this PR is [test-exempt]. - [x] I followed the [breaking change policy] and added [migration guide] as needed. - [x] All existing and new tests are passing. - [x] The analyzer (`flutter analyze --flutter-repo`) does not report any problems on my PR. - [x] I am willing to follow-up on review comments in a timely manner. [Contributor Guide]: https://github.com/flutter/flutter/blob/master/docs/contributing/Tree-hygiene.md#overview [Tree Hygiene]: https://github.com/flutter/flutter/blob/master/docs/contributing/Tree-hygiene.md [Flutter Style Guide]: https://github.com/flutter/flutter/blob/master/docs/contributing/Style-guide-for-Flutter-repo.md [Features we expect every widget to implement]: https://github.com/flutter/flutter/blob/master/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement [test-exempt]: https://github.com/flutter/flutter/blob/master/docs/contributing/Tree-hygiene.md#tests [breaking change policy]: https://github.com/flutter/flutter/blob/master/docs/contributing/Tree-hygiene.md#handling-breaking-changes [migration guide]: https://github.com/flutter/flutter/blob/master/docs/contributing/Tree-hygiene.md#create-a-migration-guide

github-actions bot added the framework flutter/packages/flutter repository. See also f: labels. label Aug 4, 2025

lukemmtt marked this pull request as ready for review August 4, 2025 18:56

gemini-code-assist bot reviewed Aug 4, 2025

View reviewed changes

packages/flutter/test/widgets/reorderable_list_test.dart Outdated Show resolved Hide resolved

packages/flutter/test/widgets/reorderable_list_test.dart Outdated Show resolved Hide resolved

This was referenced Aug 4, 2025

Add spread-to-add gesture for inserting items in ReorderableListView #172740

Closed

Add animated item movement API to ReorderableListView #172739

Closed

Add onReorderUpdate callback to ReorderableListView #172738

Closed

lukemmtt changed the title ~~Fix ReorderableList animation jumping when interrupted~~ Fix ReorderableList animation jumping when interrupted Aug 4, 2025

lukemmtt changed the title ~~Fix ReorderableList animation jumping when interrupted~~ Fix ReorderableList items jumping when drag direction reverses mid-animation Aug 4, 2025

justinmc requested a review from Piinks August 5, 2025 22:09

lukemmtt force-pushed the fix-reorderable-animation-interruption branch from 8392ed5 to 86d441a Compare August 6, 2025 20:13

Piinks reviewed Aug 6, 2025

View reviewed changes

lukemmtt force-pushed the fix-reorderable-animation-interruption branch from 5cb48c9 to 0694c8e Compare August 6, 2025 22:53

Piinks reviewed Aug 11, 2025

View reviewed changes

lukemmtt marked this pull request as draft September 27, 2025 15:25

lukemmtt force-pushed the fix-reorderable-animation-interruption branch from 51e3948 to 49fc1fa Compare September 27, 2025 17:06

lukemmtt marked this pull request as ready for review September 27, 2025 20:52

lukemmtt requested a review from Piinks September 27, 2025 21:42

lukemmtt force-pushed the fix-reorderable-animation-interruption branch from 49fc1fa to 607a612 Compare October 8, 2025 00:20

Piinks approved these changes Oct 21, 2025

View reviewed changes

Piinks added this to Google Testing Queue Oct 22, 2025

Piinks force-pushed the fix-reorderable-animation-interruption branch from 607a612 to ee9b3b7 Compare October 22, 2025 20:24

lukemmtt added 2 commits November 3, 2025 16:52

Fix ReorderableList items jumping when drag direction reverses mid-an…

1e228e0

…imation

Add periods to the ends of test comments

132b182

Piinks force-pushed the fix-reorderable-animation-interruption branch from 49c8c78 to 132b182 Compare November 3, 2025 22:53

Piinks self-assigned this Nov 3, 2025

Piinks added the autosubmit Merge PR when tree becomes green via auto submit App label Nov 4, 2025

auto-submit bot added this pull request to the merge queue Nov 5, 2025

Merged via the queue into flutter:master with commit c652b53 Nov 5, 2025
76 of 77 checks passed

flutter-dashboard bot removed the autosubmit Merge PR when tree becomes green via auto submit App label Nov 5, 2025

github-project-automation bot moved this to Done in Google Testing Queue Nov 5, 2025

engine-flutter-autoroll mentioned this pull request Nov 5, 2025

Roll Flutter from e5d5c01850f2 to 3fd81edbf1e0 (14 revisions) flutter/packages#10364

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Nov 5, 2025

c652b5381 Fix ReorderableList items jumping when drag direction rev…

b83be5c

…erses mid-animation (flutter/flutter#173241)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Nov 5, 2025

c652b5381 Fix ReorderableList items jumping when drag direction rev…

f7eea0c

…erses mid-animation (flutter/flutter#173241)

engine-flutter-autoroll mentioned this pull request Nov 5, 2025

Roll Flutter from e5d5c01850f2 to 3fd81edbf1e0 (14 revisions) flutter/packages#10365

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Nov 6, 2025

c652b5381 Fix ReorderableList items jumping when drag direction rev…

698f7f9

…erses mid-animation (flutter/flutter#173241)

engine-flutter-autoroll mentioned this pull request Nov 6, 2025

Roll Flutter from e5d5c01850f2 to c5e809a998fe (29 revisions) flutter/packages#10369

Merged

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Nov 6, 2025

c652b5381 Fix ReorderableList items jumping when drag direction rev…

8189f0b

…erses mid-animation (flutter/flutter#173241)

engine-flutter-autoroll mentioned this pull request Nov 6, 2025

Roll Flutter from e5d5c01850f2 to 6925f8b815ea (30 revisions) flutter/packages#10370

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Nov 6, 2025

c652b5381 Fix ReorderableList items jumping when drag direction rev…

55833e9

…erses mid-animation (flutter/flutter#173241)

engine-flutter-autoroll mentioned this pull request Nov 6, 2025

Roll Flutter from e5d5c01850f2 to aebe02b44fe2 (31 revisions) flutter/packages#10371

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Nov 6, 2025

c652b5381 Fix ReorderableList items jumping when drag direction rev…

ae6d98b

…erses mid-animation (flutter/flutter#173241)

engine-flutter-autoroll mentioned this pull request Nov 6, 2025

Roll Flutter from e5d5c01850f2 to c45883383950 (32 revisions) flutter/packages#10372

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Nov 6, 2025

c652b5381 Fix ReorderableList items jumping when drag direction rev…

94d558b

…erses mid-animation (flutter/flutter#173241)

engine-flutter-autoroll mentioned this pull request Nov 6, 2025

Roll Flutter from e5d5c01850f2 to ac3b91db0dcc (33 revisions) flutter/packages#10373

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Nov 6, 2025

c652b5381 Fix ReorderableList items jumping when drag direction rev…

c875356

…erses mid-animation (flutter/flutter#173241)

engine-flutter-autoroll mentioned this pull request Nov 6, 2025

Roll Flutter from e5d5c01850f2 to 7dc982e1b16d (34 revisions) flutter/packages#10375

Closed

Fix ReorderableList items jumping when drag direction reverses mid-animation #173241

Fix ReorderableList items jumping when drag direction reverses mid-animation #173241

Uh oh!

Conversation

lukemmtt commented Aug 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Problem

Solution

Code Changes

Pre-launch Checklist

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Piinks left a comment

Choose a reason for hiding this comment

Uh oh!

lukemmtt commented Aug 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

lukemmtt commented Aug 7, 2025

Uh oh!

Piinks Aug 11, 2025

Choose a reason for hiding this comment

Uh oh!

lukemmtt Sep 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

flutter-dashboard bot commented Aug 31, 2025

Uh oh!

Piinks commented Sep 26, 2025

Uh oh!

flutter-dashboard bot commented Sep 27, 2025

Uh oh!

lukemmtt commented Sep 27, 2025

Uh oh!

Piinks commented Oct 7, 2025

Uh oh!

lukemmtt commented Oct 8, 2025

Uh oh!

Piinks left a comment

Choose a reason for hiding this comment

Uh oh!

Piinks commented Oct 22, 2025

Uh oh!

Piinks commented Nov 4, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Fix `ReorderableList` items jumping when drag direction reverses mid-animation #173241

Fix `ReorderableList` items jumping when drag direction reverses mid-animation #173241

lukemmtt commented Aug 4, 2025 •

edited

Loading

lukemmtt commented Aug 6, 2025 •

edited

Loading

lukemmtt Sep 27, 2025 •

edited

Loading