Implicit Flutter Animations

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

Part 1: Animation Fundamentals

4. Create Custom 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: 3. Add Realistic Motions with Curves Next episode: 5. Animate a Social Share Button

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, use of single quotes over double quotes as per the Flutter lint rules that is used to encourage good coding practises. Also, the return value of the Tween variable is explicitly mentioned to avoids errors of passing the incompatatible Tween to TweenAnimtionBuilder.

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

In earlier episodes, we introduced ImplicitlyAnimatedWidgets. We saw that Flutter provides lots of these ready made widgets and all we have to do is to find the one that suits our animation needs.

...
TweenAnimationBuilder(
    duration: const Duration(milliseconds: 500),
    tween: Tween<double>(begin: 0.0, end: progress),
    builder: (_, double value, __) {
        return Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
                CircularProgressIndicator(
                    value: value,
                ),
                Text("${(value * 100).round()}"),
            ],
        );
    },
),
...

...
static final Tween<double> fabTween = Tween(begin: 0.0, end: 1.0);
...
floatingActionButton: TweenAnimationBuilder<double>(
    duration: const Duration(milliseconds: 500),
    curve: Curves.bounceOut,
    tween: fabTween,
    child: FloatingActionButton(
        onPressed: progress > 0.9
            ? null
            : () {
                setState(() {
                progress += 0.1;
                });
            },
        tooltip: 'Increment',
        child: const Icon(Icons.add),
    ),
    builder: (_, value, child) {
        // return Transform.rotate(
        return Transform.scale(
            scale: value,
            // angle: pi*value,
            child: child,
        );
    },
),
...