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.

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.

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
                    ),
                  ),
                ),
              ),
            ),

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: