Transform Widget – Flutter Widget Guide By Flutter Agency

Animations are used widely in mobile applications now a days. They help to emphasize important things or actions and make them more attractive. In this article, we will discuss a widget called Transform Widget.

What is Transform Widget?

Transform Widget is a which is often used with Animations. It helps to change the shape, position, or rotation of the child widget.

Transform Widget has 4 main constructors :

• Transform (default constructor)
• Transform.rotate()
• Transform.scale()
• Transform.translate()

We will discuss every Constructor in detail.

1. Default constructor :

 const Transform({
 super.key,
 required this.transform,
 this.origin,
 this.alignment,
 this.transformHitTests = true,
 this.filterQuality,
 super.child,
}) : assert(transform != null);

In Above Constructor all fields marked with @required must not be empty.

The default constructor transform allows us to do multiple transformations at once. It takes a 4×4 matrix in the transform parameter also called the transformation matrix.

How to use the Transform Widget in Flutter?

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

Transform(
        transform: Matrix4.skewY(0.3),
        origin: Offset(0, 0),
        child: Container(
          width: 200,
          height: 200,
          color: Colors.amber,
        ),
      ),

We will get output like below :

Default Constructor

2. Transform.rotate()

Constructor of Transform.rotate() will look like below :

  Transform.rotate({
 super.key,
 required double angle,
 this.origin,
 this.alignment = Alignment.center,
 this.transformHitTests = true,
 this.filterQuality,
 super.child,
}) : transform = _computeRotation(angle);

In Above Constructor all fields marked with @required must not be empty.

As the name suggests Transform.rotate simply rotates the child widget by the given angle. The secondary parameter is the origin. By default, the widget rotates around its center – default origin. This parameter accepts Offset which defines the distance from the center of the widget.

Transform.rotate(
  angle: pi / 4,
  child:// To do
)

Example :

 Transform.rotate(
        origin: Offset(-50, -50),
        angle: pi / 4,
        child: Container(
          color: Colors.amber,
          width: 100,
          height: 100,
        ),
      ),

We will get output like below:

Transform.rotate()

3. Transform.scale():

Constructor of Transform.scale() will look like below :

 Transform.scale({
 super.key,
 double? scale,
 double? scaleX,
 double? scaleY,
 this.origin,
 this.alignment = Alignment.center,
 this.transformHitTests = true,
 this.filterQuality,
 super.child,
});

In Above Constructor all fields marked with @required must not be empty.

• Scale Constructor scales the child by the given factor. we set animation _value from 0.5 to 1. Scale parameter = 0.5 means reducing the size of the child by half.

Transform.scale(
        scale: _value,
        origin: Offset(-50, -50),
        child: Container(
          color: Colors.amber,
          width: 200,
          height: 200,
        ),
      ),

We will get output like below:

Transform.scale()

4. Transform.translate(): Transform.translate() moves the child Widget by Offset in X and Y direction. There is no origin parameter in this constructor. Here we move a Container Widget from one screen side to another by supplying X coordinate and animating it.

Constructor of Transform.translate() will look like below :

 Transform.translate({
 super.key,
 required Offset offset,
 this.transformHitTests = true,
 this.filterQuality,
 super.child,
});

Example :

Transform.translate(
        offset: Offset(200.0, 110.0),
        child: Container(
          height: 150.0,
          width: 150.0,
          color: Colors.purple,
        ),
      ),

We will get output like below:

Transform.translate()

Conclusion:

In this article, we have been through What is Transform Widget in Flutter along with how to implement it in a Flutter.

Thanks for being with us.
Need help for Flutter Development? Do let us know.

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 Nirali Patel

Nirali Patel is a dedicated Flutter developer with over two years of experience, specializing in creating seamless mobile applications using Dart. With a passion for crafting user-centric solutions, Nirali combines technical proficiency with innovative thinking to push the boundaries of mobile app development.