Using `ColumnScope AnimatedVisibility` gives this annoying p

Question

Using `ColumnScope AnimatedVisibility` gives this annoying problem of having to do double check for the state since the content lambda does not give the current state Like ```AnimatedVisibility model = null if model = null ActualComposable model Spacer Modifier height 20 dp ``` Since I am not sure if doing ` ` in there is safe as the old content may still be animating out and it will call ` ` on the null item to try and render the item as it s leaving What do you folks usually do for this Do I just have to do this double null check or is there something I can do instead some API I may be missing

Stylianos Gakis · Answer

I can see one can do something like ```AnimatedContent targetState = model label = AnimatedContent transitionSpec = ContentTransform targetContentEnter = fadeIn + expandVertically initialContentExit = fadeOut + shrinkVertically model gt if model = null ActualComposable ``` to use AnimatedContent which does in fact give me the current item inside the lamvda but then I need to specify the ContentTransform myself and so on which I do like that AnimatedVisibility on a Column puts a sane default there

ephemient · Answer

<https youtrack jetbrains com issue KT 32993> would help

Stylianos Gakis · Answer

Thanks I +1 that one

Alex Vanyo · Answer

That wouldn t apply in this case though it s definitely possible that the content inside `AnimatedVisibility` is getting called even if `model` is `null` This is a case where the strict data flow of Compose makes the required code a bit more explicit for what s actually happening Let s say that the animation for `AnimatedVisibility` takes 10 minutes to animate out the world s slowest remove animation Even if you clear the model something somewhere still needs to hold onto it to continue to render the UI for it for the next 10 minutes The user could be doing other actions other things could be changing and the content inside the `AnimatedVisibility` is still being composed and updated

Stylianos Gakis · Answer

Hmm that s a very valid point and the example of having the animation take 10 minutes really makes this obvious I really wonder what I should be doing there then My content in there takes in this entire model which has quite a lot of state so I can t fake it just while it s animating out In theory what I want in there is for the last known state to be saved as a screenshot and have that thing animate out as I don t need it to be interactive update and so on But I know I can t quite do that I guess there isn t a straight forward solution to this as I see it hmm

Alex Vanyo · Answer

The main documentation for `AnimatedVisibility` has a sample for managing a list where items can be removed with an animation out which might be interesting to take a look at <https developer android com reference kotlin androidx compose animation package summary AnimatedVisibility androidx compose animation core MutableTransitionState androidx compose ui Modifier androidx compose animation EnterTransition androidx compose animation ExitTransition kotlin String kotlin Function1 |https developer android com reference kotlin androidx compose animation package summary AnimatedVisibility androidx lin String kotlin Function1 > The core idea is that an item is only completely removed from everywhere once it has finished animated out

Alex Vanyo · Answer

gt In theory what I want in there is for the last known state to be saved as a screenshot What you could maybe sort of do is cache with `remember` the item to still render with and keep that around even if the item is deleted higher up Or have two lists the logical list which are the items that will be in the list if all animations resolve and the display list which might have additional items that are in the process of animating out

Stylianos Gakis · Answer

Yeah that solution from the link is interesting but would definitely not want to introduce all this extra code to make this animation look a bit better at least not in what I am working on rn which doesn t need the animation to look that perfect I like the idea of temporarily remembering the item for a bit longer but again I m sure if I look back at this in 1 month from now I ll start wondering what the hell I was doing with this extra logic in the UI sweat smile Thing is with all these in a more animation rich screen I d probably justify doing it but now I was trying to get an easy win by animating some portion of a column out instead of having it just disappear But this easy win doesn t end up being that easy after all unfortunately

Stylianos Gakis · Answer

Thanks a lot for helping me by explaining the options I have btw I appreciate it a lot despite me saying that I am most likely going to decide not to use any of those at least right now I ll probably need it in the future blush

Stylianos Gakis · Answer

Hey you know what after a good night s sleep the solution became super obvious I just pass a nullable model to `ActualComposable model ` and I handle the null case in there In my case I can basically show most of what I was showing already it s a card with the same height and all so the animation won t be jumpy This model was needed for some of the text only in this case Foo in the video so the bad thing is just that that text shows nothing instantaneously when it starts leaving instead of also animating out but I get this animation without adding any extra logic just for this animation like remebering stuff and so on So that s much better than what I first had anyway Thanks so much for helping me out

Stylianos Gakis · Answer

TIL `expandVertically` and `shrinkVertically` can take in `expandFrom = Alignment CenterVertically` and `shrinkTowards = Alignment CenterVertically` Every time I do anything with the animation APIs it s always so pleasant to work with to do these little touches that take like no effort it s insane

efemoney · Answer

gt if I look back at this in 1 month from now I ll start wondering what the hell I was doing Thats what comments are for sweat smile

Stylianos Gakis · Answer

gt Thats what comments are for The comments will start lying before you know it They re sneaky like that sweat smile