How to make a complex category picker animation on Flutter
You sit like that 🫠, don’t touch anyone, work calmly, and then you get a design for another project. You start to look, and understand .. everything seems to be good and cool, but we didn’t think that there are design elements that can really be difficult to implement.
The meaning of the application was very simple, it’s just a newsreader, only there was one part in it that immediately looked very complicated, these are the categories …
Design was:
In the end, we have this:
And now all over again. Initially, this task did not seem difficult, since we all know that there is a GridView or libraries such as https://pub.dartlang.org/packages/flutter_staggered_grid_view. After we tested and realized that the animation will not work in these cases, since the view is updated and even with the use of all sorts of Hero and other animations, we can’t normally bind the element to and associate with the smooth transition animation, we started to rack our brains to the point of using some Wrap, Flexible, FlowLayout..widgets.
Ultimately, I came to the conclusion that it was time to think for myself about how to implement this system.
First, we chose the parent widget on which everything was supposed to happen, and that was the Stack. Since we have a lot of widgets, we need to understand the initial state of each of them and, of course, their number.
The first decision why you should think about the widget first
Initially, the first solution was to build a matrix and bind each element at the top / leftmost point, and something like this came out:
Since we initially worked with an array of data, it was necessary to build our widgets and fill the matrix with initial values:
After adding to our list and drawing them:
And when you click on some element, update the rest accordingly, if our current element intersects with another, then move the rest:
After a lot of time drawing on the board and searching for solutions to the problem
Our main problem was that we tried to calculate where and how our elements should move, and then build them. But as soon as we began to connect each element with each other, everything fell into place.
When we started comparing the intersection of the squares, we got the result we wanted:
To catch up with this, when we did a check for an element from above, so that each element was also attached to its parent, since the matrix can move apart and the elements that could become lower or higher from above, we get something like this:
You can see the full code: https://github.com/followthemoney1/animated_category
THE END 🫠👍🏿💾❤️🌩🎟🎟🍱❤️
