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

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:

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:

• FadeTransition, a widget that animates the opacity of its child widget.
• SlideTransition, a widget for creating transition animation.
• RotationTransition, a widget for creating rotation animation.
• AnimatedSwitcher, a widget for creating animation when switching between two widgets.