Flutter Animated Series : Animated Opacity
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
That was pretty self explanatory. Basically Opacity is the disappearance or appearance of objects. In most scenarios, it can take a value from
1.0 means full visibility of the object and
0.0 translates to no visibility.
You can use any value in between them for your desired effect of opacity.
So we are going to begin creating a Chip like the image below. It’s a simple
Container with rounded edges and a
Now let’s wrap the
Text with an
AnimatedOpacity 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
Text and press
Alt + Enter and
Wrap with a new widget
The new widget should be renamed to
AnimatedOpacity and now you have some code like this
AnimatedOpacity will not work at this moment because it requires the following properties —
You can change the duration of
hours and even
days. 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
onTap() method, you can change the
setState() like this —
Basically this means, if
_opacity is already
0.0 then make it
1.0 otherwise it should go back to
0.0 . 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
AnimatedContainer to increase or decrease the width of the chip, while the text appears.
If you are not aware of
AnimatedContainers, you should read my previous article of this series.
Now our usual
Container is an
AnimatedContainer with a varying width. Here the width is initially
50.0 or the same as the height. And on
setState(), 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
AnimatedOpacity 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
AnimatedContainer that changes its
color on click.
_isAdded 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
60.0 and the
Container is filled with
Colors.blue. (Here Container also means AnimatedContainer. It’s the same thing). So when the user is added, and
_isAdded becomes true, two things change —
color is now transparent, and
width increases to
160 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
_isAdded value changes. When
Icon disappears and
Text appears. And when it is
false, the opposite happens. So I believe we need
Opacity 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
AnimatedContainer takes this
Stack as a child, which itself has two children —
Text, both aligned to the center of the parent.
Now let’s wrap our
Icon widget with
AnimatedOpacity, and give it a
And as you can see, here the
opacity says that when
isAdded is true, make the
Icon 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
AnimatedContainer with an
GestureDetector and toggle the values of
Find the entire code here.
What else do we have in the Animated Series ?
- AnimatedCrossFade (Coming soon)
- And many more…
Read the Spanish translation by CarlosMillan here —
Serie Flutter Animated: Opacidad Animada
Fuente original: https://medium.com/flutter-community/flutter-animated-series-animated-opacity-c11137883a8d
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 email@example.com if you wish to talk tech with me.
Have a nice fluttery day!