ScaleTransition Widget – Flutter Widget Guide By Flutter Agency

• Flutter Widget Guide

Earlier we have been through Animated Widgets like AnimatedListState Widget, AnimatedDefaultTextStyle Widget, AnimatedBuilder Widget so now this is time for something new called ScaleTransition Widget with a detailed article on it.

What is ScaleTransition Widget in Flutter?

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

Default Constructor will look like below:

ScaleTransitionWidget({
  Key key,
  @required Animation<double> scale,
  Alignment alignment: Alignment.center,
  Widget child,
});

In the Above Constructor, all attributes marked with @required must not be empty.

Properties:

• Key key: This attribute represents how one widget should replace another widget in a tree.
• Animation<double> scale: This attribute will the animation that controls the scale of the child. If the current value of the scale animation is v, the child will be painted v times its normal size.
• Alignment alignment: This attribute will define the alignment of the origin of the coordinate system in which the scale takes place, relative to the size of the box. For example, to set the origin of the scale to the bottom middle, you can use an alignment of (0.0, 1.0).
• Widget Child: This attribute is used to define the widget below this widget in the tree. This widget can only have one child. To layout multiple children, let this widget’s child be a widget such as Row Widget, Column Widget, or Stack Widget, which have a children’s property, and then provide the children to that widget.

Follow below Step by Step instruction to understand ScaleTransition Widget.

SetUp the Animation

To create the transition, we need to create an instance of AnimationController and Animation<double> inside the StatefulWidget. Don’t forget to use it with TickerProviderStateMixin while creating Animation in Flutter App.

AnimationController _controller;
Animation<double> _animation;

Inside initState(), first, we need to initialize the controller.

initState() {
  super.initState();
  _controller = AnimationController(
    duration: const Duration(
      milliseconds: 2000,
    ),
    vsync: this,
    value: 0.1,
  );
  _animation = CurvedAnimation(
    parent: _controller,
    curve: Curves.bounceInOut,
  );

  _controller.forward();
}

We need to dispose of the controller like below:

@override
dispose() {
  _controller.dispose();
  super.dispose();
}

Now it’s time to define ScaleTransition Widget using the below code snippet.

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

How to use ScaleTransition Widget in Flutter?

The following code snippet tells us how to implement ScaleTransition Widget in Flutter.

import 'package:flutter/material.dart';
import 'package:flutter/animation.dart';

class ScaleTransitionWidget extends StatefulWidget {
  _ScaleTransitionWidgetState createState() => _ScaleTransitionWidgetState();
}

class _ScaleTransitionWidgetState extends State<ScaleTransitionWidget>
    with TickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _animation;

  initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(
        milliseconds: 1000,
      ),
      vsync: this,
      value: 0.1,
    );
    _animation = CurvedAnimation(
      parent: _controller,
      curve: Curves.bounceIn,
    );
    _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,
            ),
          ],
        ),
      ),
    );
  }
}

We will get output like below:

Scale Transition Widget

Conclusion:

In this article, we have learned step by step guide to implement ScaleTransition Widget with the help of an example in a Flutter.

Thanks for being with us on a Flutter Journey !!!

Do let us know if you need assistance with Flutter Development?

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Written by Abhishek Dhanani

Abhishek Dhanani, a skilled software developer with 3+ years of experience, masters Dart, JavaScript, TypeScript, and frameworks like Flutter and NodeJS. Proficient in MySQL, Firebase, and cloud platforms AWS and GCP, he delivers innovative digital solutions.