Flutter Animation Tutorial #2 - Built-in Animations

The video introduces Flutter animations, highlighting the many ways to create them, which can initially be confusing. It categorizes animations into two main types: explicit and implicit. Explicit animations offer more control using an AnimationController but are more complex to set up. Implicit animations are easier to set up using built-in or custom animated widgets but provide less granular control. The choice depends on the animation's nature and coding preference. This series will cover both, starting with implicit animations.

To demonstrate built-in animated widgets, a sandbox file is created in a 'screens' folder. A new stateful widget called 'Sandbox' is added and imported into main.dart as the home screen. A Scaffold is used as the body, and initial animated widgets will be placed within it.

The tutorial begins with the AnimatedContainer widget. Flutter provides animated versions of existing widgets (e.g., AnimatedPadding, AnimatedOpacity). These allow animation of properties within the container. Variables for margin, opacity, width, and color are defined to dynamically control the AnimatedContainer's properties. A 'duration' parameter is essential for any animated widget, specifying the animation's length.

To trigger animations, buttons are added within the AnimatedContainer's child (a Column of widgets). When a button is clicked, the 'setState' method is called to update the associated property (margin, color, or width) of the AnimatedContainer. Because it's an AnimatedContainer, the changes transition smoothly over the specified duration instead of instantly.

The video then introduces AnimatedOpacity, another built-in animated widget. Unlike AnimatedContainer, opacity is a property of the AnimatedOpacity widget itself, not its child. An AnimatedOpacity widget is added with its own duration and a Text widget as its child. A button is created to change the 'opacity' variable, animating the 'hide me' text from fully visible (1) to invisible (0).

The tutorial concludes by pointing to the Flutter documentation for other built-in animated widgets such as AnimatedPositioned and AnimatedSize, encouraging viewers to explore them. The next lesson will focus on creating custom implicit animations using the TweenAnimationBuilder.