Transform Widget

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

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

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

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:

Translate

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.

 

Nirali Patel

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.

Leave a comment

Your email address will not be published. Required fields are marked *


Discuss Your Project

Connect with Flutter Agency's proficient skilled team for your app development projects across different technologies. We'd love to hear from you! Fill out the form below to discuss your project.

Have Project For Us

Get in Touch

"*" indicates required fields

ready to get started?

Fill out the form below and we will be in touch soon!

"*" indicates required fields