Implicit Animations in Flutter

30 March, 2023

Contributors

ShowwcaseHQ

@showwcasehq

Implicit animations in Flutter are created automatically when a widget's properties change. They are typically used to animate visual properties of a widget, such as its position, size, or color.

Here's an example of an implicit animation that animates the position of a widget when it is tapped:

import 'package:flutter/animation.dart';

AnimationController controller;
Animation<Offset> animation;

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

@override
Widget build(BuildContext context) {
  return GestureDetector(
    onTap: () {
      controller.forward();
    },
    child: 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 Tween is used to define the range of values that the position will transition through over the course of the animation. The AnimatedBuilder widget is then 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 implicit animations in Flutter, you can check out the following resources:

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

Implicit Animations in Flutter

More Articles