Skip to content

Latest commit

History

History
40 lines (21 loc) 路 1.32 KB

File metadata and controls

40 lines (21 loc) 路 1.32 KB

Using AnimatedContainer to animate Container properties

How easy is it to create this animation? 馃

All you need is a single widget in Flutter: AnimatedContainer 馃憣馃徎

Let's see how it works.

For each property you want to animate, create a state variable with an initial value.

For example, you can animate the width, height, color, and border-radius.

The AnimatedContainer widget is much like Container, but every property will animate when the state changes, using the duration and animation curve provided.

In this example, we pass the state variables we have declared to the relevant Container properties.

To trigger the animation, we call setState and update the values as needed.

This will rebuild the widget and the AnimatedContainer will implicitly animate to the new values (over the given duration).

You can check the full example and play around with it on Zapp.


Found this useful? Show some love and share the original tweet 馃檹


Previous Next
Enable sticky scroll in VSCode How to nest generated files in VSCode