Floating Overlay Widgets Over Transformed UI Elements in Flutter

Jose Alba from Google's Material team tackles a tricky Flutter challenge: how do you overlay a widget that follows another widget—even when it's rotated or transformed—without restructuring your entire codebase?

This official Flutter blog post walks through a common UI problem where developers need floating elements (like autocomplete suggestions) to track transformed widgets. Instead of invasive Stack refactoring, Alba demonstrates Flutter's built-in solution using CompositedTransformTarget and CompositedTransformFollower.

Key Takeaways

• LayerLink connects overlay widgets to UI targets across different rendering contexts
• CompositedTransformFollower automatically inherits position and rotation from its target
• Overlay approach beats Stack widgets for adding features to existing screens
• Works seamlessly even when target widgets have complex transformations applied

The article includes interactive DartPad examples showing the technique in action with rotating containers—try breaking it yourself to understand the edge cases.