Types of Flutter Animations

Animations are one of the most crucial components in captivating users’ attention and providing a great user experience. There are various types of Flutter animations provided by its widget framework which can breathe life into an application. By incorporating diverse animation to elevate the user experience and enhance the visual representation of the application, the application becomes a seamless endeavor.

In this article, we embark on an exploration of the multitude of various animation options provided by Flutter. Whether the application aims to construct elegant transitions, simulate physics-based behaviors, or tailor custom animations for the app’s specific requirement, Flutter provides a comprehensive solution.

Implicit Animations

Implicit animations can be used whenever we want to animate a widget’s property automatically. Flutter offers animated versions of various commonly used widgets such as AnimatedContainers, AnimatedOpacity, and AnimatedPositioned which can be used to seamlessly animate wherever there is any change.

AnimatedContainer(
  duration: Duration(seconds: 1),
  width: _isExpanded ? 200 : 100,
  height: _isExpanded ? 200 : 100,
  color: _isExpanded ? Colors.red : Colors.blue,
)

Tween Animations

Tween animations are used when we want to interpolate values between two points over a specific duration. It facilitates the definition of a value range, which can be animated over time using AnimationController and Animation. It’s particularly useful for animating various properties like size, position, color and opacity.

TweenAnimationBuilder(
  tween: Tween<double>(begin: 0, end: 1),
  duration: Duration(seconds: 2),
  builder: (BuildContext context, double value, Widget? child) {
    return Opacity(
      opacity: value,
      child: child,
    );
  },
  child: Container(
    width: 200,
    height: 200,
    color: Colors.blue,
  ),
)

Hero Animations

Hero animations are used to achieve smooth transitions between two screens or widgets. By using Hero animation between two screens, we can achieve a seamless visual experience. This animation is specifically when transitioning between screens that display similar content such as images, cards, or avatars.

// "avatar-$index" is a hero tag in a listview
ListTile(
   leading: CircleAvatar(
      child: ClipOval(
         child: Hero(
                tag: "avatar-$index",
                child: Image.network("https://picsum.photos/seed/$index/800"),
              ),
            ),
          ),
          title: Text("Item #$index"),
          onTap: () => _openDetail(context, index),
  );

in detail page,

// Adding the same hero tag in SlivarAppBar's background
SliverAppBar(
            expandedHeight: 300,
            flexibleSpace: FlexibleSpaceBar(
              title: Text("Item #$index"),
              background: Hero(
                tag: "avatar-$index",
                child: Image.network(
                  "https://picsum.photos/seed/$index/800",
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ),

Physics-based Animations

Physics-based animations are used whenever there is a need to simulate real-world physics effects in animation. Flutter provide PhysicsSimulation and Simulation base class that helps to create animations that respond to physical forces like friction, gravity, velocity, etc. This type of animation is perfect for achieving natural and life-like effects such as bounce, spring, drag, etc.

SpringSimulation simulation = SpringSimulation(
  SpringDescription(mass: 1, stiffness: 100, damping: 10),
  startValue,
  endValue,
  velocity,
);

animationController.animateWith(simulation);

Flare Animations

Flare animation uses the Flare tool that creates interactive and vector-based animations. They are lightweight, flexible, and can be used to seamlessly integrate into the Flutter application. Flare allows various features such as shape morphing, skeletal animation, blending modes, and more. Flare animations are exported as .flr files that can be imported into the application.

FlareActor(
  "assets/animations/loading.flr",
  animation: "loading",
  fit: BoxFit.contain,
)

Custom Animations

Custom animations are ideal whenever there is a need to create unique or complex animations which can’t be fulfilled using the built-in animation class. Flutter has a great built-in animation framework that provides fine-tuned control over animation timelines, curves, and transformations.

import 'package:flutter/material.dart';

// In this example, we create a custom animation that fades in a blue container over a // duration of 2 seconds.
class CustomAnimationExample extends StatefulWidget {
  @override
  _CustomAnimationExampleState createState() => _CustomAnimationExampleState();
}

class _CustomAnimationExampleState extends State<CustomAnimationExample>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      vsync: this,
      duration: Duration(seconds: 2),
    );
    _animation = Tween<double>(begin: 0, end: 1).animate(_animationController);
    _animationController.forward();
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animation,
      builder: (BuildContext context, Widget child) {
        return Opacity(
          opacity: _animation.value,
          child: Container(
            width: 200,
            height: 200,
            color: Colors.blue,
          ),
        );
      },
    );
  }
}

In conclusion, Flutter provides various animations to create a seamless user experience. Whether you seek to incorporate subtle motion, captivating transitions or design intricate visual effects, Flutter’s animation capabilities equip you to fashion striking and dynamic user interfaces. Flutter also has a great article on deciding which animation to choose for an application.