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 to 0.0 .
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.
Let’s begin
So we are going to begin creating a Chip like the image below. It’s a simple Container with rounded edges and a Text child.
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
Your AnimatedOpacity will not work at this moment because it requires the following properties — duration and opacity
You can change the duration of seconds to milliseconds, minutes, 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 onPressed() or onTap() method, you can change the _opacity and 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 width and 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 Container with width and height both 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 _isAdded is true, 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 — Icon and Text, both aligned to the center of the parent.
Now let’s wrap our Icon widget with AnimatedOpacity, and give it a Duration and Opacity.
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 InkWell or GestureDetector and toggle the values of _isAdded inside setState()
Find the entire code here.
What else do we have in the Animated Series ?
- AnimatedContainers
- AnimatedOpacity
- AnimatedCrossFade (Coming soon)
- And many more…
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!
