Part 3, UI Widgets from scratch in Jetpack Compose.

Tutorial, Part 3 of 3 (Adding Animation to The Deck of Cards)

StudyCards app — remember answer to any question

In this trilogy of tutorials, I will show how I build Compound UI Widgets for my pet project (Study Cards app — my version of the flash/mem cards).

In Part One of this tutorial, I showed how to build an iOS-styled ListView widget with the rows (list items) that have a different shape, depending on the number of rows and the row location and that look different in edit or delete mode.

In Part Two, we were building the Deck of Cards widget.

In Third Part - we will add the state-driven swipe and flip animation and the drag gesture recognizer. Also, we will apply the separation of concerns principles to this widget. To keep the code of the widget small and to have separated classes responsible for the animation and user actions, and other events.

First, let’s define what our widget supposed to do and how it should behave:

1. A user should be able to drag the card from the top of the deck, and the card should go above all UI elements on the screen;
2. If a user drops the card, it should be swiped out from the screen or returned to the initial position, depending on the place on the screen where the user drops it;
3. Each time a user swipes the card out from the screen, the deck should push and show the next card on the top;
4. We should be able to swipe the top card out from the screen programmatically (for the Play All Cards mode);
5. The top card should flip to the back and front when a user presses the Peep or Back button;
6. When a user drags the top card, we should push the rest of the cards to the top, one position up.

Of Course, we shall use animation for all those transitions as much as possible! Animations are essential in a modern mobile app in order to implement a smooth and understandable user experience.

I found a helpful chart in Jetpack Compose documentation that helps decide what kind of animation is the best use in your case.
For the Flip animation, I choose the animate*AsAState because I’ll be animating multiple values simultaneously, my…