How to translate a widget using the Transform widget

Translation is a powerful technique in UI design that allows us to move a widget from its original position to a new location. Flutter provides the Transform widget to easily achieve widget translation and other transformations like rotation, scaling, and skewing. This answer will focus on translating a widget using the Transform.translate widget from the class Transform widget.

Constructor and parameters

The Transform.translate widget provides a constructor with various parameters to customize its behavior and layout.

Let's take a closer look at each parameter and its purpose.

key: An identifier for the widget, aiding in easy widget management.
offset: Specifies the X and Y displacement for widget translation.
transformHitTests: Determines whether the transformed area responds to hit tests.
filterQuality: Controls image filtering quality during transformations.
child: The widget undergoing translation within the Transform widget.

The offset argument must not be null. It specifies the translation.

Implementation

We can follow the instructions given below to add a Transform.translate widget in UI.

Import the necessary packages

To use the Transform.translate widget, we need to import the necessary packages in our Dart file.

import 'package:flutter/material.dart';
import 'dart:math' as math;

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Transform Widget Example',
      home: TransformExample(),
    );
  }
}

class TransformExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Educative Translating Answer')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // Rotating a Widget
            Container(
                width: 100,
                height: 100,
                color: Colors.blue,
                child: Center(child: Text('Non Translated')),
              ),
            SizedBox(height: 40),
            
            // Scaling a Widget
            Transform.translate(
              offset: Offset(50, -20),
              child: Container(
                width: 100,
                height: 100,
                color: Colors.red,
                child: Center(child: Text('Translated')),
              ),
            ),     
            SizedBox(height: 20),
          ],
        ),
      ),
    );
  }
}