Is it possible to not reuse child widgets in using Flutter's AnimatedList?

384 views Asked by At

I'm working on a Flutter app that has features similar to whatsapp where there can be a bunch of messages that are essentially audio players. I'm using AnimatedList so the chat bubbles animate in and out.

The issue is it doesn't seem that AnimatedList supports keepAlive and I haven't come across any alternatives. I don't want the widgets to be recycled because if a message is playing and I scroll the message in and out of view, I want the message to keep playing AND animating and right now I instantiate an audio player and animation controller in each child widget. I could see this being more "optimal" if I maintained all this state outside of the child widgets (at the same level as the list) but the max amount of chat bubbles per conversation in this app is ~50 and we want to move fast instead of be optimal right now so I think this simplification is a good idea if I can keep the widgets alive.

I tried wrapping the child widgets in a KeepAlive with no luck. Below seem like my options:

  1. There is some supported way to do this and I'm not aware of it
  2. There is some alternative / 3rd party lib that supports this
  3. Try using a non animated list and explore other ways to animate
  4. Implement the state above the children

I'd be curious to hear of potential solutions from the community. Thanks!

1

There are 1 answers

1
Gaspard Merten On

All the proposed solutions are fine (the fourth is probably the most reliable if you need it to work quickly but not the most efficient for sure...).

Did you think about using one InheritedWidget that you would place above your animated list, which would control the audio player. (I am assuming that you only want one audio playing at a time).

So concretely, you would have an inherited widget that would expose a start(File file) method and a pause(File file) method and the duration property and a unique identifier for the current message being played. This would allow you to keep your state structure simple and still be quite efficient.

I can write a piece of code if my explanation is not clear enough .