SizeTransition Widget – Flutter Widget Guide By Flutter Agency

• Flutter Widget Guide

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:

SizeTransition({
  Key? key,
  Axis axis = Axis.vertical,
  required Animation sizeFactor,
  double axisAlignment = 0.0,
  double? fixedCrossAxisSizeFactor,
  Widget? child,
})

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

Properties:

• 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 Widget, Column 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;

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State createState() => _MyAppState();
}

class _MyAppState extends State {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Material App Bar'),
        ),
        body: const SizeTransitionWidget(),
      ),
    );
  }
}

class SizeTransitionWidget extends StatefulWidget {
  const SizeTransitionWidget({super.key});

  @override
  _SizeTransitionWidgetState createState() => _SizeTransitionWidgetState();
}

class _SizeTransitionWidgetState extends State
    with SingleTickerProviderStateMixin {
  late AnimationController controller;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 400),
    )..repeat(reverse: true);
  }

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: SizeTransition(
        sizeFactor: CurvedAnimation(
          parent: controller,
          curve: Curves.fastOutSlowIn,
        ),
        axis: Axis.vertical, // Added to specify the axis of SizeTransition.
        child: Container(
          // Replaced Image.asset with Container for demonstration.
          width: 100,
          height: 100,
          color: Colors.blue,
        ),
      ),
    );
  }
}

It will give us output like below:

SizeTransition Widget

Conclusion:

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!!

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.