Explore Transform Widget In Flutter
Flutter made it simple for developers to build complex UI in record time. With various magnificent widgets like Rows, Columns, ListView, and Positioned, we can play around the screen, get our ideal output, and be fulfilled toward the day’s end. In any case, imagine a scenario where you need a widget that isn’t accessible in the Flutter Widget Catalog?.
In this article, We will Explore Transform Widget In Flutter. We will build a demo program that shows how to use a flutter Transform widget, and we will also show a Scale, Skew, Translate, and Rotate in your Flutter applications.
Table Of Contents::
Introduction:
Transform is a widget that applies a transformation before painting its child, which implies the transformation isn’t considered while figuring how much space this present widget’s child (and accordingly this widget) burns-through.
For more info on Transform Widget,Watch this video:
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.
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.
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.
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 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.
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.
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.
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 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.rotateand 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.
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, 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.rotateand 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.
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.
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.
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 ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
find the source code of the Flutter Transform Widget Demo:
flutter-devs/flutter_transform_widget_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
