Showing and hiding UI elements with animations
Often, your UI will contain information that need not be visible all the time. For example, in an address book you may want to show only key attributes of a contact, and present detailed information upon request, typically after a button click. However, just showing and hiding the additional data feels sudden and abrupt. Using animations leads to a more pleasant experience, so let's look into this more.
Understanding AnimatedVisibility()
In this section, we will look at my sample composable AnimatedVisibilityDemo()
. It belongs to the AnimationDemo
project. Like StateDemo()
, SingleValueAnimationDemo()
, and MultipleValuesAnimationDemo()
, it uses a Column()
instance, which contains a Button()
instance and a Box()
instance. This part of the code is simple and straightforward, so there is no need to repeat it in print. The button toggles a state, which starts the animation. Let's see how this works:
AnimatedVisibility( &...