Implicit Flutter Animations

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

Part 1: Animation Fundamentals

02. Understand Implicit Animations

Episode complete

Play next episode

Next
About this episode
Leave a rating/review
See forum comments
Cinema mode Mark complete Download course materials
Previous episode: 01. Learn Animation Basics Next episode: 03. Add Realistic Motions with Curves

Get immediate access to this and 4,000+ other videos and books.

Take your career further with a Kodeco Personal Plan. With unlimited access to over 40+ books and 4,000+ professional videos in a single subscription, it's simply the best investment you can make in your development career.

Learn more Already a subscriber? Sign in.

Notes: 02. Understand Implicit Animations

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’re accessing parts of this content for free, with some sections shown as obfuscated text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Heads up... You’re accessing parts of this content for free, with some sections shown as obfuscated text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

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;
});
...