Flutter – Mixing Animations with your UI

Hi Friends,

Hope you are all well. In our past few posts we have been seeing about different type of animations right ? In this post let’s talk about bringing all these into our UI.

To learn the basics of flutter get my course – Click here.

Other flutter courses – here.

Before starting this I would highly recommend reading all the basic posts on animations.

Basics of Animation – Click here.

Delayed Animations – Click here.

Parenting Animations – Click here.

Transforming Animations – Click here.

Value Change Animations – Click here.

Let’s begin.

A screencast of this post:

 

We’ll start off with a combo of moving, masking animations in this post. In other words, we’ll be building something like this.

Webp.net-gifmaker (8)

Cool right. So we have a simple card which upon tapping slides up smoothly to reveal a couple of action buttons (or any other content).

Let’ see how to build this. Create a new Flutter app and open main.dart file. Then paste the below code inside it.

Whoa, that’s too much code. Let’s break this down.

As always this is the definition of the animation. We are simply defining a tween to the get the card to move on the screen.

Let’s talk about the actual UI widget.

Let’s break this down.

  1. We are using a Stack so that we could stack the children one on top of the other.
  2. The bottom container contains the two buttons. This is the container that is hidden from view on initial load.
  3. The top container contains the image/product name/ad on which the user taps. So, in order to capture this gesture, I decided to use a gesture detector. (You could also use an Inkwell to get the nice splash effect). On Tapping, I am simply triggering the animation.
  4. The animation is nothing but a simple transform animation happening along the Y axis. i.e., I am moving the container a little bit towards the top thereby exposing the buttons beneath it. Cool right ? I am reversing this animation in a double Tap gesture as well.

Now run the app and see the effect on a mobile device.

Hope this helped you guys. If you found this helpful, kindly share it with someone and help them too.

Donate to keep this site alive – here.

(If you want to donate but can’t, it’s fine just subscribe to my youtube channel).

Join our flutter community – here.

Thanks for reading. Peace.. :)

 

 

Liked it? Take a second to support admin on Patreon!