karvulf / flutter-reorderable-grid-view

BSD 3-Clause "New" or "Revised" License
158 stars 23 forks source link

Animation when programmatically changing items order is missing. #18

Closed CleanCodix closed 2 years ago

CleanCodix commented 2 years ago

Hi,

First, thanks for your widget, it's really useful :)

Here's my feedback:

When you remove or insert an item the grid is animated, when you call _handleReorder while dragging the grid is also animated :D

But :/ if you call manually _handleReorder animation isn't working here is my example (based on your example) that is not working:

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

  @override
  State<ExampleDragAndDropGridView> createState() => _ExampleDragAndDropGridViewState();
}

class _ExampleDragAndDropGridViewState extends State<ExampleDragAndDropGridView> {
  final fruits = <String>["banana", "apple", "strawberry"];

  @override
  Widget build(BuildContext context) {
    final children = List.generate(
      fruits.length,
      (i) {
        final fruit = fruits.elementAt(i);
        return InkWell(
          key: Key(fruit),
          onTap: () => _handleReorder(i, i == fruits.length - 1 ? 0 : i + 1),
          child: Container(
            alignment: Alignment.center,
            color: Colors.white,
            child: Text(fruit),
          ),
        );
      },
    );

    return Scaffold(
      backgroundColor: Colors.white70,
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: ReorderableBuilder(
          children: children,
          onReorder: _handleReorder,
          builder: (children, scrollController) {
            return GridView(
              controller: scrollController,
              children: children,
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 4,
                mainAxisSpacing: 4,
                crossAxisSpacing: 8,
              ),
            );
          },
        ),
      ),
    );
  }

  void _handleReorder(int oldIndex, int newIndex) {
    setState(() {
      final child = fruits.removeAt(oldIndex);
      fruits.insert(newIndex, child);
    });
  }
}
karvulf commented 2 years ago

Hi @MrDiezDOTcom Thank you for testing that version. In the next days, I will look to that problem, there are still some things, that I have to fix, so I check that also out.

But here are my thoughts about your example: In your example, you used ReorderableBuilder. This builder only has the functionality to enable the drag and drop. To get an animation when adding or removing items, there is the builder AnimatedGridViewBuilder or to combine Drag and Drop and the animation, I added AnimatedReorderableBuilder.

Maybe that could already help, but I think this is something I have to look for.

But I already planned to offer only one builder to simplify that widget and you could disable the animation with the parameters. Also that should fix some bugs when you change very often or fast the order.

karvulf commented 2 years ago

Ok this is a bug and will be fixed for the 2.0.0-dev.4

karvulf commented 2 years ago

I released version 2.0.0-dev.4 that should solve your problem. @MrDiezDOTcom I hope that I can do an official relase for 2.0.0 soon but there are still some things to do.