Explore Transform Widget In Flutter
By: Shaiq Khan
Tags: Flutter, Mobile App Development, Dart, Transform, Flutter App Development

Create a new dart file called home_screen.dart inside the lib folder.

We will make four buttons on this home page screen, and each button will show Transform in your flutter application.

Home Screen

All buttons were showing different transform. We will show the deeply below detail.

Types Of Transform Widget:

The Transform widget has a transform property with which we can tell the activity’s sort we need: Scale, Skew, Translate, Rotate, and depict how this transforming activity will be.

The types of Transform Widget are:

> Transform.scale

> Transform (default constructor)

> Transform.rotate

> Transform.translate

Scale:

It is a Transform. Scale constructor. The scale constructor scales the child by the given scale boundary. The scale argument should not be null. It gives the scalar by which to increases the x and y axes. The alignment controls the beginning of the scale; by default, this is the container's bottom-center.

Before Transform Scale

We will make a container, and the alignment was top-left and his child's property. We will make another container with height and width and add an image.

Container(

color: Colors.black38,

width: double.infinity,

height: MediaQuery.of(context).size.height*0.25,

alignment: Alignment.topLeft,

child: Container(

color: Colors.teal[50],

width: MediaQuery.of(context).size.width*0.4,

height: MediaQuery.of(context).size.height*0.12,

child: Image.asset("assets/powered_by.png")),

),

We will then wrap a container from the Transform.scale and add Scale down (0.7) with the bottom-center corner. The container was shrink due to scale property.

Container(

color: Colors.black38,

width: double.infinity,

height: MediaQuery.of(context).size.height*0.25,

alignment: Alignment.topLeft,

child: Transform.scale(

alignment: Alignment.bottomCenter,

scale: 0.7,

child: Container(

color: Colors.teal[50],

width: MediaQuery.of(context).size.width*0.4,

height: MediaQuery.of(context).size.height*0.12,

child: Image.asset("assets/powered_by.png")),

),

),

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Transform Scale

Skew:

There is not a Transform. Skew constructor. It is a default constructor. So we will utilize the Transform widget with the transform property: Transform.skewX(double alpha) or Transform.skewY(double alpha). The alignment controls the cause of the skew; of course, this is the top-left corner.

Before Transform Skew

Before skewing the yellow container inside an image, we will put it inside another, a blue-grey background container, which will clearer the skewed yellow container. We will also use this blue-grey background container to define the margins to the right and left sides.

Container(

margin: EdgeInsets.only(left: 30,right: 30),

color: Colors.blueGrey,

width: double.infinity,

height: MediaQuery.of(context).size.height*0.25,

alignment: Alignment.topLeft,

child: Container(

width: MediaQuery.of(context).size.width*0.4,

color: Colors.yellow[100],

child: Image.asset("assets/powered_by.png"))

),

)

Now, we will wrap a yellow container from the Transform and add Skew along the X-axis. The container direction was to go the x-axis direction.

Container(

margin: EdgeInsets.only(left: 30,right: 30),

color: Colors.blueGrey,

width: double.infinity,

height: MediaQuery.of(context).size.height*0.25,

alignment: Alignment.topLeft,

child: Transform(

transform: Matrix4.skewX(0.4),

child: Container(

width: MediaQuery.of(context).size.width*0.4,

color: Colors.yellow[100],

child: Image.asset("assets/powered_by.png")),

)

),

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Transform Skew X-axis

We add Skew along the Y-axis. The container direction was to go the y-axis direction.

Transform(

transform: Matrix4.skewY(0.4),

child: Container(

width: MediaQuery.of(context).size.width*0.4,

color: Colors.yellow[100],

child: Image.asset("assets/powered_by.png")),

)

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Transform Skew Y-axis

We add Skew along the Y-axis with negative alpha. The container direction was to go the negative y-axis direction.

Transform(

transform: Matrix4.skewY(-0.4),

child: Container(

width: MediaQuery.of(context).size.width*0.4,

color: Colors.yellow[100],

child: Image.asset("assets/powered_by.png")),

)

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Transform Skew Y-axis With Negative Alpha

Rotate:

It is a Transform. Rotate constructor. The rotate constructor rotates the child by the given angle parameter. The rotate argument must not be null.

Before Transform Rotate

Before transform rotates, We will make a container and add a cyan color, and his child's property will add an image.

Container(

color: Colors.cyanAccent[100],

height: MediaQuery.of(context).size.height*0.25,

width: MediaQuery.of(context).size.width*0.7,

child: Image.asset("assets/powered_by.png"),

),

Now, we will wrap an image from Transform.rotate and we will add an angle is pi/2. Then the image is rotated 90-degree angle.

Container(

color: Colors.cyanAccent[100],

height: MediaQuery.of(context).size.height*0.25,

width: MediaQuery.of(context).size.width*0.7,

child: Transform.rotate(

angle: pi/2,

child: Image.asset("assets/powered_by.png")),

),

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Transform Rotate

Translate:

It is a Transform. Translate constructor. We will utilize the constructor Transform.translate rather than the transform property of the Transform widget. It should not be null. It indicates the translation.

Before Transform Translate

Before transform translate, we will make a container and inside make a decoration box, border-radius, height, width, and his child property we will add an image.

Container(

decoration: BoxDecoration(

color: Colors.blueGrey[100],

borderRadius: BorderRadius.circular(20.0),

),

width: MediaQuery.of(context).size.width*0.4,

height: MediaQuery.of(context).size.height*0.12,

child: Image.asset("assets/powered_by.png"),

),

Now, we will wrap a container from Transform.rotate and add an offset(dx,dy). We will translate the X-axis is 130 and Y-axis will be zero.

Transform.translate(

offset: Offset(130, 0),

child: Container(

decoration: BoxDecoration(

color: Colors.blueGrey[100],

borderRadius: BorderRadius.circular(20.0),

),

width: MediaQuery.of(context).size.width*0.4,

height: MediaQuery.of(context).size.height*0.12,

child: Image.asset("assets/powered_by.png"),

),

),

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Transform Translate X-axis

Now, we will add an offset(dx,dy). We will translate the Y-axis is 130 and X-axis will be zero.

Transform.translate(

offset: Offset(0, 130),

child: Container(

decoration: BoxDecoration(

color: Colors.blueGrey[100],

borderRadius: BorderRadius.circular(20.0),

),

width: MediaQuery.of(context).size.width*0.4,

height: MediaQuery.of(context).size.height*0.12,

child: Image.asset("assets/powered_by.png"),

),

),

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Transform Translate Y-axis

Now, we will add an offset(dx,dy). We will translate the both X-axis and Y-axis will be 130.

Transform.translate(

offset: Offset(130, 130),

child: Container(

decoration: BoxDecoration(

color: Colors.blueGrey[100],

borderRadius: BorderRadius.circular(20.0),

),

width: MediaQuery.of(context).size.width*0.4,

height: MediaQuery.of(context).size.height*0.12,

child: Image.asset("assets/powered_by.png"),

),

),

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Transform Translate X-axis & Y-axis

Code File:

Conclusion:

In the article, I have explained the basic structure of the Transform Widget in a flutter; you can modify this code according to your choice. This was a small introduction to Transform Widget On User Interaction from my side, and it’s working using Flutter.

I hope this blog will provide you with sufficient information in Trying up the Explore Transform Widget in your flutter projects. We will show you what the transform widget is?, types using in Transform, and make a demo program for working Transform in your flutter applications, So please try it.

❤ ❤ Thanks for reading this article ❤❤