Transform Widget – Flutter Widget Guide By Flutter Agency

· 5 min read
Transform Widget
Transform Widget

Animations are used widely in mobile applications now a days. They help to emphasize important things or actions and make them more attractive. In this article, we will discuss a widget called Transform Widget.

What is Transform Widget?

Transform Widget is a which is often used with Animations. It helps to change the shape, position, or rotation of the child widget.

Transform Widget has 4 main constructors :

  • Transform (default constructor)
  • Transform.rotate()
  • Transform.scale()
  • Transform.translate()

We will discuss every Constructor in detail.

1. Default constructor :

 Transform({
    Key key,
    @required Matrix4 transform,
    Offset origin,
    AlignmentGeometry alignment,
    bool transformHitTests: true,
    Widget child,
  });

In Above Constructor all fields marked with @required must not be empty.

The default constructor transform allows us to do multiple transformations at once. It takes a 4×4 matrix in the transform parameter also called transformation matrix.

How to use the Transform Widget in Flutter?

The following code snippet tells us how to implement the Transform Widget in Flutter.

Transform(
        transform: Matrix4.skewY(0.3),
        origin: Offset(0, 0),
        child: Container(
          width: 200,
          height: 200,
          color: Colors.amber,
        ),
      ),

We will get output like below :

Default-Constructor

Default Constructor

2. Transform.rotate()

Constructor of Transform.rotate() will look like below :

  Transform.rotate({
    Key key,
    @required double angle,
    Offset origin,
    AlignmentGeometry alignment: Alignment.center,
    bool transformHitTests: true,
    Widget child,
  });

In Above Constructor all fields marked with @required must not be empty.

As the name suggests Transform.rotate simply rotates the child widget by the given angle. The secondary parameter is the origin. By default, the widget rotates around its center – default origin. This parameter accepts Offset which defines the distance from the center of the widget.

Transform.rotate(
  angle: pi / 4,
  child:// To do
)

Example :

 Transform.rotate(
        origin: Offset(-50, -50),
        angle: pi / 4,
        child: Container(
          color: Colors.amber,
          width: 100,
          height: 100,
        ),
      ),

We will get output like below:

Transform.rotate

Transform.rotate()

3. Transform.scale():

Constructor of Transform.scale() will look like below :

 Transform.scale({
    Key key,
    @required double scale,
    Offset origin,
    AlignmentGeometry alignment: Alignment.center,
    bool transformHitTests: true,
    Widget child,
  });

In Above Constructor all fields marked with @required must not be empty.

  • Scale Constructor scales the child by the given factor. we set animation _value from 0.5 to 1. Scale parameter = 0.5 means reducing the size of the child by half.
Transform.scale(
        scale: _value,
        origin: Offset(-50, -50),
        child: Container(
          color: Colors.amber,
          width: 200,
          height: 200,
        ),
      ),

We will get output like below:

Transform.Scale

Transform.scale()

4. Transform.translate(): Transform.translate() moves the child Widget by Offset in X and Y direction. There is no origin parameter in this constructor. Here we move a Container Widget from one screen side to another by supplying X coordinate and animating it.

Constructor of Transform.translate() will look like below :

  Transform.translate({
    Key key,
    @required Offset offset,
    bool transformHitTests: true,
    Widget child,
  });

Example :

Transform.translate(
        offset: Offset(200.0, 110.0),
        child: Container(
          height: 150.0,
          width: 150.0,
          color: Colors.purple,
        ),
      ),

We will get output like below:

Translate

Transform.translate()

Conclusion:

In this article, we have been through What is Transform Widget in Flutter along with how to implement it in a Flutter.

Thanks for being with us.
Need help for Flutter Development? Do let us know.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Leave a Reply