Issue in animations when dragging

[davidmartos96]

Thank you for sharing this package, it looks really promising!

I'm trying it out, and I encountered with an issue sometimes. I believe the following steps in the video are enough to reproduce it.
Essentially, dragging an item from the top, and after scrolling for a while, go back up in the scroll without dropping the item. When going back up, the animation is messed up.
In the video is not seen, but you can also reach situations after triggering this issue where you see more than 1 "hole" or even holes after the drag has stopped, like if some repaint was missing.

bug_grid-2024-10-01_18.03.13.mp4

Code:

Flutter version 3.24.1
Package version: 5.3.0

import 'package:flutter/material.dart';
import 'package:flutter_reorderable_grid_view/widgets/custom_draggable.dart';
import 'package:flutter_reorderable_grid_view/widgets/reorderable_builder.dart';

void main() {
  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.blue),
        useMaterial3: true,
      ),
      home: const MyGridScreen(),
    );
  }
}

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

  @override
  State<MyGridScreen> createState() => _MyGridScreenState();
}

class _MyGridScreenState extends State<MyGridScreen> {
  List<GridItem> children = List.generate(300, (i) => GridItem(id: i));
  // ..add(GridItem(id: -1));
  // ..shuffle();

  final GlobalKey _gridViewKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    final scrollcontroller = PrimaryScrollController.of(context);
    final generatedChildren = _getGeneratedChildren();

    int indexNonDraggable = children.indexWhere((element) => element.id == -1);

    return Scaffold(
      body: ReorderableBuilder(
        key: Key(_gridViewKey.toString()),
        // onReorder: _handleReorder,
        onReorder: (ReorderedListFunction reorderedListFunction) {
          setState(() {
            children = reorderedListFunction(children) as List<GridItem>;
          });
        },
        onUpdatedDraggedChild: (index) {
          print("onUpdatedDraggedChild $index");
        },
        // onDragEnd: _handleDragEnd,
        scrollController: scrollcontroller,
        children: generatedChildren,
        builder: (children) {
          return GridView(
            key: _gridViewKey,
            controller: scrollcontroller,
            reverse: false,
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 5,
              mainAxisSpacing: 4,
              crossAxisSpacing: 8,
            ),
            children: children,
          );
        },
      ),
    );
  }

  List<Widget> _getGeneratedChildren() {
    return [
      for (int index = 0; index < children.length; index++)
        _getChild(index: index, item: children[index]),
    ];
  }

  Widget _getChild({required int index, required GridItem item}) {
    return CustomDraggable(
      key: Key(children[index].id.toString()),
      data: index,
      child: Container(
        decoration: BoxDecoration(
          color: item.id == -1
              ? Theme.of(context).disabledColor
              : Theme.of(context).colorScheme.primary,
        ),
        height: 40.0,
        width: 40.0,
        child: Center(
          child: Text(
            '${children[index].id}',
            style: const TextStyle(
              color: Colors.black,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ),
    );
  }
}

class GridItem {
  final int id;

  GridItem({required this.id});
}

[karvulf]

Hello @davidmartos96
thanks for opening the issue. I will check that. These holes you mentioned could be a bit more harder, this usually happens because this one item was not correctly updated and is still invisible.
I have to think about a better solution to prevent these issues.

[karvulf]

I checked this issue and it seems to be a problem that while scrolling to the original position by going down and then up that these children are recreated. This leads into wrong calculations. Currently I didn't find a good fix for that.
The solution which is definitely easier to fix but not preferred would be allow only one scrolling direction while dragging.
@davidmartos96

[karvulf]

I found a fix and will test this, if everything works, I will release this fix :) @davidmartos96

[davidmartos96]

@karvulf That's great to hear, thank you!

[karvulf]

I merged the PR @davidmartos96
One small bug still rests but it's not really affecting the scrolling #131