flutter / flutter/devtools

Debug focus nodes

Open
#3,634 4 comments 31 reactions 0 assignees View on GitHub
enhancement P2 screen: inspector
Dominant language
Dart
Stars
1.7k
Forks
404
Avg merge
6d 17h
Merged PRs (30d)
18

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
1. stick in a shortcut in the three that grab the focused node from context,
2. put a break point on the print row
3. use TAB key in app to move focus to the node I have no idea where it is located
4. then tap R key
5. 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:
1. in a berakpoint with context in scope put eg `FocusScope.of(context).focusedChild` in the watch window
2. 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.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.