How to make an animated card stack in flutter

Question

Card UIs seem to be very popular lately, and I've recently started learning flutter, so I decided to combine the two and make a card UI in flutter. However, since flutter is new to me, I am having trouble getting started. I want to make something like this

https://cdn.dribbble.com/users/1998175/videos/36904/flower_store_2.mp4

And I can get the card stack part right, but I don't really know how to do the animation and scrolling, which both look pretty complicated. I've read a little bit about sliver lists but don't really understand them. Basically, I want to accomplish the following tasks:

1. Have multiple cards (with potentially complex content) which appear as though they are growing and shrinking/sliding up and down the screen

2. Have a navigation bar that is pinned to the bottom even as the cards go up and down (like the "checkout" button in the example I linked)

3. Be able to programmatically control these cards (i.e. if I user clicks a certain button I want to be able to cause a partially visible card to slide up and fill the page)

I don't know what the best widget type is in order to accomplish all this - I would imagine it is either an animated stack or a sliver list, although it could be something else entirely.

Either way, I would so appreciate if someone could post a small example of something like this (just the cards, there's no need to bother with the content, I'll handle that). Thanks in advance!

Answer 1

Do you want to re-create this design, or just part of it?

I would go this logic:

Stack: - Flower photo (You can’t have tappable elements here) NestedScrollView: - headerSliverBuilder parameter: SliverToBoxAdapter with empty Container sized to show background image, you can’t put background photo here because you have a green rounded bag icon which floating on the top of white block. - body: stack of stacks or listview, depends on do you need this animation when light green block pulls up dark green block in the third second:

The first stack contains:

• White container with rounded top conners with flower description and class type slider.
• Light green container with decoration options.
• The green rounded bag icon

The second stack contains:

• Animation container with dark green background
• Inner content of dark green block: price calculation
• When you add flower decoration from light green block, inner content is changing, you need to listen the size of its height, and send the heigh to animated container what is how you will have the effect of changing height.

It's very complicated design so it's hard to write about all details.

But I hope these advices will you to go in the right direction.

P.s. Just start to make it, and when you got any problems write your questions..