The Transform widget rotates, scales, skews, or moves its child widget. Use it to change a widget’s appearance or position without changing the surrounding layout.

Note

Transform changes how its child is drawn, not the space reserved for it in the layout. A transformed widget can overlap nearby widgets without moving them.

Adding a Transform Widget

To add a Transform widget to your app:

1. Open + Add Widget and drag Transform from Base Elements onto the Canvas, or add it from the widget tree.
2. Add the widget that you want to transform inside the Transform widget.
3. Select Transform and open the Properties Panel.
4. Choose a Transform Type and configure its properties as described in the following sections.

Transform Types

Choose a transformation from Transform Type, then adjust its sliders or numeric fields.

For Skew, Scale, and Rotate, the reference point also affects the result. See Transform Origin and Alignment.

Skew

Skew slants the child horizontally or vertically:

• Skew X: Slants the child horizontally. A positive value moves the top side left relative to the bottom side.
• Skew Y: Slants the child vertically. A positive value moves the left side up relative to the right side.

Negative values reverse the direction of the skew. Set both values to 0 to remove the skew.

Scale

Scale makes the child appear larger or smaller. Scale X changes its displayed width, and Scale Y changes its displayed height.

For each axis, 1 keeps the original size, 0.5 halves it, and 2 doubles it. Set both axes to the same value to preserve the child’s proportions.

Rotate

Use Rotate (degree) to set the rotation angle. Positive values rotate the child clockwise, and negative values rotate it counterclockwise. For example, 90 rotates it a quarter turn clockwise, and -90 rotates it a quarter turn counterclockwise. A value of 0 leaves the child unrotated.

Translate

Translate moves the child from its original position:

• Translate X: Positive values move the child right; negative values move it left.
• Translate Y: Positive values move the child down; negative values move it up.

Set both values to 0 to leave the child at its original position. Translate doesn’t include Transform Origin and Alignment settings.

Transform Origin and Alignment

For Skew, Scale, and Rotate, expand Transform Origin and Alignment to adjust the reference point around which the transformation happens. It isn’t always the center of the widget.

Use Origin Alignment to select a position in the nine-point grid or enter X and Y values:

• X: -1 represents the left edge, 0 the horizontal center, and 1 the right edge.
• Y: -1 represents the top edge, 0 the vertical center, and 1 the bottom edge.

Set both X and Y to 0 to select the center. Set both to -1 to select the top-left corner.

To shift the reference point from the alignment position, use these controls:

• Origin Horizontal Offset: Use the slider or enter a value to shift the reference point horizontally from the alignment position. Positive values shift it right; negative values shift it left.
• Origin Vertical Offset: Use the slider or enter a value to shift the reference point vertically from the alignment position. Positive values shift it down; negative values shift it up.

Origin offsets are distances in logical pixels, not alignment coordinates. An offset of 0 leaves the reference point at the selected alignment position.

For example, rotating around the center turns the child in place, while rotating around a corner keeps that corner fixed. These settings change the transformation’s reference point, not the child’s alignment within its parent.