-
Notifications
You must be signed in to change notification settings - Fork 3.4k
Add onReorder callback migration guide #13012
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Open
navaronbracke
wants to merge
4
commits into
flutter:main
Choose a base branch
from
navaronbracke:deprecate_reorder_callback_migration
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from all commits
Commits
Show all changes
4 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
173 changes: 173 additions & 0 deletions
173
src/content/release/breaking-changes/deprecate-onreorder-callback.md
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,173 @@ | ||
| --- | ||
| title: Deprecate onReorder callback | ||
| description: >- | ||
| The onReorder callback has been deprecated | ||
| in favor of a new callback, called onReorderItem. | ||
| --- | ||
|
|
||
| {% render "docs/breaking-changes.md" %} | ||
|
|
||
| ## Summary | ||
|
|
||
| The `onReorder` callback in the `ReorderableListView`, | ||
| `ReorderableListView.builder`, `ReorderableList` and `SliverReorderableList` | ||
| widgets has been replaced by a new callback, `onReorderItem`, | ||
| which provides a more intuitive behavior on index. | ||
|
|
||
| ## Background | ||
|
|
||
| The `onReorder` callback in the `ReorderableListView`, | ||
| `ReorderableListView.builder`, `ReorderableList` and `SliverReorderableList` | ||
| widgets used to require a manual correction | ||
| for the second parameter, `newIndex`, | ||
| in case the `oldIndex` is before the `newIndex`, | ||
| due to the list of items shortening by one element in this case. | ||
|
|
||
| ```dart | ||
| void handleReorder(int oldIndex, int newIndex) { | ||
| if (oldIndex < newIndex) { | ||
| // Removing the item at oldIndex will shorten the list by 1. | ||
| newIndex -= 1; | ||
| } | ||
|
|
||
| // Handle the actual reorder behavior... | ||
| } | ||
|
|
||
| ReorderableListView( | ||
| onReorder: handleReorder, | ||
| ) | ||
| ``` | ||
|
|
||
| The new callback, `onReorderItem`, aims to solve this problem, | ||
| by doing the correction automatically. | ||
|
|
||
| ```dart | ||
| void handleReorder(int oldIndex, int newIndex) { | ||
| // handle the actual reorder behavior... | ||
| } | ||
|
|
||
| ReorderableListView( | ||
| onReorderItem: handleReorder, | ||
| ) | ||
| ``` | ||
|
|
||
| ## Migration guide | ||
|
|
||
| The `ReorderableListView`, `ReorderableListView.builder`, | ||
| `ReorderableList` and `SliverReorderableList` widgets | ||
| share the same reordering logic, the migration steps | ||
| are identical for any of these widgets. | ||
|
|
||
| For the purpose of this migration guide, | ||
| `ReorderableListView` is chosen as an example. | ||
|
|
||
| ### Case 1: trivial case | ||
|
|
||
| Code before migration: | ||
|
|
||
| ```dart | ||
| ReorderableListView( | ||
| onReorder: (int oldIndex, int newIndex) { | ||
| if (oldIndex < newIndex) { | ||
| newIndex -= 1; | ||
| } | ||
|
|
||
| // Handle reorder ... | ||
| } | ||
| ) | ||
| ``` | ||
|
|
||
| Code after migration: | ||
|
|
||
| ```dart diff | ||
| ReorderableListView( | ||
| - onReorder: (int oldIndex, int newIndex) { | ||
| - if (oldIndex < newIndex) { | ||
| - newIndex -= 1; | ||
| - } | ||
| - | ||
| + onReorderItem: (int oldIndex, int newIndex) { | ||
| // Handle reorder ... | ||
| } | ||
| ) | ||
| ``` | ||
|
|
||
| ### Case 2: opting out, for complex onReorder implementations | ||
|
|
||
| In some cases, it might not be obvious how to do the migration | ||
| to the new `onReorderItem` callback, | ||
| particularly if the provided callback is very complex. | ||
|
|
||
| In that case, to opt out of the new behavior, | ||
| adjust the `newIndex` to match the old behavior. | ||
|
|
||
| Code before migration: | ||
|
|
||
| ```dart | ||
| void handleSomeComplexReorder(int oldIndex, int newIndex) { | ||
| // Handle reorder ... | ||
| } | ||
|
|
||
| ReorderableListView( | ||
| onReorder: (int oldIndex, int newIndex) { | ||
| handleSomeComplexReorder(oldIndex, newIndex); | ||
| } | ||
| ) | ||
| ``` | ||
|
|
||
| Code after migration: | ||
|
|
||
| ```dart diff | ||
| void handleSomeComplexReorder(int oldIndex, int newIndex) { | ||
| // Handle reorder ... | ||
| } | ||
|
|
||
| ReorderableListView( | ||
| - onReorder: (int oldIndex, int newIndex) { | ||
| + onReorderItem: (int oldIndex, int newIndex) { | ||
| + // To get the equivalent of the old newIndex: | ||
| + if (oldIndex < newIndex) { | ||
| + newIndex += 1; | ||
| + } | ||
| + | ||
| return handleSomeComplexReorder(oldIndex, newIndex); | ||
| } | ||
| ) | ||
| ``` | ||
|
|
||
| :::important | ||
| This migration is not supported by `dart fix`, | ||
| due to the change in meaning for the second callback parameter. | ||
| ::: | ||
|
|
||
| ## Timeline | ||
|
|
||
| Landed in version: 3.41.0-1.0.pre-364<br> | ||
| In stable release: Not yet | ||
|
|
||
| ## References | ||
|
|
||
| API documentation: | ||
|
|
||
| * [`ReorderCallback`][] | ||
| * [`ReorderableList`][] | ||
| * [`ReorderableListView`][] | ||
| * [`SliverReorderableList`][] | ||
|
|
||
| Relevant issues: | ||
|
|
||
| * [Issue 127901][] | ||
| * [Issue 169878][] | ||
|
|
||
| Relevant PRs: | ||
|
|
||
| * [Deprecate onReorder callback][] | ||
|
|
||
| [`ReorderCallback`]: {{site.main-api}}/flutter/widgets/ReorderCallback.html | ||
| [`ReorderableList`]: {{site.main-api}}/flutter/widgets/ReorderableList-class.html | ||
| [`ReorderableListView`]: {{site.main-api}}/flutter/material/ReorderableListView-class.html | ||
| [`SliverReorderableList`]: {{site.main-api}}/flutter/widgets/SliverReorderableList-class.html | ||
|
|
||
| [Issue 127901]: {{site.repo.flutter}}/issues/127901 | ||
| [Issue 169878]: {{site.repo.flutter}}/issues/169878 | ||
| [Deprecate onReorder callback]: {{site.repo.flutter}}/pull/178242 | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.