Animations with AnimatedOpacity

What’s this article about?

When we want to change the opacity of any widget with some transition animation, we can use animated opacity.

So let’s start!

It is an animation version of the opacity, which transitions the child’s opacity in a given duration when we change the opacity parameter.

AnimatedOpacity is relatively expensive because it requires painting the child into an intermediate buffer.

So let’s see what properties it provides.

opacity-: This is a property where we provide the opacity. Here, 1.0 means the widget will be fully opaque(visible), and 0.0 means the widget will be transparent.

duration-: This property defines how long our animation will run.

curve-: This property will define the type of animation, meaning how the widget will transit between two different opacities.

child-: Here is where our child widget goes.

onEnd-: We can call a function at the end of the animation using this property.

alwaysIncludeSemantics-: Whether the semantic information of the children is always included. Defaults to false. When true, regardless of the opacity settings, the child semantic information is exposed as if the widget were fully visible. This is useful in cases where labels may be hidden during animations that would otherwise contribute to relevant semantics.

key-: It is used as an identifier for the widgets.

Let’s see an example and understand it.

Initial Requirement

We will use a boolean variable animate to change the state and opacity variable to set a new opacity. In addition, we are going to use a stateful widget for changing the state.

class _HomeState extends State<Home> {
  bool animate = false;
  double opacity = 0.9;
     ...
}

Now we will create a function to change the opacity with the press of the button,

Now let’s make our widget,

Which will look something like this in UI,

You can check out this demo here.

Here is the next blog in the series Animations with AnimatedCrossfade & AnimatedAlign.

Hope this article has helped you learn something new today. If you’ve enjoyed reading this article, be sure to throw me a couple of claps!👏

Happy Learning :)