Feature: Add support for `Wrap`

[karvulf]

Currently, only all types of GridView are supported for animation and drag and drop. It would be nice to have also a support for Wrap because of similar behaviour.

[naamapps]

Hey @karvulf, I'm looking for an animated reordable wrap widget and couldn't find anything on Google. Currently I have wrap widget that can dynamically remove and add items, but without animations and without the option to reorder the items.

I came across your package (and this issue) which is exactly what I was looking for. So I want to ask you if you found a way to make this work?

Cheers

[karvulf]

Hi @naamapps,

I didn't try to solve this but could take a look the next week. I think this feature will take a bit more work to implement it.

[karvulf]

I have some updates @naamapps I checked your requested feature and you should be able to use a Wrap with the ReorderableBuilder. I didn' test a lot, so it could be possible that there are some bugs. If your Wrap has to be scrollable, you can add a SingleChildScrollView, e. g. like this:

return ReorderableBuilder(
  children: generatedChildren,
  onReorder: _handleReorder,
  scrollController: _scrollController,
  builder: (children) {
    return SingleChildScrollView(
      key: _gridViewKey,
      controller: _scrollController,
      child: Wrap(
        children: children,
      ),
    );
  },
);

It is important that you reorder the widget children by yourself to make sure that the child that has changed his position, has still the correct size. If you have further questions or you found some bugs, you can post them here. Soon, I will make a little update of my read.me and tests, if there are no problems using the Wrap.

[naamapps]

That's great to hear @karvulf, I'll check this ASAP and update you with the results. Thanks :)

[naamapps]

Ok so I tested and there are indeed a few bugs.

https://user-images.githubusercontent.com/37176893/171105194-4e45b573-25fa-454e-b8a5-e77e4933c112.mp4

1. There are a few hiccups when the last item (new tag input), go to the next line. can be seen in 0:14 - 0:17.
2. The reordering doesn't work properly at all.. the items sometime won't react to the position of the finger and also move out of position when the do. can be seen in 0:30 - 0:49.

[karvulf]

Yes you are right. But it looks that it should be not a big problem to solve that, I will try to make a pull request this weekend, so you can test it again. @naamapps And big thanks for testing it! :)

[naamapps]

Thank you for the support and the great package! Looking forward to the new update 👍

[karvulf]

Hi @naamapps , I have some updates for you. I tested this feature and I think, it would take a bit more work to have a reorderable Wrap because I have to do more calculations because the size of every child can be different. So when I change the position while dragging, it could be that the other children have to get a complete new position. So I think it could make more sense to create a new widget for this type. Because it takes a bit more work, I am not sure, when I can implement that. So before you wait for this feature, maybe you find another package that could help you more.

I made a branch, where I tested this feature, so if you are interested you can take a look into it or test it with your implementation but it's still buggy, so I don't recommend it to use it.

To use the feature, you can add the following to your pubspec.yaml:

flutter_reorderable_grid_view:
  git:
    url: https://github.com/karvulf/flutter-reorderable-grid-view.git
    ref: 171dfedfc6c0b5f4160ca5bff76b49e11aa36e13

[naamapps]

Thanks for the update @karvulf, I tested the new branch and didn't see much of a difference to be honest.. Still with the same bugs. The thing is, I searched a lot and didn't find any package that have animated and recordable wrap like your package. I will wait for your package to support it because it's the best I found.

Anyway, I appreciate your work. Thanks

[karvulf]

yeah, I was afraid of that, thanks for testing again. I will notify you when I have some updates about the new widget to support the reordering and animating behavior for Wrap. @naamapps

[karvulf]

I have some updates for you @naamapps

I made a road map for the next major version release 4.0.0. I added also your feature request. Unfortunately I don't have that much time currently, so I think it's realistic that this update could come in the end of this year.

[naamapps]

Hey @karvulf, just checking in. Any updates? Thanks

[karvulf]

Hi @naamapps I didn't have enough time to implement this feature but I think I will start in the end of this month and have hopefully some results in november

[naamapps]

Thanks for the quick reply @karvulf, cheers 👍

[karvulf]

Just to inform you @naamapps Currently I am working on the next major release. I found a good solution to have animations in GridViews with a good performance. So as next step I will add the drag and drop functionality. When all this is done, I will start trying to implement this same behavior for a Wrap but I am sure that this will not be that easy, so hopefully I will have good news at the end.