My ReorderableListView.builder is not working even writing the code from Official docs

41 views Asked by At

`I am working on a Listview , which I want to reoder so I found ReorderableListView.builder , I am using it through official Flutter documentation :https://api.flutter.dev/flutter/material/ReorderableListView/ReorderableListView.builder.html

But I am unable to reorder .

Sharing the code Snippet I have written:

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

class PositionInterChange extends StatefulWidget {
  const PositionInterChange({super.key});

  @override
  State<PositionInterChange> createState() => _PositionInterChangeState();
}

class _PositionInterChangeState extends State<PositionInterChange> {
  final List<int> _items = List.generate(50, (index) => index);

  @override
  Widget build(BuildContext context) {
    final ColorScheme colorScheme = Theme.of(context).colorScheme;
    final oddItemColor = colorScheme.primary.withOpacity(0.15);
    final evenItemColor = colorScheme.primary.withOpacity(0.30);
    return Scaffold(
      body: SafeArea(
        child: ReorderableListView.builder(
          itemCount: _items.length,
          buildDefaultDragHandles: false,
          itemBuilder: (BuildContext context, int index) {
            return ListTile(
              key: Key('$index'),
              tileColor:
                  _items[index].isOdd ? oddItemColor : evenItemColor,
              title: Text('Item ${_items[index]}', style: TextStyle(
                color: Colors.white
              ),),
            );
          },
          onReorder: (int oldIndex, int newIndex) {
            if (newIndex > oldIndex) {
              setState(() {
                newIndex -= 1;
              });

            }
            final int item = _items.removeAt(oldIndex);
            _items.insert(newIndex, item);
          }),
      ),
    );
  }
}

**Showing the Implementation of my main.dart **

import 'package:flutter/material.dart';
import 'package:position_interchange/screens/position_interchange.dart';
void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple ,),
        useMaterial3: true,
      ),
      home: PositionInterChange(),
    );
  }
}

I am expecting a proper Reoder as discussed in Flutter Documentation , uploading the screenshot what I am getting. enter image description here`

1

There are 1 answers

1
Akhil George On

Change The ListTile - key: Key('$index') into key: ValueKey(index)