Reversed ReorderableListView drop animation moves item one row higher than it should #110949
Description
Steps to Reproduce
- Create a reversed ReorderableListView. It can be reproduced very easily in the ReorderableListView demo in Flutter docs by adding the
reverse: trueargument.
- Try reordering the items and observe the drop animation
Just a sidenote: this issue may be related to #90856, but the circumstances are a little different.
Expected result:
The reorder drop animation should end where the item is supposed to go, just like when using a non-reversed ReorderableListView.
I am a little bad at explaining so here's a video of the correct behaviour:
Screenshot.2022-09-04.at.20.32.09.mp4
Actual result:
The item "gravitates" one row higher than it should before jumping to its right position. It only works correctly when swapping places with an item that's directly next to the one that's being moved.
Screenshot.2022-09-04.at.20.20.56.mp4
Code sample
It can be reproduced in the example in the docs, but in case the page changes I'll copy it hereimport 'package:flutter/material.dart';
void main() => runApp(const ReorderableApp());
class ReorderableApp extends StatelessWidget {
const ReorderableApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('ReorderableListView Sample')),
body: const ReorderableExample(),
),
);
}
}
class ReorderableExample extends StatefulWidget {
const ReorderableExample({super.key});
@override
State<ReorderableExample> createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<ReorderableExample> {
final List<int> _items = List<int>.generate(50, (int index) => index);
@override
Widget build(BuildContext context) {
final ColorScheme colorScheme = Theme.of(context).colorScheme;
final Color itemColor = colorScheme.primary.withOpacity(0.05);
return ReorderableListView(
reverse: true,
padding: const EdgeInsets.symmetric(horizontal: 40),
children: <Widget>[
for (int index = 0; index < _items.length; index += 1)
ListTile(
key: Key('$index'),
tileColor: itemColor,
title: Text('Item ${_items[index]}'),
),
],
onReorder: (int oldIndex, int newIndex) {
setState(() {
if (oldIndex < newIndex) {
newIndex -= 1;
}
final int item = _items.removeAt(oldIndex);
_items.insert(newIndex, item);
});
},
);
}
}