Floating Overlay Widgets Over Transformed UI Elements in Flutter
Article Summary
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
Flutter's Overlay system with LayerLink lets you add floating UI elements that track transformed widgets without touching existing code structure.
About This Article
Adding floating UI features like autosuggestion to text fields in Flutter often means refactoring large parts of your screen. The Stack-based approach is tedious, error-prone, and forces you to redesign entire layouts.
Jose Alba shows how to use CompositedTransformTarget, CompositedTransformFollower, and LayerLink widgets instead. These widgets attach overlay entries to target widgets and keep position and transformation data intact across different rendering contexts.
With the Overlay approach, you can add floating widgets to existing routes without restructuring your codebase. Interactive DartPad examples confirm this works, even when widgets rotate or transform.