Focus in Flutter: Tree, Accessibility and Keyboard
![Focus in Flutter: Tree, Accessibility and Keyboard](/content/images/size/w1200/2024/07/focus-in-flutter.webp)
Focus is a key system in Flutter that manages which element is active and directs keyboard input accordingly. It also enables easy navigation between elements, ensuring smooth tab traversal for better accessibility. In this article we will understand how all these works together.
Outline
Focus Tree
Focus nodes form a tree that sparsely mirrors the widget tree, representing all elements that can receive focus.
Additionally, there is the FocusScopeNode
, that manages a stack of focused children, where the topmost element (i.e. last item in the array) is currently focused one. FocusScopeNode
is automatically created in the root of the tree and called rootScope.
Other nodes are added to the tree via Focus
and FocusScope
widgets accordingly. During instantiation, they attach their BuildContext
to the node, so that the node can find the correct ancestor to be reparented to (see reparent
). When the widget is disposed, it calls detach
method that removes the node from the tree.
Focus Manager
Focus manager is responsible for managing the focus tree, with the following responsibilities:
- Keeping track of the current primary focus
- Holding the root scope of the focus tree
- Distributing keyboard events among nodes