This tutorial is about how to use Flutter's Transform.translate
named constructor.
If you need to translate a widget by an offset, Flutter already provides a named constructor Transform.translate
. It can be used to apply an absolute offset translation to its child. In this example, I'm going to show you how to use the named constructor.
Using Transform.translate
This is the named constructor you need to use.
Transform.translate({
Key key,
@required Offset offset,
this.transformHitTests = true,
Widget child,
})
The only required parameter is offset
which is of type Offset
. It defines the absolute offset translation to be applied to the child. Therefore, in order to set how far the translation will be applied as well as the translation direction, you need to customize the value of offset
. Below is a usage example which translates a widget on horizontal axis.
Transform.translate(
child: Text(
'Woolha.com',
style: TextStyle(color: Colors.teal, fontSize: 20)
),
offset: Offset(100, 0),
)
Output:
You can also read about:
Transform.rotate
, which is used to rotate a widget.Transform.scale
, which is used to scale a widget.Transform.flip
, which is used to flip a widget.FractionalTranslation
, a widget that applies translation that's scaled to the size of the child.