Transform Widget

The Transform widget applies geometric transformations to its child widget using a 4x4 transformation matrix.

Common Transformations

1. Rotation:

   Transform({
     transform: Matrix4.rotationZ(angle),
     child: /* widget */
   })
   

2. Scale:

   Transform({
     transform: Matrix4.diagonal3Values(scaleX, scaleY, 1),
     child: /* widget */
   })
   

3. Translation:

   Transform({
     transform: Matrix4.translationValues(x, y, 0),
     child: /* widget */
   })
   

4. Skew:

   Transform({
     transform: Matrix4.skewX(value),
     child: /* widget */
   })
   

Matrix4 Operations

1. Basic Operations:

   • Matrix4.identity(): Creates identity matrix
   • Matrix4.rotationZ(): Rotation around Z axis
   • Matrix4.translationValues(): Translation in X, Y, Z
   • Matrix4.diagonal3Values(): Scale in X, Y, Z

2. Combining Transformations:

   const matrix = Matrix4.identity()
     .multiply(Matrix4.rotationZ(angle))
     .multiply(Matrix4.translationValues(x, y, 0));
   

Common Use Cases

1. Card Flip Effect:

   Transform({
     transform: Matrix4.rotationY(isFlipped ? Math.PI : 0),
     child: Card()
   })
   

2. Hover Scale:

   Transform({
     transform: Matrix4.diagonal3Values(
       isHovered ? 1.1 : 1,
       isHovered ? 1.1 : 1,
       1
     ),
     child: Button()
   })
   

3. 3D Rotation:

   Transform({
     transform: Matrix4.rotationX(angleX)
       .multiply(Matrix4.rotationY(angleY)),
     child: Container()
   })
   

Best Practices

1. Performance:

   • Use hardware acceleration when possible
   • Avoid unnecessary transformations
   • Consider using Transform.translate for simple translations

2. Animation:

   • Use smooth transitions
   • Consider performance impact
   • Test on different devices

3. Layout Considerations:

   • Be aware of transformed bounds
   • Handle touch/click events correctly
   • Consider parent constraints

Tips and Tricks

1. Origin Point:

   • Set transform origin for rotations
   • Consider widget center vs corner
   • Use alignment property

2. 3D Effects:

   • Use perspective for depth
   • Combine multiple transformations
   • Test on different viewports

3. Debugging:

   • Use debug paint to visualize
   • Check transformed bounds
   • Verify touch areas