SizeTransition Widget – Flutter Widget Guide By Flutter Agency

· 5 min read
SizeTransition Widget - Flutter Widget Guide By Flutter Agency
SizeTransition Widget - Flutter Widget Guide By Flutter Agency

Earlier we have been through Transition Widget in Flutter like ScaleTransition Widget, RotationTransition Widget, FadeTransition Widget so now let us add one more Transition Widget to the list that is SizeTransition Widget.

What is SizeTransition Widget in Flutter?

SizeTransition Widget is a widget that animates its own size and clips and aligns its child.

SizeTransition Widget acts as a ClipRect that animates either its width or its height, depending upon the value of the axis. The alignment of the child along the axis is specified by the axisAlignment.

The default Constructor will have a code snippet like below:

  Key key,
  Axis axis: Axis.vertical,
  @required Animation<double> sizeFactor,
  double axisAlignment: 0.0,
  Widget child,

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


  • Key key: This attribute key controls how one widget replaces another widget in the tree.
  • Axis axis: This attribute defines the axis direction whether this could be vertical or horizontal. The default value will be Axis.vertical if the user makes changes in sizeFactor which modify the width.
  • Animation<double> sizeFactor: This attribute defines the animation that controls the (clipped) size of the child. If the current value of sizeFactor is v then the width or height of the widget will be its intrinsic width or height multiplied by v.
  • double axisAlignment: This attribute is used to define how to align the child along the axis that sizeFactor is modifying. A value of -1.0 indicates the top when the axis is Axis.vertical, and the start when the axis is Axis.horizontal. The start is on the left when the text direction in effect is TextDirection.ltr and on the right when it is TextDirection.rtl. A value of 1.0 indicates the bottom or end, depending upon the axis.  A value of 0.0 (the default) indicates the center for either axis value.
  • 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 WidgetColumn Widget, or Stack Widget, which have a children’s property, and then provide the children to that widget.

SizeTransition will conform to the constraints it is given, so be sure to put it in a context where it can change size. For instance, if you place it into a container with a fixed size, then the SizeTransition will not be able to change the size and will appear to do nothing.

How to use SizeTransition Widget in Flutter?

The following code snippet shows how to use SizeTransition Widget in Flutter.

To use SizeTransition Widget in Flutter Mobile Application make a  Stateful Widget and make use of with SingleTickerProviderStateMixin in it and define the Controller like below:

AnimationController controller;

initState() will have a code snippet like below:

void initState() {
  controller = AnimationController(
    vsync: this,
    duration: Duration(milliseconds: 400),
      reverse: true,
    ); // automatically animation will be started

Make use of like it like below:

      child: Image.asset(
      sizeFactor: CurvedAnimation(
        curve: Curves.fastOutSlowIn,
        parent: controller,

It will give us output like below:

SizeTransition Widget - Flutter Widget Guide By Flutter Agency

SizeTransition Widget


In this article, we dive into What is SizeTransition Widget in Flutter along with how to implement it in a Flutter.

Thanks for being with us a Flutter Journey !!!

Keep Learning!! is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc. 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.

Leave a Reply