ReorderableListView.builder is not reorder-CodePudding

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class Mainpage extends StatefulWidget {
 const Mainpage({Key? key}) : super(key: key);

  @override
   _MainpageState createState() => _MainpageState();
  }

 class _MainpageState extends State<Mainpage> {
   @override
  void initState() {
  super.initState();
SystemChrome.setPreferredOrientations(
    [DeviceOrientation.landscapeLeft, DeviceOrientation.landscapeRight]);
}

@override
Widget build(BuildContext context) {
return Container(color: Colors.white, child: const Cards());
}
}

class Cards extends StatefulWidget {
 const Cards({Key? key}) : super(key: key);

@override
State<Cards> createState() => _CardsState();
}

class _CardsState extends State<Cards> {
@override
Widget build(BuildContext context) {
List<String> list = [
  '1',
  '2',
  '3',
  '4',
  '5',
  '6',
'7',
'8',
'9',
'10',
];

 return Container(
    color: Colors.white,
    child: ReorderableListView.builder(
      padding: const EdgeInsets.fromLTRB(20, 0, 20, 0),
      scrollDirection: Axis.horizontal,
      onReorder: (int oldIndex, int newIndex) {
        setState(() {
          if (oldIndex < newIndex) {
            newIndex--;
          }
          final String item = list.removeAt(oldIndex);
          list.insert(newIndex, item);
        });
      },
      itemBuilder: (BuildContext context, int index) {
        return Card(
          key: ValueKey(index),
          child: Container(
            height: MediaQuery.of(context).size.height / 4,
            width: MediaQuery.of(context).size.width / 19,
            alignment: Alignment.bottomCenter,
            child: Text(list[index]),
          ),
        );
      },
      itemCount: list.length,
    ));
}
}

The list values are getting an update when I drag. But the state does not rebuild. list values are reordered correctly. But the Reorded list is not working. I try with both ReorderableListView.builder and ReorderableListView. This is my full code. I don't where I made mistake. This is my full code. Someone help me to resolve this issue.

CodePudding user response：

change your setState

setState(() {
            if (newIndex > oldIndex) {
              newIndex -= 1;
            }
              final String item = _products.removeAt(oldIndex);
              list.insert(newIndex, item);

          });

CodePudding user response：

EDIT : After looking at the full code you added it appears you're declaring the list at the beginning of the build method of your widget. The list is reset to its initial values each time your widget is rebuild.

Move the list declaration at the beginning of the class :

class Cards extends StatefulWidget {
  const Cards({Key? key}) : super(key: key);
  List<String> list = ['1', '2', '3', '4', '5', '6', '7'];

END OF EDIT

The problem is in this part of your code:

if (oldIndex > newIndex) {
  newIndex = newIndex - 1;
  final String item = list.removeAt(oldIndex);
  list.insert(newIndex, item);
}

It updates the list only if the item is dragged from right to left. And while doing it, it shifts the new item index by 1 to the left.

What you probably want to do is updating the list every time a drag occurs. And since you'll be deleting the old item before adding the new one you want to decrement newIndex if the drag is from left to right.

The code should be :

onReorder: (int oldIndex, int newIndex){
  setState(() {
    if (oldIndex < newIndex){
      newIndex--;
    }
    final String item = list.removeAt(oldIndex);
    list.insert(newIndex, item);
  });
}