Wednesday, June 3, 2020

Transform Widget in Flutter


This is going to be the fifth article in the series "Lit Flutter Widgets." This series is all about the widgets that stand out in the flutters collection of the widgets.

The widgets which are discussed until now in this series are 

  1. CheckboxTile Widget
  2. AnimateIcon Widget
  3. AboutDialog Widget
  4. Transform Widget (this article)
In this article, I am going to discuss the Transform Widget in Flutter.

Transform Widget

The Transform widget is used to apply the transformation before painting its child. The transformation can be in the form of change of shape, size, position and orientation.

This is a handy widget for the custom shape and for proving animations in the flutter. It also gives the capability to distorting the widget to any form or even move it around as well.

The Simple code for Transform widget is

 Container(  
     color: Colors.black,  
     child: Transform(  
      alignment: Alignment.topRight,  
      transform: Matrix4.skewY(0.3)..rotateZ(-math.pi / 12.0),  
      child: Container(  
       padding: const EdgeInsets.all(8.0),  
       color: const Color(0xFFE8581C),  
       child: const Text('Apartment for rent!'),  
      ),  
     ),  
    )  
There are some essential parts of the transform widget.

  1. Alignment-  This argument is used to align the widget that is to be painted by the Transform widget.
  2. Transform- This is used to perform the transformation that is to be done on the child. In this example, it is used to perform a 3D perspective.
  3. Child- This argument is used to show the widget on which transformation is performed.

Getting into details

This widget provides us with the inbuilt constructions to perform four basic operations, i.e., transform, rotate, scale, and translate.

The three subparts of Transform widgets are
  1. Transform.rotate
  2. Transform.scale
  3. Transform.translate

Transform.rotate

As the name suggests, Transform.rotate is used to rotate the child by some angle.

The sample code is given below.

 Container(  
     color: Colors.black,  
     child: Transform.rotate(  
      angle: 1.0,  
      child: Container(  
       height: 200.0,  
       width: 200.0,  
       color: Colors.pink,  
      ),  
     ),  
    )  

Essential parts of the Transform.rotate are

  1. Angle- The angle parameter lets us set the angle in radians and the child will be rotated by.
  2. Child- This is used to show the widget on which the rotation is done
  3. Origin- This parameter is used to set the origin for the rotation of the child.

The use of origin in code is given below.
 Container(  
     color: Colors.black,  
     child: Transform.rotate(  
      angle: 1.0,  
      origin: Offset(50.0, 50.0),  
      child: Container(  
       height: 100.0,  
       width: 100.0,  
       color: Colors.blue,  
      ),  
     ),  
    )  

Transform.scale

The scale constructor scales the child widget by the given parameter.

The sample code for the Transform.scale is given below.
 Container(  
     color: Colors.black,  
     child: Transform.scale(  
      scale: 0.5,  
      child: Container(  
       height: 200.0,  
       width: 200.0,  
       color: Colors.yellow,  
      ),  
     ),  
    ),  
Some crucial arguments of  Transform.scale are
  1. Scale- Scale parameter is used to scale the child widget. Here the scaling done is 0.5, i.e., it will scale it down to half its size.
  2. Child- This is used to show the widget on which the rotation is done
  3. Origin- This parameter is used to set the origin for the rotation of the child similarly we did in the Transform.rotate

Transform.translate


Transform.translate translates the child widget by a specified amount with the help of x and y parameters, which are provided by us. We supply the value of x and y in the form of  Offset.

A simple code showing the usage of  Transform.translate is given below.
 Container(  
     color: Colors.black,  
     child: Transform.translate(  
      offset: Offset(100.0, 0.0),  
      child: Container(  
       height: 100.0,  
       width: 100.0,  
       color: Colors.yellow,  
      ),  
     ),  
    ),  

The important parts of the Transform.translate widget is as follows.
  1. Translate-The translate parameter is used to translate the child widget. Here the translation is done by proving offset(100.0,0.0) i.e 100 in x-direction and 0 in y-direction .
  2. Child- This is used to show the widget on which the rotation is done

Conclusion 

Time to look at what we actually learned. A Transform widget can come handy whenever we need to transform any widget before the painting of the widget and it also has three default constructors readily available to perform the common operations. In fact, it is much easier to learn about Translate widget than designing your own widget again and then customizing it. However, if you prefer this article, consider bookmarking this URL to come at any later point of time if required.
Previous Post
Next Post

post written by:

Hi, Navjyot Singh is a coder, content maker and a freelance developer who's pursuing an undergraduate Engineering degree in Computer Science. He started out as a web developer but later picked up the mobile as his favourite platform to develop applications. A Writer by day and coder by night is loathed to discuss himself as the third person but can be persuaded to do so from time to time.

0 comments: