In Flutter 3.x, ReorderableListView is not working - flutter

Question

I'm trying to implement ReorderableListView in my Flutter app. The code is simple:
import 'package:flutter/material.dart';
void main() => runApp(const MaterialApp(home: MyHomePage()));
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
void _onReorder(int oldIndex, int newIndex) => setState(
() => items.insert(
newIndex > oldIndex ? newIndex -= 1 : newIndex,
items.removeAt(oldIndex),
),
);
var items = ['Item A', 'Item B', 'Item C'];
#override
Widget build(context) => Scaffold(
body: ReorderableListView(
onReorder: _onReorder,
children: items.map((item) {
var index = items.indexOf(item);
return ListTile(
key: Key('$index'),
tileColor: Colors.white,
title: Text(item),
onTap: () {
// Handle tap
},
);
}).toList(),
),
);
}
I can't make the code work. The items can't be reordered. flutter --version command tells me:
Flutter 3.3.8 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 52b3dc25f6 (3 days ago) • 2022-11-09 12:09:26 +0800
Engine • revision 857bd6b74c
Tools • Dart 2.18.4 • DevTools 2.15.0
And flutter doctor tells me:
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.3.8, on macOS 13.0.1 22A400 darwin-x64, locale en-ID)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 14.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.3)
[✓] IntelliJ IDEA Ultimate Edition (version 2022.2.1)
[✓] VS Code (version 1.73.1)
[✓] Connected device (4 available)
[✓] HTTP Host Availability
• No issues found!
What is wrong with my code?

Answer 1

After many hours of trial and error with many samples and tutorials all over the internet, I have found the cause: In Flutter 3.x, ReorderableListView will only work if we use ReorderableDragStartListener. This is the 1 link that led me to the right direction: https://github.com/flutter/flutter/issues/114783. How to use the listener? I have to modify my code, and update the ListTile part as follows:
ListTile(
key: Key('$index'),
tileColor: Colors.white,
title: Text(item),
onTap: () {
// Handle tap
},
trailing: ReorderableDragStartListener(
index: index,
child: const Icon(Icons.drag_handle),
),
)
I hope this answer will help people, and no one gets through all the frustrating hours like I did.