Add transform flip (#116705)

* Added Transform.flip

* Add tests for Transform.flip

* fix: failing tests

* fix the failing test

* fix test according to review

* Make z component constant, update doc

* Disabled changing alignment

* Apply suggested definition

Co-authored-by: Greg Spencer <[email protected]>

Co-authored-by: nayeemtby <[email protected]>
Co-authored-by: Nayeem Hasan <[email protected]>
Co-authored-by: Greg Spencer <[email protected]>

Author: 3 people

packages/flutter/lib/src/widgets/basic.dart

@@ -1424,6 +1424,36 @@ class Transform extends SingleChildRenderObjectWidget {
         assert(scale == null || (scaleX == null && scaleY == null), "If 'scale' is non-null then 'scaleX' and 'scaleY' must be left null"),
         transform = Matrix4.diagonal3Values(scale ?? scaleX ?? 1.0, scale ?? scaleY ?? 1.0, 1.0);
 
+  /// Creates a widget that mirrors its child about the widget's center point.
+  ///
+  /// If `flipX` is true, the child widget will be flipped horizontally. Defaults to false.
+  ///
+  /// If `flipY` is true, the child widget will be flipped vertically. Defaults to false.
+  ///
+  /// If both are true, the child widget will be flipped both vertically and horizontally, equivalent to a 180 degree rotation.
+  ///
+  /// {@tool snippet}
+  ///
+  /// This example flips the text horizontally.
+  ///
+  /// ```dart
+  /// Transform.flip(
+  ///   flipX: true,
+  ///   child: const Text('Horizontal Flip'),
+  /// )
+  /// ```
+  /// {@end-tool}
+  Transform.flip({
+      super.key,
+      bool flipX = false,
+      bool flipY = false,
+      this.origin,
+      this.transformHitTests = true,
+      this.filterQuality,
+      super.child,
+  })  : alignment = Alignment.center,
+        transform = Matrix4.diagonal3Values(flipX ? -1.0 : 1.0, flipY ? -1.0 : 1.0, 1.0);
+
   // Computes a rotation matrix for an angle in radians, attempting to keep rotations
   // at integral values for angles of 0, π/2, π, 3π/2.
   static Matrix4 _computeRotation(double radians) {

packages/flutter/test/widgets/transform_test.dart

@@ -787,6 +787,101 @@ void main() {
 
     expect(tester.getBottomRight(find.byType(Container)), target.bottomRight(tester.getTopLeft(find.byType(Container))));
   });
+
+  testWidgets(
+    'Transform.flip does flip child correctly',
+    (WidgetTester tester) async {
+      const Offset topRight = Offset(60, 20);
+      const Offset bottomLeft = Offset(20, 60);
+      const Offset bottomRight = Offset(60, 60);
+
+      bool tappedRed = false;
+
+      const Widget square = SizedBox.square(dimension: 40);
+      final Widget child = Column(
+        mainAxisSize: MainAxisSize.min,
+        children: <Widget> [
+          Row(mainAxisSize: MainAxisSize.min, children: <Widget>[
+            GestureDetector(
+              onTap: () => tappedRed = true,
+              child: const ColoredBox(color: Color(0xffff0000), child: square),
+            ),
+            const ColoredBox(color: Color(0xff00ff00), child: square),
+          ]),
+          Row(mainAxisSize: MainAxisSize.min, children: const <Widget>[
+            ColoredBox(color: Color(0xff0000ff), child: square),
+            ColoredBox(color: Color(0xffeeff00), child: square),
+          ]),
+        ],
+      );
+
+      await tester.pumpWidget(
+        Directionality(
+          textDirection: TextDirection.ltr,
+          child: Align(
+            alignment: Alignment.topLeft,
+            child: Transform.flip(
+              flipX: true,
+              child: child,
+            ),
+          ),
+        ),
+      );
+
+      await tester.pumpAndSettle();
+
+      await tester.tapAt(topRight);
+
+      expect(tappedRed, isTrue, reason: 'Transform.flip cannot flipX');
+
+      tappedRed = false;
+
+      await tester.pumpWidget(
+        Directionality(
+          textDirection: TextDirection.ltr,
+          child: Align(
+            alignment: Alignment.topLeft,
+            child: Transform.flip(
+              flipY: true,
+              child: child,
+            ),
+          ),
+        ),
+      );
+
+      await tester.pumpAndSettle();
+
+      await tester.tapAt(bottomLeft);
+
+      expect(tappedRed, isTrue, reason: 'Transform.flip cannot flipY');
+
+      tappedRed = false;
+
+      await tester.pumpWidget(
+        Directionality(
+          textDirection: TextDirection.ltr,
+          child: Align(
+            alignment: Alignment.topLeft,
+            child: Transform.flip(
+              flipX: true,
+              flipY: true,
+              child: child,
+            ),
+          ),
+        ),
+      );
+
+      await tester.pumpAndSettle();
+
+      await tester.tapAt(bottomRight);
+
+      expect(
+        tappedRed,
+        isTrue,
+        reason: 'Transform.flip cannot flipX and flipY together',
+      );
+    },
+  );
 }
 
 class TestRectPainter extends CustomPainter {