Add `LayoutControl.transform` for Matrix4 transformations and `RotatedBox` control by FeodorFitsner · Pull Request #6198 · flet-dev/flet

FeodorFitsner · 2026-02-21T22:51:01Z

Summary by Sourcery

Add new Flip and Matrix4-based Transform capabilities to layout controls, along with a RotatedBox control, and update layout transforms, docs, examples, and tests accordingly.

New Features:

Introduce Flip configuration and LayoutControl.flip/flip property for horizontal and vertical mirroring with hit-testing and filter quality support.
Introduce Matrix4 recording API and Transform configuration/LayoutControl.transform for generic matrix-based transforms, including recording and replay in Flutter.
Add RotatedBox control that rotates its content by integral quarter turns before layout, affecting layout size and positioning.

Enhancements:

Extend Rotate, Scale, and Offset transform configurations with origin, hit-test, and filter quality options and update Flutter-side parsers and rendering accordingly.
Refactor rotation, scale, and offset animations to use TweenAnimationBuilder and Transform widgets for richer control over transform parameters.
Enhance LayoutControl documentation with dedicated examples and images for flip, rotate, RotatedBox, scale, offset, and Matrix4 transform.

Tests:

Add integration and example screenshot tests covering Flip, Matrix4 transform scenarios, and RotatedBox layouts and rendering.

Introduce native support for flipping and arbitrary matrix transforms across Dart and Python SDKs. Dart: extend LayoutControl to apply flip and generic Transform, replace AnimatedRotation/Scale/Slide with TweenAnimationBuilder+Transform to honor origin, transformHitTests and filterQuality, add fractional translate helper, and add parsers/details (FlipDetails, TransformDetails, Matrix4Recording) to transforms utilities. Python: add Flip, Transform and recorded Matrix4 types (with recording/multiplication APIs), export them, update LayoutControl typing and docs, and include examples (flip.py, matrix4_transform.py) plus mkdocs entries. This enables richer transform semantics and consistent serialization/replay of Matrix4 operations.

Replace manual size-based FractionalTranslate implementation with FractionalTranslation and conditionally wrap it in Transform.translate to apply filterQuality only when provided. Add and reorganize layout control examples: rename animated_offset to animate_offset and tweak animation params; add new examples offset.py, rotate.py, scale.py; add __main__ guards to flip and matrix4_transform examples. Update layoutcontrol docs to include example snippets and reference golden images. Add many golden images and new integration tests (controls and examples) to cover flip/rotate/scale/offset and various Matrix4 transforms.

Reorganize example controls into a new layout_control folder: rename bursting_flet.py, image_slideshow.py, and rocket.py under sdk/python/examples/controls/layout_control. Remove obsolete form_controls_misc.py. Add icon-192.png asset under layout_control/assets and update bursting_flet.py to use the new 'icon-192.png' image path.

Wrap FilterQuality type hints in string literals across transform controls (Scale, Rotate, Offset, Flip, Transform) to use forward references and avoid runtime/name-resolution issues with the type. This is a typing-only change and does not alter runtime behavior.

Introduce a new RotatedBox control across the codebase. - Flutter host: add RotatedBoxControl widget (packages/flet/lib/src/controls/rotated_box.dart) and register it in flet_core_extension. - Python SDK: add control wrapper (flet.controls.core.rotated_box.RotatedBox), export it in flet.__init__, and include API fields (quarter_turns, content). - Docs: add controls/rotatedbox.md and reference the example from layoutcontrol.md; update mkdocs navigation. - Examples & tests: add example (sdk/python/examples/controls/rotated_box/basic.py), integration tests, and golden images for screenshots. RotatedBox rotates its content by integral quarter turns before layout (affecting measured size).

sourcery-ai

We've reviewed this pull request using the Sourcery rules engine

Update RotationDetails, ScaleDetails and OffsetDetails to use optional parameters with sensible defaults (alignment defaults to Alignment.center, transformHitTests defaults to true, origin and filterQuality are nullable, scale/scaleX/scaleY made optional). Remove redundant explicit defaults from parse helpers (parseRotationDetails, parseScale, OffsetDetails.fromValue) so defaults are provided by the constructors. This centralizes default behavior and simplifies parsing logic in packages/flet/lib/src/utils/transforms.dart.

cloudflare-workers-and-pages · 2026-02-21T22:56:29Z

Deploying flet-docs with Cloudflare Pages

Latest commit:	`d2e317d`
Status:	✅ Deploy successful!
Preview URL:	https://9628181d.flet-docs.pages.dev
Branch Preview URL:	https://matrix-transform.flet-docs.pages.dev

View logs

Copilot

Pull request overview

This PR extends Flet’s layout transform capabilities across Python and Flutter by adding flip/matrix-based transforms (via a recorded Matrix4 API) and introducing a RotatedBox control that rotates before layout.

Changes:

Add new transform configuration types in Python (Flip, Matrix4, Transform) and expose them on LayoutControl (flip, transform).
Implement Flutter-side parsing and rendering for the new transform properties, plus add a new RotatedBox control implementation.
Add docs, examples, and screenshot-based integration tests (including new golden images) covering flip, Matrix4 transforms, and RotatedBox.

Reviewed changes

Copilot reviewed 27 out of 43 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
sdk/python/packages/flet/src/flet/controls/transform.py	Adds Python-side `Flip`, `Matrix4` recording, and `Transform`, plus extends rotate/scale/offset options.
sdk/python/packages/flet/src/flet/controls/layout_control.py	Exposes new `flip` and `transform` properties on `LayoutControl` and updates docs text.
sdk/python/packages/flet/src/flet/controls/core/rotated_box.py	Adds Python `RotatedBox` control API (quarter turns before layout).
sdk/python/packages/flet/src/flet/init.py	Exports `RotatedBox`, `Flip`, `Matrix4`, `Transform` at package top-level.
sdk/python/packages/flet/mkdocs.yml	Adds nav entries for new docs pages (RotatedBox, Flip, Matrix4, Transform).
sdk/python/packages/flet/docs/types/transform.md	New doc stub for `flet.Transform`.
sdk/python/packages/flet/docs/types/matrix4.md	New doc stub for `flet.Matrix4`.
sdk/python/packages/flet/docs/types/flip.md	New doc stub for `flet.Flip`.
sdk/python/packages/flet/docs/controls/rotatedbox.md	Adds `RotatedBox` control documentation page + example + image.
sdk/python/packages/flet/docs/controls/layoutcontrol.md	Expands LayoutControl docs with examples/images for flip/rotate/RotatedBox/scale/offset/matrix4.
sdk/python/examples/controls/rotated_box/basic.py	Adds RotatedBox example demonstrating layout impact vs paint-time rotate.
sdk/python/examples/controls/rotated_box/init.py	Adds example package marker.
sdk/python/examples/controls/layout_control/flip.py	Adds interactive flip example.
sdk/python/examples/controls/layout_control/rotate.py	Adds rotate example using extended rotate options.
sdk/python/examples/controls/layout_control/scale.py	Adds scale example using extended scale options.
sdk/python/examples/controls/layout_control/offset.py	Adds offset example using extended offset options.
sdk/python/examples/controls/layout_control/matrix4_transform.py	Adds Matrix4 recording/replay example.
sdk/python/examples/controls/layout_control/rocket.py	Adds/updates example using rotate/scale animations.
sdk/python/examples/controls/layout_control/image_slideshow.py	Adds/updates example using animated positioning.
sdk/python/examples/controls/layout_control/animate_offset.py	Tweaks offset animation parameters/curve for demo.
sdk/python/examples/controls/layout_control/bursting_flet.py	Adjusts example asset path reference.
sdk/python/examples/controls/layout_control/assets/icon-192.png	Adds example asset image.
sdk/python/packages/flet/integration_tests/examples/core/test_rotated_box.py	Adds example screenshot test for RotatedBox example app.
sdk/python/packages/flet/integration_tests/examples/core/test_layout_control.py	Adds example screenshot tests for flip and Matrix4 transform example apps.
sdk/python/packages/flet/integration_tests/controls/core/test_rotated_box.py	Adds control-level screenshot test for `RotatedBox`.
sdk/python/packages/flet/integration_tests/controls/core/test_layout_control.py	Adds control-level screenshot tests for flip/rotate/scale/offset/matrix4 scenarios.
sdk/python/packages/flet/integration_tests/controls/core/golden/macos/rotated_box/rotated_box.png	Adds golden image for RotatedBox control test (macOS).
sdk/python/packages/flet/integration_tests/controls/core/golden/macos/layout_control/flip.png	Adds golden image for flip test (macOS).
sdk/python/packages/flet/integration_tests/controls/core/golden/macos/layout_control/rotate.png	Adds golden image for rotate test (macOS).
sdk/python/packages/flet/integration_tests/controls/core/golden/macos/layout_control/scale.png	Adds golden image for scale test (macOS).
sdk/python/packages/flet/integration_tests/controls/core/golden/macos/layout_control/matrix4_perspective_tilt.png	Adds golden image for Matrix4 perspective test (macOS).
sdk/python/packages/flet/integration_tests/controls/core/golden/macos/layout_control/matrix4_mirrored_spin.png	Adds golden image for Matrix4 mirror+spin test (macOS).
sdk/python/packages/flet/integration_tests/controls/core/golden/macos/layout_control/matrix4_multiply_chain.png	Adds golden image for Matrix4 multiply-chain test (macOS).
packages/flet/lib/src/utils/transforms.dart	Adds Flutter-side parsing for flip/transform and Matrix4 recording replay; extends rotate/scale/offset parsing.
packages/flet/lib/src/controls/base_controls.dart	Wires new flip/transform wrappers into `LayoutControl`; refactors rotate/scale/offset animations and adds filter/hit-test/origin support.
packages/flet/lib/src/flet_core_extension.dart	Registers `RotatedBox` control mapping.
packages/flet/lib/src/controls/rotated_box.dart	Implements Flutter `RotatedBox` control widget wrapper.
sdk/python/examples/controls/form_controls_misc.py	Removes a form controls misc example file.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

packages/flet/lib/src/controls/rotated_box.dart

Copilot · 2026-02-21T23:02:06Z

packages/flet/lib/src/controls/base_controls.dart

+  if (filterQuality == null) {
+    return translated;
+  }
+
+  return Transform.translate(
+    offset: Offset.zero,
+    transformHitTests: transformHitTests,
+    filterQuality: filterQuality,
+    child: translated,
+  );


_fractionalTranslate() wraps FractionalTranslation in Transform.translate(offset: Offset.zero) when filterQuality is set. With an identity transform, filterQuality is effectively a no-op, so Offset.filter_quality won’t actually change rendering. Consider applying a real Transform (e.g., compute pixel offset via LayoutBuilder and use Transform.translate), or document that filter_quality isn’t supported for fractional offsets.

Suggested change

if (filterQuality == null) {

return translated;

}

return Transform.translate(

offset: Offset.zero,

transformHitTests: transformHitTests,

filterQuality: filterQuality,

child: translated,

);

// Note: filterQuality is not applied for fractional translations because

// there is no non-identity Transform; the value is currently ignored.

return translated;

cloudflare-workers-and-pages · 2026-02-21T23:02:54Z

Deploying flet-examples with Cloudflare Pages

Latest commit:	`d2e317d`
Status:	✅ Deploy successful!
Preview URL:	https://87027621.flet-examples.pages.dev
Branch Preview URL:	https://matrix-transform.flet-examples.pages.dev

View logs

Copilot

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

Return FractionalTranslation directly and remove the conditional Transform.translate wrapper. The change adds a comment clarifying that FractionalTranslation scales translations by the child's size and that filterQuality does not apply (no bitmap transform), eliminating redundant code and simplifying the layout logic.

FeodorFitsner added 5 commits February 21, 2026 12:37

sourcery-ai bot reviewed Feb 21, 2026

View reviewed changes

FeodorFitsner requested review from Copilot and ndonkoHenri February 21, 2026 22:56

Copilot started reviewing on behalf of FeodorFitsner February 21, 2026 22:57 View session

Copilot AI reviewed Feb 21, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Comments

Add `LayoutControl.transform` for Matrix4 transformations and `RotatedBox` control#6198

Add `LayoutControl.transform` for Matrix4 transformations and `RotatedBox` control#6198
FeodorFitsner wants to merge 7 commits intomainfrom
matrix-transform

FeodorFitsner commented Feb 21, 2026 •

edited by sourcery-ai bot

Loading

Uh oh!

sourcery-ai bot left a comment

Uh oh!

cloudflare-workers-and-pages bot commented Feb 21, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI Feb 21, 2026

Uh oh!

cloudflare-workers-and-pages bot commented Feb 21, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Comments

Conversation

FeodorFitsner commented Feb 21, 2026 • edited by sourcery-ai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by Sourcery

Uh oh!

sourcery-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

cloudflare-workers-and-pages bot commented Feb 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying flet-docs with Cloudflare Pages

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Copilot AI Feb 21, 2026

Choose a reason for hiding this comment

Uh oh!

cloudflare-workers-and-pages bot commented Feb 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying flet-examples with Cloudflare Pages

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

FeodorFitsner commented Feb 21, 2026 •

edited by sourcery-ai bot

Loading

cloudflare-workers-and-pages bot commented Feb 21, 2026 •

edited

Loading

cloudflare-workers-and-pages bot commented Feb 21, 2026 •

edited

Loading