Skip to content

Commit 060708c

Browse files
committed
add onReorder callback migration guide
1 parent 47154c1 commit 060708c

File tree

1 file changed

+186
-0
lines changed

1 file changed

+186
-0
lines changed
Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
---
2+
title: Deprecate onReorder callback
3+
description: >-
4+
The `onReorder` callback has been deprecated
5+
in favor of a new callback, called `onReorderItem`.
6+
---
7+
8+
{% render "docs/breaking-changes.md" %}
9+
10+
## Summary
11+
12+
The `onReorder` callback in the `ReorderableListView`,
13+
`ReorderableListView.builder`, `ReorderableList` and `SliverReorderableList`
14+
widgets has been replaced by a new callback, `onReorderItem`
15+
to fix the confusing behavior of the second callback parameter, `newIndex`.
16+
17+
## Background
18+
19+
The `onReorder` callback in the `ReorderableListView`,
20+
`ReorderableListView.builder`, `ReorderableList` and `SliverReorderableList`
21+
widgets used to require a manual correction
22+
for the second parameter, `newIndex`,
23+
in case the `oldIndex` is before the `newIndex`,
24+
due to the list of items shortening by one element in this case.
25+
26+
```dart
27+
void handleReorder(int oldIndex, int newIndex) {
28+
if (oldIndex < newIndex) {
29+
// removing the item at oldIndex will shorten the list by 1.
30+
newIndex -= 1;
31+
}
32+
33+
// handle the actual reorder behavior...
34+
}
35+
36+
ReorderableListView(
37+
onReorder: handleReorder,
38+
)
39+
```
40+
41+
The new callback, `onReorderItem`, aims to solve this problem,
42+
by doing the correction automatically.
43+
44+
```dart
45+
void handleReorder(int oldIndex, int newIndex) {
46+
// handle the actual reorder behavior...
47+
}
48+
49+
ReorderableListView(
50+
onReorderItem: handleReorder,
51+
)
52+
```
53+
54+
## Migration guide
55+
56+
First, rename the `onReorder` callback parameter in any `ReorderableListView`,
57+
`ReorderableListView.builder`, `ReorderableList` and `SliverReorderableList`
58+
widget constructors, to `onReorderItem`.
59+
60+
Then, in the callback that is passed to `onReorderItem`,
61+
remove the if-case that corrects the second function parameter,
62+
if it is larger than the first function parameter,
63+
since it is no longer needed.
64+
65+
This migration is not supported by `dart fix`,
66+
due to the change in meaning for the second callback parameter.
67+
68+
Code before migration:
69+
70+
```dart
71+
ReorderableListView(
72+
onReorder: (int oldIndex, int newIndex) {
73+
if (oldIndex < newIndex) {
74+
newIndex -= 1;
75+
}
76+
77+
// Handle reorder ...
78+
}
79+
)
80+
```
81+
82+
```dart
83+
ReorderableListView.builder(
84+
onReorder: (int oldIndex, int newIndex) {
85+
if (oldIndex < newIndex) {
86+
newIndex -= 1;
87+
}
88+
89+
// Handle reorder ...
90+
}
91+
)
92+
```
93+
94+
```dart
95+
ReorderableList(
96+
onReorder: (int oldIndex, int newIndex) {
97+
if (oldIndex < newIndex) {
98+
newIndex -= 1;
99+
}
100+
101+
// Handle reorder ...
102+
}
103+
)
104+
```
105+
106+
```dart
107+
SliverReorderableList(
108+
onReorder: (int oldIndex, int newIndex) {
109+
if (oldIndex < newIndex) {
110+
newIndex -= 1;
111+
}
112+
113+
// Handle reorder ...
114+
}
115+
)
116+
```
117+
118+
Code after migration:
119+
120+
```dart
121+
ReorderableListView(
122+
onReorderItem: (int oldIndex, int newIndex) {
123+
// Handle reorder ...
124+
}
125+
)
126+
```
127+
128+
```dart
129+
ReorderableListView.builder(
130+
onReorderItem: (int oldIndex, int newIndex) {
131+
// Handle reorder ...
132+
}
133+
)
134+
```
135+
136+
```dart
137+
ReorderableList(
138+
onReorderItem: (int oldIndex, int newIndex) {
139+
// Handle reorder ...
140+
}
141+
)
142+
```
143+
144+
```dart
145+
SliverReorderableList(
146+
onReorderItem: (int oldIndex, int newIndex) {
147+
// Handle reorder ...
148+
}
149+
)
150+
```
151+
152+
## Timeline
153+
154+
Landed in version: 3.41.0-1.0.pre-364<br>
155+
In stable release: Not yet
156+
157+
## References
158+
159+
{% render "docs/main-api.md", site: site %}
160+
161+
API documentation:
162+
163+
* [`ReorderCallback`][]
164+
* [`ReorderableList`][]
165+
* [`ReorderableListView`][]
166+
* [`SliverReorderableList`][]
167+
168+
Relevant issues:
169+
170+
* [Issue 127901][]
171+
* [Issue 169878][]
172+
173+
Relevant PRs:
174+
175+
* [Deprecate onReorder callback][]
176+
177+
{% render "docs/main-api.md", site: site %}
178+
179+
[`ReorderCallback`]: {{site.main-api}}/flutter/widgets/ReorderCallback.html
180+
[`ReorderableList`]: {{site.main-api}}/flutter/widgets/ReorderableList-class.html
181+
[`ReorderableListView`]: {{site.main-api}}/flutter/material/ReorderableListView-class.html
182+
[`SliverReorderableList`]: {{site.main-api}}/flutter/widgets/SliverReorderableList-class.html
183+
184+
[Issue 127901]: {{site.repo.flutter}}/issues/127901
185+
[Issue 169878]: {{site.repo.flutter}}/issues/169878
186+
[Deprecate onReorder callback]: {{site.repo.flutter}}/pull/178242

0 commit comments

Comments
 (0)