Repository navigation
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);
});
},
);
}
}
Activity
exaby73 commentedon Sep 5, 2022
I can reproduce this issue.
Reproducible on
Stable (3.3.0)Master (3.4.0-19.0.pre.72)Info
Video
Code Sample
Flutter Doctor
flutter doctor -v(Stable)flutter doctor -v(Master)Fix an reorderable list animation issue:"Reversed ReorderableListView…
github-actions commentedon Oct 5, 2022
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of
flutter doctor -vand a minimal reproduction of the issue.