Implicit Flutter Animations

Oct 4 2022 Dart 2.17, Flutter 3.0, Visual Studio Code 1.7

Part 1: Animation Fundamentals

2. Understand Implicit Animations

Episode complete

Play next episode

Next
Save for later
About this episode
See versions
See forum comments
Cinema mode Mark complete Download course materials
Previous episode: 1. Learn Animation Basics Next episode: 3. Add Realistic Motions with Curves

The student materials have been reviewed and are updated as of August 2022.

The updated material uses null safety and also deploys the use of const keyword with constant constructors as per the Flutter lint rules that is used to encourage good coding practises.

Heads up... You've reached locked video content where the transcript will be shown as obfuscated text.

You can unlock the rest of this video course, and our entire catalogue of books and videos, with a kodeco.com Professional subscription.

Unlock Now

What just happened in the previous episode? Why did the AnimatedContainer know how to animate the widget?

...
// class member
Color boxColor = Colors.green;
...
// build
AnimatedContainer(
...
    color: boxColor,
...
//FAB
onPressed: () {
    setState(() {
        ...
        boxColor = boxColor == Colors.green ? Colors.orange : Colors.green;
    });
},

...
// class member
double boxOpacity = 1.0;
...
// build (wrap the container with AnimatedOpacity)
...
AnimatedOpacity(
    opacity: boxOpacity,
    duration: const Duration(milliseconds: 1000),
    child: Container(
        // duration: Duration(milliseconds: 1000) // comment out the duration
...
//FAB
onPressed: () {
    setState(() {
        ...
        boxOpacity = boxOpacity == 1.0 ? 0.0 : 1.0;
    });
},

...
bool showBox = false;
...
AnimatedOpacity(
    opacity: showBox ? 1.0 : 0.0,
    duration: const Duration(milliseconds: 1000),
    child: AnimatedContainer(
        duration: const Duration(milliseconds: 1000),
        width: showBox ? 200 : 100,
        height: showBox ? 200 : 100,
        color: showBox ? Colors.orange : Colors.green,
    ),
)
...
setState(() {
    showBox = !showBox;
});
...