Explicit Animations in Flutter

30 March, 2023

Contributors

ShowwcaseHQ

@showwcasehq

Explicit animations in Flutter are created using the AnimationController class and are typically used to animate more complex visual changes that cannot be achieved using implicit animations.

Here's an example of an explicit animation that animates the position of a widget along a curved path:

import 'package:flutter/animation.dart';

AnimationController controller;
Animation<Offset> animation;

@override
void initState() {
  super.initState();
  controller = AnimationController(duration: Duration(seconds: 1), vsync: this);
  final curve = CurvedAnimation(parent: controller, curve: Curves.easeInOut);
  animation = Tween<Offset>(begin: Offset(0, 0), end: Offset(1, 1)).animate(curve);
  controller.forward();
}

@override
Widget build(BuildContext context) {
  return AnimatedBuilder(
    animation: animation,
    builder: (context, child) {
      return Transform.translate(
        offset: animation.value,
        child: child,
      );
    },
    child: Text('Hello World'),
  );
}

In this example, the AnimationController is used to control the animation, and the CurvedAnimation is used to apply a curve to the animation to make it accelerate or decelerate. The Tween is then used to define the range of values that the position will transition through over the course of the animation. The AnimatedBuilder widget is used to display the animation, with the Transform.translate widget used to move the Text widget based on the value of the animation object.

For more information on explicit animations in Flutter, you can check out the following resources:

Flutter documentation on explicit animations: https://flutter.dev/docs/development/ui/animations/explicit-animations
Flutter Animation Examples sample app: https://github.com/flutter/samples/tree/master/animation_examples

Explicit Animations in Flutter

More Articles