Flutter Animated Series : Animated Opacity

Pooja Bhaumik
Jan 30 · 6 min read

Let’s dive into another useful widget in our implicit animations.

What? You don’t know what implicit animations are?
Did you read the
first article of this series?

Let’s talk about Opacity first

So scary.

That was pretty self explanatory. Basically Opacity is the disappearance or appearance of objects. In most scenarios, it can take a value from to .

means full visibility of the object and translates to no visibility.

You can use any value in between them for your desired effect of opacity.

Let’s begin

So we are going to begin creating a Chip like the image below. It’s a simple with rounded edges and a child.

Now let’s wrap the with an widget and add the required properties to the widget.

PS. And I have realized that many of the beginners don’t really know the shortcuts of their IDE’s. This is how you can wrap a widget in Android Studio or IntelliJ IDEA. Click on and press and

The new widget should be renamed to and now you have some code like this

Your will not work at this moment because it requires the following properties — and

You can change the duration of to , , and even . Still don’t know, how an animation can go for days, but atleast Flutter didn’t leave out this function in case a crazy design comes up that requires a day long animation.

Now somewhere in an or method, you can change the and like this —

Basically this means, if is already then make it otherwise it should go back to . Simple toggle logic.

The full code can be found here.

Let’s also add Animated Containers

I think the Chip would come out great if we also add an to increase or decrease the width of the chip, while the text appears.

If you are not aware of , you should read my previous article of this series.

Now our usual is an with a varying width. Here the width is initially or the same as the height. And on , we change the width and opacity both.

And let the magic happen!

We can do even more

Now let’s see what we can do with in a real life app.

Let’s imagine we have a social app where we can add people or follow people. Maybe a little like Instagram?

And in their Profile screen, there is this button that you can click to Add the person.

And once you have added the person, the button should change it to this Message button so that you can quickly message the person you just added/followed.

Finally, it should look something like this —

So let’s start with a new project and in the beginning, we will start with the that changes its and on click.

is our variable that tells you if this user has been added/followed or not. Initially it will be false. So initially you will have a circle shaped with and both and the is filled with . (Here Container also means AnimatedContainer. It’s the same thing). So when the user is added, and becomes true, two things change — is now transparent, and increases to to fit the Message text.

What about the Icon and Message Text?

Yes we are getting there.
Now as you can imagine, the Text and Icon are switching places when value changes. When is , disappears and appears. And when it is , the opposite happens. So I believe we need here to switch the appearance of both.

But how to place both of them together?

Stacks, my friend. If you remember, we use Stacks when we want to place children on top of each other.

So now your takes this as a child, which itself has two children — and , both aligned to the center of the parent.

Now let’s wrap our widget with , and give it a and .

And as you can see, here the says that when is true, make the disappear (because it’s time for Message Text to appear)

The opposite will happen for Message Text widget.

And that’s it. Wrap the entire with an or and toggle the values of inside

Find the entire code here.

What else do we have in the Animated Series ?

Read the Spanish translation by CarlosMillan here —

My articles are free, but you know you can press the clap👏 button 50 times? The higher you go, the more it motivates me to write more stuff for you guys!

Feeling super generous? Buy me a cupcake. 😋

Hello World, I am Pooja Bhaumik. A creative developer and a logical designer. You can find me on Linkedin or stalk me on GitHub or maybe follow me on Twitter? If that’s too social for you, just drop a mail to pbhaumik26@gmail.com if you wish to talk tech with me.

Have a nice fluttery day!

Flutter Community

Articles and Stories from the Flutter Community

Pooja Bhaumik

Written by

Google Developer Expert @Flutter, Mobile Developer, Public Speaker, Technical Blogger, Mentor @MentorCruise

Flutter Community

Articles and Stories from the Flutter Community

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade