Summary  
This chapter explains the two main types of animations—implicit animations that automatically interpolate widget property changes, and explicit animations that use controllers, tweens, and builders for precise, custom timing and coordination.

General domain of usage  
User interface animations

Flutter provides powerful animation capabilities that help you create engaging and dynamic user interfaces. Animations in Flutter fall into two main categories: **implicit** and **explicit** animations.

Understanding the distinction between these types is crucial for choosing the right approach for your UI design.

Ly8gbWFpbi5kYXJ0CmltcG9ydCAncGFja2FnZTpmbHV0dGVyL21hdGVyaWFsLmRhcnQnOwoKdm9pZCBtYWluKCkgewogIHJ1bkFwcChJbXBsaWNpdEFuaW1hdGlvbkRlbW8oKSk7Cn0KCmNsYXNzIEltcGxpY2l0QW5pbWF0aW9uRGVtbyBleHRlbmRzIFN0YXRlZnVsV2lkZ2V0IHsKICBAb3ZlcnJpZGUKICBfSW1wbGljaXRBbmltYXRpb25EZW1vU3RhdGUgY3JlYXRlU3RhdGUoKSA9PiBfSW1wbGljaXRBbmltYXRpb25EZW1vU3RhdGUoKTsKfQoKY2xhc3MgX0ltcGxpY2l0QW5pbWF0aW9uRGVtb1N0YXRlIGV4dGVuZHMgU3RhdGU8SW1wbGljaXRBbmltYXRpb25EZW1vPiB7CiAgZG91YmxlIF9ib3hTaXplID0gMTAwOwogIENvbG9yIF9ib3hDb2xvciA9IENvbG9ycy5ibHVlOwoKICB2b2lkIF9jaGFuZ2VQcm9wZXJ0aWVzKCkgewogICAgc2V0U3RhdGUoKCkgewogICAgICBfYm94U2l6ZSA9IF9ib3hTaXplID09IDEwMCA/IDIwMCA6IDEwMDsKICAgICAgX2JveENvbG9yID0gX2JveENvbG9yID09IENvbG9ycy5ibHVlID8gQ29sb3JzLm9yYW5nZSA6IENvbG9ycy5ibHVlOwogICAgfSk7CiAgfQoKICBAb3ZlcnJpZGUKICBXaWRnZXQgYnVpbGQoQnVpbGRDb250ZXh0IGNvbnRleHQpIHsKICAgIHJldHVybiBNYXRlcmlhbEFwcCgKICAgICAgaG9tZTogU2NhZmZvbGQoCiAgICAgICAgYXBwQmFyOiBBcHBCYXIodGl0bGU6IFRleHQoJ0ltcGxpY2l0IEFuaW1hdGlvbiBFeGFtcGxlJykpLAogICAgICAgIGJvZHk6IENlbnRlcigKICAgICAgICAgIGNoaWxkOiBDb2x1bW4oCiAgICAgICAgICAgIG1haW5BeGlzQWxpZ25tZW50OiBNYWluQXhpc0FsaWdubWVudC5jZW50ZXIsCiAgICAgICAgICAgIGNoaWxkcmVuOiBbCiAgICAgICAgICAgICAgQW5pbWF0ZWRDb250YWluZXIoCiAgICAgICAgICAgICAgICB3aWR0aDogX2JveFNpemUsCiAgICAgICAgICAgICAgICBoZWlnaHQ6IF9ib3hTaXplLAogICAgICAgICAgICAgICAgY29sb3I6IF9ib3hDb2xvciwKICAgICAgICAgICAgICAgIGR1cmF0aW9uOiBEdXJhdGlvbihzZWNvbmRzOiAxKSwKICAgICAgICAgICAgICAgIGN1cnZlOiBDdXJ2ZXMuZWFzZUluT3V0LAogICAgICAgICAgICAgICksCiAgICAgICAgICAgICAgU2l6ZWRCb3goaGVpZ2h0OiAyMCksCiAgICAgICAgICAgICAgRWxldmF0ZWRCdXR0b24oCiAgICAgICAgICAgICAgICBvblByZXNzZWQ6IF9jaGFuZ2VQcm9wZXJ0aWVzLAogICAgICAgICAgICAgICAgY2hpbGQ6IFRleHQoJ0FuaW1hdGUnKSwKICAgICAgICAgICAgICApLAogICAgICAgICAgICBdLAogICAgICAgICAgKSwKICAgICAgICApLAogICAgICApLAogICAgKTsKICB9Cn0=

Implicit animations, such as `AnimatedContainer`, work by automatically animating property changes like width, height, or color. You only update the values, and Flutter handles the timing and interpolation, making them perfect for simple transitions with minimal code.

aW1wb3J0ICdwYWNrYWdlOmZsdXR0ZXIvbWF0ZXJpYWwuZGFydCc7Cgp2b2lkIG1haW4oKSB7CiAgcnVuQXBwKEV4cGxpY2l0QW5pbWF0aW9uRGVtbygpKTsKfQoKY2xhc3MgRXhwbGljaXRBbmltYXRpb25EZW1vIGV4dGVuZHMgU3RhdGVmdWxXaWRnZXQgewogIEBvdmVycmlkZQogIF9FeHBsaWNpdEFuaW1hdGlvbkRlbW9TdGF0ZSBjcmVhdGVTdGF0ZSgpID0+IF9FeHBsaWNpdEFuaW1hdGlvbkRlbW9TdGF0ZSgpOwp9CgpjbGFzcyBfRXhwbGljaXRBbmltYXRpb25EZW1vU3RhdGUgZXh0ZW5kcyBTdGF0ZTxFeHBsaWNpdEFuaW1hdGlvbkRlbW8+CiAgICB3aXRoIFNpbmdsZVRpY2tlclByb3ZpZGVyU3RhdGVNaXhpbiB7CiAgbGF0ZSBBbmltYXRpb25Db250cm9sbGVyIF9jb250cm9sbGVyOwogIGxhdGUgQW5pbWF0aW9uPGRvdWJsZT4gX29wYWNpdHlBbmltYXRpb247CgogIEBvdmVycmlkZQogIHZvaWQgaW5pdFN0YXRlKCkgewogICAgc3VwZXIuaW5pdFN0YXRlKCk7CiAgICBfY29udHJvbGxlciA9IEFuaW1hdGlvbkNvbnRyb2xsZXIoCiAgICAgIGR1cmF0aW9uOiBEdXJhdGlvbihzZWNvbmRzOiAyKSwKICAgICAgdnN5bmM6IHRoaXMsCiAgICApOwogICAgX29wYWNpdHlBbmltYXRpb24gPSBUd2Vlbjxkb3VibGU+KGJlZ2luOiAxLjAsIGVuZDogMC4wKS5hbmltYXRlKF9jb250cm9sbGVyKTsKICB9CgogIEBvdmVycmlkZQogIHZvaWQgZGlzcG9zZSgpIHsKICAgIF9jb250cm9sbGVyLmRpc3Bvc2UoKTsKICAgIHN1cGVyLmRpc3Bvc2UoKTsKICB9CgogIHZvaWQgX3RvZ2dsZUFuaW1hdGlvbigpIHsKICAgIGlmIChfY29udHJvbGxlci5zdGF0dXMgPT0gQW5pbWF0aW9uU3RhdHVzLmNvbXBsZXRlZCkgewogICAgICBfY29udHJvbGxlci5yZXZlcnNlKCk7CiAgICB9IGVsc2UgewogICAgICBfY29udHJvbGxlci5mb3J3YXJkKCk7CiAgICB9CiAgfQoKICBAb3ZlcnJpZGUKICBXaWRnZXQgYnVpbGQoQnVpbGRDb250ZXh0IGNvbnRleHQpIHsKICAgIHJldHVybiBNYXRlcmlhbEFwcCgKICAgICAgaG9tZTogU2NhZmZvbGQoCiAgICAgICAgYXBwQmFyOiBBcHBCYXIodGl0bGU6IFRleHQoJ0V4cGxpY2l0IEFuaW1hdGlvbiBFeGFtcGxlJykpLAogICAgICAgIGJvZHk6IENlbnRlcigKICAgICAgICAgIGNoaWxkOiBDb2x1bW4oCiAgICAgICAgICAgIG1haW5BeGlzQWxpZ25tZW50OiBNYWluQXhpc0FsaWdubWVudC5jZW50ZXIsCiAgICAgICAgICAgIGNoaWxkcmVuOiBbCiAgICAgICAgICAgICAgQW5pbWF0ZWRCdWlsZGVyKAogICAgICAgICAgICAgICAgYW5pbWF0aW9uOiBfb3BhY2l0eUFuaW1hdGlvbiwKICAgICAgICAgICAgICAgIGJ1aWxkZXI6IChjb250ZXh0LCBjaGlsZCkgewogICAgICAgICAgICAgICAgICByZXR1cm4gT3BhY2l0eSgKICAgICAgICAgICAgICAgICAgICBvcGFjaXR5OiBfb3BhY2l0eUFuaW1hdGlvbi52YWx1ZSwKICAgICAgICAgICAgICAgICAgICBjaGlsZDogQ29udGFpbmVyKAogICAgICAgICAgICAgICAgICAgICAgd2lkdGg6IDE1MCwKICAgICAgICAgICAgICAgICAgICAgIGhlaWdodDogMTUwLAogICAgICAgICAgICAgICAgICAgICAgY29sb3I6IENvbG9ycy5ncmVlbiwKICAgICAgICAgICAgICAgICAgICApLAogICAgICAgICAgICAgICAgICApOwogICAgICAgICAgICAgICAgfSwKICAgICAgICAgICAgICApLAogICAgICAgICAgICAgIFNpemVkQm94KGhlaWdodDogMjApLAogICAgICAgICAgICAgIEVsZXZhdGVkQnV0dG9uKAogICAgICAgICAgICAgICAgb25QcmVzc2VkOiBfdG9nZ2xlQW5pbWF0aW9uLAogICAgICAgICAgICAgICAgY2hpbGQ6IFRleHQoJ0ZhZGUnKSwKICAgICAgICAgICAgICApLAogICAgICAgICAgICBdLAogICAgICAgICAgKSwKICAgICAgICApLAogICAgICApLAogICAgKTsKICB9Cn0=

Explicit animations use `AnimationController` and `AnimatedBuilder` to give full control over timing, direction, and coordination. Use implicit animations for simple property changes with minimal code, and explicit animations when you need precise, custom, or user-driven behavior.

Which scenario best illustrates when you should use an explicit animation instead of an implicit one in Flutter?

Master scalable Flutter app development by learning advanced UI techniques, robust architectural patterns, and real-world backend integrations. This course guides you through building maintainable apps with clean structure and seamless Firebase connectivity.

Establish a robust foundation for your Flutter apps by applying proven architectural patterns and organizing your code for scalability and maintainability.

Integrate powerful backend services into your Flutter apps using Firebase for authentication, data storage, and notifications.

Explore Flutter's animation capabilities, from simple implicit animations to advanced navigation effects, to create visually appealing and interactive user interfaces.

Implicit and Explicit Animations