This PR automatically disables autoscrolling if physics are NeverScrollableScrollPhysics. It also allows the developer to override this automatic behavior using the autoScroll argument on ReorderableGrid, SliverReorderableGrid, and ReorderableGridView

Issues

Resolves https://github.com/casvanluijtelaar/reorderable_grid/issues/10

Code

return ReorderableGrid(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: widget.layout.crossAxisCount,
    childAspectRatio: widget.layout.childAspect,
    mainAxisSpacing: widget.layout.gap,
    crossAxisSpacing: widget.layout.gap,
  ),
  itemCount: 9,
  physics: const NeverScrollableScrollPhysics(), ///////////////////////
  itemBuilder: (context, i) {
    return ReorderableGridDragStartListener(
      key: ValueKey(i),
      index: i,
      child: Container(
        color: Colors.red,
        child: Text(i.toString()),
      ),
    );
  },
  onReorder: (i, j) {
    print('from $i to $j');
  },
);

Before

https://user-images.githubusercontent.com/666539/172380122-a644ae1d-fda1-426f-8040-5c8e7a591591.mov

After

https://user-images.githubusercontent.com/666539/172380210-e59b1d5b-7c03-4c71-9639-b2b396e6a97b.mov

It looks like auto-scroll on extents does not respect reverse: true

https://user-images.githubusercontent.com/666539/172375755-5603af1f-55d6-4d1c-ba27-40884ddbb5df.mov

I keep getting this.

Exception has occurred. "Error: Assertion failed: org-dartlang-sdk:///flutter_web_sdk/lib/engine/engine/html/path/path_ref.dart:898:12 isValid is not true at Object.throw [as throw] (http://localhost:42043/dart_sdk.js:5067:11) at Object.assertFailed (http://localhost:42043/dart_sdk.js:4992:15) at _engine.PathRef.shiftedFrom.debugValidate (http://localhost:42043/dart_sdk.js:161437:31) at new _engine.PathRef.shiftedFrom (http://localhost:42043/dart_sdk.js:161574:10) at new _engine.SurfacePath.shiftedFrom (http://localhost:42043/dart_sdk.js:159586:21)

fixes https://github.com/casvanluijtelaar/reorderable_grid/issues/9

• [x] fix auto scroll for different Direction
• [x] fix auto scroll for reverse scroll

Regarding the use of SliverReorderableGrid, can you provide a code demo? I have a problem when I use it, I can’t drag, the code is as follows

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) => Card(
                    key: ValueKey(index),
                    child: Center(
                      child: Text(index.toString()),
                    ),
                  ),
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                childAspectRatio: 3 / 5,
                mainAxisSpacing: 10.0,
                crossAxisSpacing: 10.0,
              ),
              onReorder: _onReorder)
        ],
      )),
    );
  }
}

It would be really nice if the drag/drop animation could be triggered when the list gets updated, not only with a long press and dragging and dropping an item.

For example:

Original list: [1, 2, 3, 4, 5, 6]

Grid:
[1, 2, 3]
[4, 5, 6]

List updated: [1, 2, 4, 5, 6] (item 3 removed in the backend)

Grid:
[1, 2, 4]
[5, 6]

The list gets updated just fine, but without any animation. I'll look at your code to see how can we implement this.

In my app, I don't need the user to reorder the contents but they are done when some filters are enabled.

Use case:

• Grids show cars.
• When user presses red color, I want to show only the red colored cars
• And I want this filtering to happen in an animated way.
• So there might be several cars that are removed from different places of the cars array.
• When the filter is removed, all cars should be added in place with ordering animation.

Can I use this package for this need?

This implicitly_animated_reorderable_list package does it using a diff algorithm

I am using this package in a fixed grid scenario, where NeverScrollablePhysics is being used. However, auto-scroll still appears to be active when it's expected to never scroll.

https://user-images.githubusercontent.com/666539/172376349-21e4e2d6-d763-4e0b-89ec-77752c2675cd.mov

return ReorderableGrid(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: widget.layout.crossAxisCount,
    childAspectRatio: widget.layout.childAspect,
    mainAxisSpacing: widget.layout.gap,
    crossAxisSpacing: widget.layout.gap,
  ),
  itemCount: 9,
  physics: const NeverScrollableScrollPhysics(),
  reverse: false,
  itemBuilder: (context, i) {
    return ReorderableGridDragStartListener(
      key: ValueKey(i),
      index: i,
      child: Container(
        color: Colors.red,
        child: Text(i.toString()),
      ),
    );
  },
  onReorder: (i, j) {
    print('from $i to $j');
  },
);

If a ReorderableGridView.extent has shrinkWrap set to true, and the last row is full of items, then an extra row is added to the grid view when reordering is started:

https://user-images.githubusercontent.com/66305960/174491136-a38d9a64-c3f5-40b2-84e0-0ff4b691c49e.mp4

This does not happen if the last row is not full. I would expect it not to happen in general.

Thanks again!

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(3, (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(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Column(
          children: [
            Container(
              color: Colors.blue,
              child: ReorderableGridView.extent(
                shrinkWrap: true,
                maxCrossAxisExtent: 250,
                onReorder: _onReorder,
                childAspectRatio: 1,
                children: items.map((item) {
                  return Card(
                    key: ValueKey(item),
                    child: Center(
                      child: Text(item.toString()),
                    ),
                  );
                }).toList(),
              ),
            ),
            const Text("Below"),
          ],
        ),
      ),
    );
  }
}

It appears to be impossible to drop an item back in its original position, at least in the package's sample app (and in my app where I tried to use this package). The items to the left and right of the item that's being dragged are 'glued' together:

https://user-images.githubusercontent.com/66305960/174432363-7a1d28e6-3f9c-43f6-ad96-f586a595ffd8.mp4

This doesn't seem to be an issue in https://github.com/huhuang03/reorderable_grid_view/, which I gather this package started from. (That package lacks some things that this one has, however.)

Thanks for this package!

It's very easy to reorder by dragging items to the right, but much more difficult to reorder by dragging to the left.

It looks like the breakpoint is the leading edge (LTR) of each item, instead of the bounds of each item.

https://user-images.githubusercontent.com/666539/172383219-1fdf5bc8-fd3a-4675-80cc-8b364233ef39.mov