Flutter - ScaleTransition Animation Example

In this tutorial, we are going to show you how to create scale transition in Flutter by giving an example.

Sometimes, we may need to show animation when a widget is being displayed. If you want the it to appear smaller first and then it becomes bigger gradually, you can use ScaleTransition.

Below is the result of this tutorial

Flutter ScaleTransition

Setup the Animation

To create the transition, we need to create an instance of AnimationController and Animation<double> inside the StatefulWidget.

  AnimationController _controller;
  Animation<double> _animation;

Inside initState, first we initialize the controller. The AnimationController has some options:

Option Description
double value The current value.
Duration duration How long the animation should last.
String debugLabel A label that is used in the toString output.
double lowerBound The lowest value.
double upperBound The highest value.
AnimationBehavior animationBehavior Controller's behavior when AccessibilityFeatures.disableAnimations is true. Default is AnimationBehavior.normal.
TickerProvider vsync (required) TickerProvider for the current context.

Using the value option, we can set the initial size of the widget you're going to animate. If you set it to 0.5, the it will be at the scale of 0.5 of its original size when the animation begins. You can also set the minimum and maximum values using lowerBound and upperBound respectively.

  _controller = AnimationController(duration: const Duration(milliseconds: 2000), vsync: this, value: 0.1);

Then, create an animation which takes the controller as the parent. It can be any animation such as:

  • AlwaysStoppedAnimation
  • ProxyAnimation
  • ReverseAnimation
  • CurvedAnimation
  • TrainHoppingAnimation
  _animation = CurvedAnimation(parent: _controller, curve: Curves.bounceInOut);

Then, start the animation by calling AnimationController's forward method.

  _controller.forward();

Create the ScaleTransition

Now, we create a ScaleTransition by passing the _animation instance as scale argument. The widget we want to animate is passed as child.

  ScaleTransition(
    scale: _animation,
    alignment: Alignment.center,
    child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children:[
        Icon(Icons.check, size: 100.0,color: Colors.green),
      ]
    )
  ),/pre>

Dispose the Controller

After the widget is no longer used, we should dispose the animation controller.

  _controller.dispose();

 We call it inside dispose() by overriding StatefulWidget's.

Full Code

  import 'package:flutter/material.dart';
  import 'package:flutter/animation.dart';
  
  class ScaleTransitionExample extends StatefulWidget {
    _ScaleTransitionExampleState createState() => _ScaleTransitionExampleState();
  }
  
  class _ScaleTransitionExampleState extends State<ScaleTransitionExample> with TickerProviderStateMixin {
  
    AnimationController _controller;
    Animation<double> _animation;
  
    initState() {
      super.initState();
      _controller = AnimationController(
          duration: const Duration(milliseconds: 2000), vsync: this, value: 0.1);
      _animation = CurvedAnimation(parent: _controller, curve: Curves.bounceInOut);
  
      _controller.forward();
    }
  
    @override
    dispose() {
      _controller.dispose();
      super.dispose();
    }
  
    Widget build(BuildContext context) {
  
      return Container(
          color: Colors.white,
          child: ScaleTransition(
              scale: _animation,
              alignment: Alignment.center,
              child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children:[
                    Icon(Icons.check, size: 100.0,color: Colors.green),
                  ]
              )
          )
      );
    }
  }
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'ListView Example',
        home: ScaleTransitionExample(),
      );
    }
  }
  
  void main() => runApp(MyApp());
  

Summary

That's how to use ScaleTransition. You can also read about: