Flutter - Using FractionalTranslation Widget Examples

This tutorial shows you how to use FractionalTranslation in Flutter.

FractionalTranslation is a widget that applies translation to its child before the child is painted. Unlike Transform.translate that applies absolute offset, this widget applies an Offset that's scaled to the size of its child. Below are some examples of how to use the widget.

Using FractionalTranslation

Below is the constructor of FractionalTranslation.

  const FractionalTranslation({
    Key key,
    @required this.translation,
    this.transformHitTests = true,
    Widget child,
  })

You are required to pass translation argument which is of type Offset. The offset is scaled to the child's size. The below examples set the horizontal offset to 0.5 and the vertical offset to 1. You can see the translation from its original position which is painted in grey.

  Container(
    color: Colors.black26,
    child: const FractionalTranslation(
      child: Text(
          'Woolha.com',
          style: TextStyle(color: Colors.teal, fontSize: 20)
      ),
      translation: const Offset(0.5, 1),
    ),
  )

Flutter - FractionalTranslation

 

FractionalTranslation Properties

  • Offset translation *: The translation to apply to the child, scaled to the child's size.
  • bool transformHitTest : Whether to apply the translation when performing hit tests. Defaults to true.
  • Widget child: The widget under this widget in tree, it will be scaled and positioned according to fit and alignment values.

*: required

 

You can also read about: