-
Notifications
You must be signed in to change notification settings - Fork 3.4k
docs: add migration guide for findChildIndexCallback of separated builder #12636
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
base: main
Are you sure you want to change the base?
Changes from 1 commit
9517b90
453c654
bf66530
8dceca3
3320dde
8435295
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| @@ -0,0 +1,156 @@ | ||||||||||||||
| --- | ||||||||||||||
| title: Deprecated findChildIndexCallback for separated constructors | ||||||||||||||
| description: >- | ||||||||||||||
| The findChildIndexCallback parameter in ListView.separated and | ||||||||||||||
| SliverList.separated has been deprecated in favor of findItemIndexCallback. | ||||||||||||||
sfshaza2 marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||||||||||||||
| --- | ||||||||||||||
|
|
||||||||||||||
| ## Summary | ||||||||||||||
|
|
||||||||||||||
| The `findChildIndexCallback` parameter in `ListView.separated` and | ||||||||||||||
| `SliverList.separated` constructors has been deprecated in favor of | ||||||||||||||
sfshaza2 marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||||||||||||||
| `findItemIndexCallback`. The new callback returns item indices directly, | ||||||||||||||
| eliminating the need for manual index calculations to account for separators. | ||||||||||||||
|
|
||||||||||||||
| ## Background | ||||||||||||||
|
|
||||||||||||||
| In `ListView.separated` and `SliverList.separated` constructors, | ||||||||||||||
| the `findChildIndexCallback` was used to locate widgets by their key. | ||||||||||||||
| However, this callback returned child indices, which include both items | ||||||||||||||
| and separators in the internal widget tree. This meant developers had to | ||||||||||||||
sfshaza2 marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||||||||||||||
| multiply item indices by 2 to get the correct child index, creating | ||||||||||||||
| confusion and error-prone code. | ||||||||||||||
|
|
||||||||||||||
| The new `findItemIndexCallback` parameter simplifies this by working | ||||||||||||||
| directly with item indices, which do not include separators. | ||||||||||||||
| This makes the API more intuitive and reduces the likelihood of | ||||||||||||||
| index calculation errors. | ||||||||||||||
|
|
||||||||||||||
| If you use the deprecated `findChildIndexCallback` parameter, | ||||||||||||||
| you will see a deprecation warning: | ||||||||||||||
|
|
||||||||||||||
| ``` | ||||||||||||||
| 'findChildIndexCallback' is deprecated and shouldn't be used. | ||||||||||||||
| Use findItemIndexCallback instead. | ||||||||||||||
| findChildIndexCallback returns child indices (which include separators), | ||||||||||||||
| while findItemIndexCallback returns item indices (which do not). | ||||||||||||||
| If you were multiplying results by 2 to account for separators, | ||||||||||||||
| you can remove that workaround when migrating to findItemIndexCallback. | ||||||||||||||
| This feature was deprecated after v3.37.0-1.0.pre. | ||||||||||||||
| ``` | ||||||||||||||
|
|
||||||||||||||
| Additionally, if you try to provide both parameters, you will encounter | ||||||||||||||
| an assertion error: | ||||||||||||||
|
|
||||||||||||||
| ``` | ||||||||||||||
| Cannot provide both findItemIndexCallback and findChildIndexCallback. | ||||||||||||||
| Use findItemIndexCallback as findChildIndexCallback is deprecated. | ||||||||||||||
| ``` | ||||||||||||||
|
|
||||||||||||||
| ## Migration guide | ||||||||||||||
|
|
||||||||||||||
| To migrate from `findChildIndexCallback` to `findItemIndexCallback`, | ||||||||||||||
| replace the parameter name and remove any index multiplications | ||||||||||||||
| that were used to account for separators. | ||||||||||||||
|
|
||||||||||||||
| Code before migration: | ||||||||||||||
|
|
||||||||||||||
| ```dart | ||||||||||||||
| ListView.separated( | ||||||||||||||
| itemCount: items.length, | ||||||||||||||
| findChildIndexCallback: (Key key) { | ||||||||||||||
| final ValueKey<String> valueKey = key as ValueKey<String>; | ||||||||||||||
| final int itemIndex = items.indexOf(valueKey.value); | ||||||||||||||
| // Multiply by 2 to account for separators | ||||||||||||||
| return itemIndex == -1 ? null : itemIndex * 2; | ||||||||||||||
| }, | ||||||||||||||
| itemBuilder: (BuildContext context, int index) { | ||||||||||||||
| return ListTile( | ||||||||||||||
| key: ValueKey<String>(items[index]), | ||||||||||||||
| title: Text(items[index]), | ||||||||||||||
| ); | ||||||||||||||
| }, | ||||||||||||||
| separatorBuilder: (BuildContext context, int index) => const Divider(), | ||||||||||||||
| ) | ||||||||||||||
| ``` | ||||||||||||||
|
|
||||||||||||||
| Code after migration: | ||||||||||||||
|
|
||||||||||||||
| ```dart | ||||||||||||||
| ListView.separated( | ||||||||||||||
| itemCount: items.length, | ||||||||||||||
| findItemIndexCallback: (Key key) { | ||||||||||||||
| final ValueKey<String> valueKey = key as ValueKey<String>; | ||||||||||||||
| // Return item index directly - no need to multiply by 2 | ||||||||||||||
| return items.indexOf(valueKey.value); | ||||||||||||||
|
||||||||||||||
| final ValueKey<String> valueKey = key as ValueKey<String>; | |
| // Return item index directly - no need to multiply by 2 | |
| return items.indexOf(valueKey.value); | |
| final ValueKey<String> valueKey = key as ValueKey<String>; | |
| final int itemIndex = items.indexOf(valueKey.value); | |
| return itemIndex == -1 ? null : itemIndex; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Separated constructors here seems vague. It's not clear to me what API this line is referring to.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What about something like:
Or is there a character limit?