This is the seventh day of my participation in the First Challenge 2022. For details: First Challenge 2022.

preface

This time, as the title says ………… Challenge failed, 300 rows can’t handle drag sort …………

I admit that I seriously underestimated the state saving aspect of the processing logic. Doing various state saving and read triggers is not a very easy task.

The logic part has changed a lot. AnimatedContainer and GridView also need to be customized. If it can be removed, it does not need to be modified, but other parts are used, so it has to be copied from the system source code part.

But at least this time it’s all functional;

This time let’s first put the effect picture, the performance is no problem, there should be no missing part:

Change parts

This time the overall process was tweaked, with changes to the AnimationContainer and gridView;

The whole idea is to adjust the order of the elements in the GridView and trigger the reconstruction of the Item, which then triggers the AnimatedContainer to play the animation.

The AnimatedContainer plays the animation from transform to Transfrom, and I want an animation with the specified transform gradient to 0, so I need to customize this as well:

Provide an InheritedWidget that stores individual Item data

[InheritedWidget] This InheritedWidget stores the location of the corresponding Item in the GridView’s child RenderObject list. , and the position information of the cached Item, which is used to know the position offset to be changed during build;

There is no need to allow the listener to be notified when the data changes, after all, it is only used as something to store shared data; So updateShouldNotify I’m going to set it to false;

Add methods to Element to change the order of renderObjects

This method is mainly divided into the following steps:

  • 1. Record the position of Item when the order is not adjusted; Used to set the location information back later;

  • 2. Adjust the order in Element childElement

  • 3. Adjust the order of childRenderObject.

The move method calls the didAdoptChild method to update the information about the adjusted item, and finally to check whether the order of the renderObject list is correct, so we need to adjust the index order of parentData:

  • 4. Reset the position (after all, each Item is a fixed size in the gridView, so the position of the index will not change)

3. Modify AnimatedContainer

This time the order of the renderObject is adjusted, so the original AnitedContainer method of saving the last Transfrom and transiting to the current transform will not work.

It should be said that now the AnimatedContainer animation should play from the adjustment order before the gradient to the current position; Since the order of the renderObject has changed, the animation should be an animation with the variable from the last position to the current position gradient to 0:

Just change the didUpdateTweens method of AnimatedContainerState (but like the custom GridView, you need to copy everything else, not just rewrite parts of the method, so you can ignore other builds and things like that. No changes made) :

conclusion

Some may wonder why I need to build a new wheel when I already have the German guy’s plan.

The main reason for this is that I want to use the Draggable+DragTarget design scheme;

Later, I want to customize the DragTarget scheme to realize the processing of a variety of complex gestures.

The main reason is to try to avoid counting…