Skip to content

Commit 83c7108

Browse files
docs: Clarify Transform.rotate origin interaction with alignment (flutter#163934)
<!-- Thanks for filing a pull request! Reviewers are typically assigned within a week of filing a request. To learn more about code review, see our documentation on Tree Hygiene: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md --> This commit improves the documentation for Transform.rotate's origin property to clarify its interaction with the alignment property. Before: The documentation did not clearly explain how the origin offset interacts with the alignment property, potentially leading to confusion about the actual rotation point. After: The documentation now emphasizes that the origin offset is applied after the alignment transformation, and provides examples to avoid common misinterpretations. This change ensures developers can correctly position the rotation point. --------- Co-authored-by: Greg Price <gnprice@gmail.com>
1 parent 5e74afc commit 83c7108

1 file changed

Lines changed: 37 additions & 2 deletions

File tree

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

Lines changed: 37 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1722,15 +1722,50 @@ class Transform extends SingleChildRenderObjectWidget {
17221722
/// The matrix to transform the child by during painting.
17231723
final Matrix4 transform;
17241724

1725-
/// The origin of the coordinate system (relative to the upper left corner of
1726-
/// this render object) in which to apply the matrix.
1725+
/// The origin of the coordinate system in which to apply the matrix,
1726+
/// described relative to the point given by [alignment].
17271727
///
17281728
/// Setting an origin is equivalent to conjugating the transform matrix by a
17291729
/// translation. This property is provided just for convenience.
1730+
///
1731+
/// This offset is applied in addition to any [alignment] transformation, so in this
1732+
/// example, the child is rotated about its center, since [alignment]
1733+
/// in [Transform.rotate] defaults to [Alignment.center]:
1734+
///
1735+
/// ```dart
1736+
/// Transform.rotate(
1737+
/// angle: math.pi,
1738+
/// child: Container(
1739+
/// width: 150.0,
1740+
/// height: 150.0,
1741+
/// color: Colors.blue,
1742+
/// ),
1743+
/// )
1744+
/// ```
1745+
///
1746+
/// However, in this example the [origin] offset is applied after the
1747+
/// `alignment`, so the child rotates about its bottom-right corner:
1748+
///
1749+
/// ```dart
1750+
/// Transform.rotate(
1751+
/// angle: math.pi,
1752+
/// origin: const Offset(75.0, 75.0),
1753+
/// child: Container(
1754+
/// width: 150.0,
1755+
/// height: 150.0,
1756+
/// color: Colors.blue,
1757+
/// ),
1758+
/// )
1759+
/// ```
17301760
final Offset? origin;
17311761

17321762
/// The alignment of the origin, relative to the size of the box.
17331763
///
1764+
/// When this and [origin] are both null, the origin is the upper-left corner
1765+
/// of this render object.
1766+
/// The default for this field is null for some constructors,
1767+
/// and [Alignment.center] for others.
1768+
///
17341769
/// This is equivalent to setting an origin based on the size of the box.
17351770
/// If it is specified at the same time as the [origin], both are applied.
17361771
///

0 commit comments

Comments
 (0)