Repository navigation
Debug focus nodes #3634
Description
It would be useful if focusNodes was possible to see in the widget inspector tree and also see which one is currently focused.
The only solution I found to figure out which focusNode has foucs is to
- stick in a shortcut in the three that grab the focused node from context,
- put a break point on the print row
- use TAB key in app to move focus to the node I have no idea where it is located
- then tap R key
- Try to figure out where in the tree it is located, which unfortunately is not that easy. The _debugLabel might give some clues and one can go into _parent and _children and read their _debugLabel to try to figure out where in the tree this focusNode is loocated
CallbackShortcuts(
bindings: {
const SingleActivator(LogicalKeyboardKey.keyR): () {
print(FocusScope.of(context).focusedChild);
},
},
child: ..
)
An alternative also helpful feature would be if I could do the following:
- in a berakpoint with context in scope put eg
FocusScope.of(context).focusedChildin the watch window - somehow highlight this widget in the widget inspector tree and/or in the app.
Use case
In the case I try to debug there is four buttons on the screen and when I tab from the third one, there is an invisible focus node somewhere that I think receives the focus as the fourth button does not receive focus when I have wrapped it in a Link widget. I did a simplified case that did not reproduce this bug, so in my big app I want to try to understand where this focus node is coming from.
Activity
elliette commentedon Feb 7, 2022
Thanks for the suggestion! This is a feature we have been considering adding - glad to hear that it would be useful.
jsiedentop commentedon Jun 4, 2024
While searching for a way to debug a similar focus problem as @Leffe108, I came across this issue. A DevTools feature that draws a frame around the currently focused element would be really helpful!
To everyone who comes by as long this feature request has not yet been implemented:
Try debugDumpFocusTree! It calls
FocusManager.instance.toStringDeep();and prints the current focus tree to the console.azizChebbi commentedon Aug 2, 2024
@jsiedentop it's not specified where to put it exactly in the code ?
it's not specified.
vanyasem commentedon Dec 23, 2024
See https://docs.flutter.dev/testing/code-debugging?%5C#print-the-focus-tree for more information on how to debug focus trees: