Flutter Animation Issue: Animation never reach 'Completed' Status - Need Expert Advice
I've been stuck for three days with an animation issue in Flutter, on a new feature (a game) in the app (Speak Out Kids) that I created to encourage speech in children, especially those with autism (inspired by my son).
I created a simplified version to make reproducing the problem easier and to share it with you here: Dart file: https://drive.google.com/file/d/1304v9pdo359VJhZAeFIosdkhNBG8-xkB/view?usp=sharing
Here is a DartPad where you can see directly on the web the problem: https://dartpad.dev/?id=7aaf487dab7dd29cbd4557d7387ddab0
Basically, new widgets are created with a timer, they appear at the bottom of the screen and start moving up, and they should disappear when they reach the top the top. No more than 3 items can be on the list at the same time (for the purposes of this test). In TestGamePageState, I have a list of ItemWidget (List _items) (which contains a simple Text Widget with "Item 1", "Item 2", etc.). Each item is created and controlled by an AnimationController, which manages the item's ascent on the screen. When it reaches the end of the animation, it is removed from the list, which should make it disappear from the screen and make room for new items to be created. This is done through a listener for the animation status, when it completes reaching the status of "completed", it calls the widget's callback method "onLeavingScreen", which passes the method removeById(id); from TestGamePage, which in turn deletes the widget from the list _items.
Everything works perfectly until I have 2 widgets rising at the same time on the screen, when the first reaches the top, it disappears as it should, but the one below jumps and appears in the place of the one that disappeared, and for this last one, its animation never reaches the status of completed, which causes it to never leave the list, thus causing items to accumulate at the top, and with that, only one item is created at a time on the screen, and so it remains.
To illustrate, I attached two images, the first with the two items rising, and the second, after ITEM 1 reaches the top, is removed from the list, and ITEM 2 mysteriously jumping to the place of ITEM 1 and staying there without ever leaving the list:
If you could take a look, test it, and shed some light, I would greatly appreciate it, as I've been literally stuck for several days (actually nights). 🙏
The solution for that specific implementation was changing "required ValueKey key" for "required super.key" on the ItemWidget constructor.