Flutter - Transform Widget
Last Updated :
24 Apr, 2025
The Transform widget in Flutter is used to apply various transformations to its child widget, such as rotation, translation (positioning), scaling, and skewing. In this article, we are going to implement all transformations such as rotation, translation (positioning), scaling, and skewing made by the Transform widget in Flutter. A sample image is given below to get an idea about what we are going to do in this article.
-768.jpg)
Basic Syntax of Transform Widget
Transform(
transform: Matrix4.identity(), // Specify the transformation matrix
alignment: Alignment.center, // Specify the alignment of the transformation
origin: Offset.zero, // Specify the origin point of the transformation
child: YourChildWidget(), // The child widget to apply the transformation to
)
Required Tools
To build this app, you need the following items installed on your machine:
- Visual Studio Code / Android Studio
- Android Emulator / iOS Simulator / Physical Device device.
- Flutter Installed
- Flutter plugin for VS Code / Android Studio.
Step By Step Implementation
Step 1: Create a New Project in Android Studio
To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.
Step 2: Import the Package
First of all import material.dart file.
import 'package:flutter/material.dart';
Step 3: Execute the main Method
Here the execution of our app starts.
Dart
void main() => runApp(MyApp());
Step 4: Create MyApp Class
In this class we are going to implement the MaterialApp , here we are also set the Theme of our App.
Dart
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.green, // Set the app's primary theme color
),
debugShowCheckedModeBanner: false,
home: TransformExample(),
);
}
}
Step 5: Create TransformExample Class
In this class we are going to Implement the Transform widget that help to apply different transformations like rotation, translation , scaling, and skewing to the child Container Widget. We use four different Transform widgets within a Column to demonstrate different transformations.
- The first Transform widget applies a 45-degree rotation.
- The second Transform widget applies a translation (positioning) by moving the widget 50 pixels to the right.
- The third Transform widget applies scaling by increasing the size by a factor of 1.5.
- The fourth Transform widget applies skewing by applying a horizontal skew (shear) effect.
Comments are added for better understanding.
// Rotation
Transform.rotate(
angle: 0.785, // 0.785 radians = 45 degrees
child: Container(
width: 100,
height: 100,
color: Colors.blue, // Blue container
child: Center(
child: Text(
'Rotation', // Text label
style: TextStyle(
color: Colors.white, // Text color
fontWeight: FontWeight.bold, // Bold text
),
),
),
),
),
// Translation (Positioning)
Transform.translate(
offset: Offset(50.0, 0.0), // Move 50 pixels to the right
child: Container(
width: 100,
height: 100,
color: Colors.red, // Red container
child: Center(
child: Text(
'Translation', // Text label
style: TextStyle(
color: Colors.white, // Text color
fontWeight: FontWeight.bold, // Bold text
),
),
),
),
),
// Scaling
Transform.scale(
scale: 1.5, // Scale to 1.5 times the default size
child: Container(
width: 100,
height: 100,
color: Colors.green, // Green container
child: Center(
child: Text(
'Scaling', // Text label
style: TextStyle(
color: Colors.white, // Text color
fontWeight: FontWeight.bold, // Bold text
),
),
),
),
),
// Skewing
Transform(
transform: Matrix4.skew(0.2, 0.0), // Apply horizontal skew
child: Container(
width: 100,
height: 100,
color: Colors.orange, // Orange container
child: Center(
child: Text(
'Skewing', // Text label
style: TextStyle(
color: Colors.white, // Text color
fontWeight: FontWeight.bold, // Bold text
),
),
),
),
),
Dart
class TransformExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Transform Example'), // AppBar with a title
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
// Rotation
Transform.rotate(
angle: 0.785, // 0.785 radians = 45 degrees
child: Container(
width: 100,
height: 100,
color: Colors.blue, // Blue container
child: Center(
child: Text(
'Rotation', // Text label
style: TextStyle(
color: Colors.white, // Text color
fontWeight: FontWeight.bold, // Bold text
),
),
),
),
),
// Translation (Positioning)
Transform.translate(
offset: Offset(50.0, 0.0), // Move 50 pixels to the right
child: Container(
width: 100,
height: 100,
color: Colors.red, // Red container
child: Center(
child: Text(
'Translation', // Text label
style: TextStyle(
color: Colors.white, // Text color
fontWeight: FontWeight.bold, // Bold text
),
),
),
),
),
// Scaling
Transform.scale(
scale: 1.5, // Scale to 1.5 times the default size
child: Container(
width: 100,
height: 100,
color: Colors.green, // Green container
child: Center(
child: Text(
'Scaling', // Text label
style: TextStyle(
color: Colors.white, // Text color
fontWeight: FontWeight.bold, // Bold text
),
),
),
),
),
// Skewing
Transform(
transform: Matrix4.skew(0.2, 0.0), // Apply horizontal skew
child: Container(
width: 100,
height: 100,
color: Colors.orange, // Orange container
child: Center(
child: Text(
'Skewing', // Text label
style: TextStyle(
color: Colors.white, // Text color
fontWeight: FontWeight.bold, // Bold text
),
),
),
),
),
],
),
),
);
}
}
Here is the full Code of main.dart file
Dart
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
// Set the app's primary theme color
primarySwatch: Colors.green,
),
debugShowCheckedModeBanner: false,
home: TransformExample(),
);
}
}
class TransformExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
// AppBar with a title
title: Text('Transform Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
// Rotation
Transform.rotate(
angle: 0.785, // 0.785 radians = 45 degrees
child: Container(
width: 100,
height: 100,
color: Colors.blue, // Blue container
child: Center(
child: Text(
'Rotation', // Text label
style: TextStyle(
color: Colors.white, // Text color
fontWeight: FontWeight.bold, // Bold text
),
),
),
),
),
// Translation (Positioning)
Transform.translate(
// Move 50 pixels to the right
offset: Offset(50.0, 0.0),
child: Container(
width: 100,
height: 100,
color: Colors.red, // Red container
child: Center(
child: Text(
'Translation', // Text label
style: TextStyle(
color: Colors.white, // Text color
fontWeight: FontWeight.bold, // Bold text
),
),
),
),
),
// Scaling
Transform.scale(
scale: 1.5, // Scale to 1.5 times the default size
child: Container(
width: 100,
height: 100,
color: Colors.green, // Green container
child: Center(
child: Text(
'Scaling', // Text label
style: TextStyle(
color: Colors.white, // Text color
fontWeight: FontWeight.bold, // Bold text
),
),
),
),
),
// Skewing
Transform(
transform: Matrix4.skew(0.2, 0.0), // Apply horizontal skew
child: Container(
width: 100,
height: 100,
color: Colors.orange, // Orange container
child: Center(
child: Text(
'Skewing', // Text label
style: TextStyle(
color: Colors.white, // Text color
fontWeight: FontWeight.bold, // Bold text
),
),
),
),
),
],
),
),
);
}
}
Output:
-768.jpg)
Similar Reads
Flutter - SizeTransition Widget
In this article, we will explore the Flutter SizeTransition Widget. The Size Transition Widget is a key tool in Flutter that lets you animate the size of a child widget. It can be used to make a widget appear or vanish, create a zoom-in or zoom-out effect, and for many more things. A sample video is
7 min read
Flutter - Stack Widget
The Stack widget in Flutter is a powerful tool that allows for the layering of multiple widgets on top of each other. While layouts like Row and Column arrange widgets horizontally and vertically, respectively, Stack provides a solution when you need to overlay widgets. For instance, if you want to
6 min read
Flutter - Stateful Widget
A Stateful Widget has states in it. To understand a Stateful Widget, you need to have a clear understanding of widgets and state management. A state can be defined as "an imperative changing of the user interface," and a widget is "an immutable description of the part of the user interface". To lear
4 min read
Flutter - Slide Transition Widget
In this article, we will explore the Flutter Slide Transition Widget. The Slide Transition widget allows animating a widget's position relative to its normal position. It helps us to develop a visually appealing and interactive user Interface. A sample video is given below to get an idea about what
4 min read
Flutter - GridPaper Widget
A grid paper is a paper that has a grid on it with divisions and subdivisions, for example, graph paper. We may use grid paper in creating the graphs in our flutter application. A sample image is given below to get an idea about what we are going to do in this article. Â How to use it?Dart GridPaper(
3 min read
Flutter - Stateless Widget
Stateless Widget is something that does not have a state. To understand a Stateless Widget, you need to clearly understand widgets and states. A state can be defined as "an imperative changing of the user interface," and a widget is "an immutable description of the part of the user interface". To le
4 min read
Flutter - OctoImage Widget
The OctoImage widget in Flutter requires an ImageProvider to display images in an application. The images in the OctoImage widget can be supplied with a Progress indicator or a Place holder for loading the Image in it. An OctoImage widget makes use of the Octosets which are nothing but the combinati
4 min read
Flutter - Stepper Widget
In this article, we will learn about the Stepper widget in Flutter. A stepper widget displays progress through a sequence of steps. Stepper is generally used in filling forms online. For example, remember filling an online form for applying to any university or passport or driving license. We filled
8 min read
Flutter - Padding Widget
Padding widget in flutter does exactly what its name says, it adds padding or empty space around a widget or a bunch of widgets. We can apply padding around any widget by placing it as the child of the Padding widget. The size of the child widget inside padding is constrained by how much space is re
3 min read
Flutter - TabView Widget
There are lots of apps where you often have come across tabs. Tabs are a common pattern in the apps. They are situated at top of the app below the App bar. So today we are going to create our own app with tabs. Table of Contents:Project SetupCodeConclusionProject Setup: You can either create a new p
4 min read