casvanluijtelaar / reorderable_grid

A Flutter inplementation of the reorderable grid UI pattern, closely mimics Flutters exisiting ReorderableList

Home Page:https://pub.dev/packages/reorderable_grid

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

SliverReorderableGrid indexes correct, grid not updating

414nc14rk3 opened this issue · comments

The example using ReorderableGridView.extent works as expected, SliverReorderableGrid has no example.

I've put together the following based on issue 4, Card() becomes drag-able.

Problem is when dropping the Card(), the values in the grid do not change, as if the drop never completes the values in the grid remain in original order, while the output of items shows the correct expected order, how can i get the grid values to reflect new state correctly?

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

void main() => runApp(const MyApp());

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

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

class _MyAppState extends State<MyApp> {
  final items = List<int>.generate(40, (index) => index);

  void _onReorder(int oldIndex, int newIndex) {
    setState(() {
      final item = items.removeAt(oldIndex);
      items.insert(newIndex, item);
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: CustomScrollView(
        slivers: [
          SliverReorderableGrid(
              itemCount: items.length,
              itemBuilder: (context, index) =>
                  ReorderableGridDelayedDragStartListener(
                    index: index,
                    key: ValueKey(index),
                    child: Center(
                      child: Text(index.toString()),
                    ),
                  ),
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                childAspectRatio: 3 / 5,
                mainAxisSpacing: 10.0,
                crossAxisSpacing: 10.0,
              ),
              onReorder: _onReorder)
        ],
      )),
    );
  }
}

I was able to resolve this issue by making the following change:
items[index].toString()
The problem was the text inside the Cards was showing the item builder index array which stays constant instead of the updated index array from onReorder().