Flutter - Transform Widget

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.

👁 Screenshot_2023-10-08-19-28-01-769_comexamplevideoplayer-(1)

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.

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.

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.

1. The first Transform widget applies a 45-degree rotation.
2. The second Transform widget applies a translation (positioning) by moving the widget 50 pixels to the right.
3. The third Transform widget applies scaling by increasing the size by a factor of 1.5.
4. 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
 ),
 ),
 ),
 ),
 ),

Here is the full Code of main.dart file

Output:

👁 Screenshot_2023-10-08-19-28-01-769_comexamplevideoplayer-(1)