Dev tools not showing children of any StatefulWidget

[bsutton]

When using Dart Dev Tools Flutter Inspector to view an widget hierarchy the tree no longer displays children of a Stateful widgets.

I've just done a full re-install of vs-code and android studio.

flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.9.1+hotfix.4, on Linux, locale en_AU.UTF-8)

[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[✓] Android Studio (version 3.5)
[✓] IntelliJ IDEA Community Edition (version 2018.3)
[✓] Connected device (1 available)

• No issues found!

As you can see the HolidaysPage includes a Container:

class HolidaysPage extends StatefulWidget {
  static final RouteName routeName = RouteName('/userholidayspage');

  HolidaysPage({Key key}) : super(key: key);

  @override
  _HolidaysPageState createState() => _HolidaysPageState();
}

class _HolidaysPageState extends State<HolidaysPage> {
  final Leave leave = ServiceLocator.leave;

  @override
  Widget build(BuildContext context) {
    return Container(width: 0, height: 0);
  }
}

The Container is visible in the render tree but not the widget tree. This makes it rather hard to select nested widgets in order to analyse layout issues.

Not certain what additional details I need to supply?

[kenzieschmoll]

The tree on the right is not actually the render tree - it is a more detailed view of the widget tree on the left, showing widget properties and content. @jacob314 maybe we should update our documentation to describe what the two inspector views are.

[bsutton]

Is there any more information I can provide to get some assistance on this issue?

[bsutton]

Perhaps I should add that I can't select these widgets via the selection tool.

What is happening is that I'm are using the navigator to 'push' widgets onto the navigator stack.

I'm viewing a full screen widget which is on top of the navigator stack.

When I attempt to select one of the visible widgets the dev tools select one of the (non-visible) widgets lower down the navigator stack.

[jacob314]

Is the HolidaysPage widget by any chance defined in a different package? Our logic to determine which widgets are defined in your local project and defined globally may be going wrong for this case.

[bsutton]

no its in the same package.

[bsutton]

I've been playing around a bit more. In some cases I can actually select the desired widget. When this occurs the detailed view updates to be the correct widget however the summary tree is still truncated and the 'Scaffold' widget is always selected.

[andrea689]

I had the same problem and found that it only happens when I move main.dart into a lib subfolder.

[bsutton]

@andrea689 that's interesting as I"m also running my main from lib/apps. In fact its not even called main.dart. I will test again and report back.

[jacob314]

Ok now this makes sense. We need to update the heuristic to infer the root directory of the project by finding the nearest lib directory.

[bsutton]

So I've upgraded the the latest version of flutter: Flutter (Channel stable, v1.12.13+hotfix.7, on Linux, locale en_AU.UTF-8)

And now the problem is worse.

As suggested I'm now launching the debug session from lib/main.dart.

With the latest version I just get a message 'Loading'. The entire UI is unresponsive (e.g. If I click 'Timeline' no change occurs.)

If I bring up the chrome debug tools and do a refresh no errors are reported. There are also no errors in the network logs. Interestingly I can click on the 'try alpha dev tools'. The alpha dev tools opens the flutter based dev tools but the details tree is blank. None of the inspector tools function (e.g. add/remove debug label).

A number of the screens do work (in the alpha). Timeline, memory, performance, and logging all appear to work.

This suggests that its not a connection issue. Hot reload and restart also work (from alpha).

[bsutton]

So I've done some more testing and it now appears that the main dev tools will sit on the 'loading' message until I click on my apps ui. It will the close the loading message and display the inspector. However the inspector is empty. I can't find a reproducible path to having the inspector open and show my widget tree.

[bsutton]

OK, I think I have a path. When I launch the inspector in the bottom left hand bottom corner there is a little list with the classic up/down arrows. When the screen says loading the list is empty:

If I click in my app ui the list gets populated but the widget tree in the inspector is empty. If I now click on the list it contains two identical entries (main and main).

It appears that the top one is selected. If I select the bottom one and click the 'refresh' button on the widget tree my widget tree now displays. The widget tree actually appears to be a full widget tree.

[jacob314]

Does your app have multiple isolates? We may be guessing which is your ui isolate incorrectly. You may also want to run a flutter clean. It seems like there might be stale files causing confusion. Usually flutter clean isn't needed but sometimes something goes wrong.

[bsutton]

The app has only a single isolate, we do use a number of native plugins however which may use isolates.

In a debug session the call stack initially shows two isolates running ( I assume that's what a top level entry in vs code call stack means). If I pause the app only the first isolate shows a call stack. I don't seem to be able to do anything useful to the other isolate (I have sdk debugging switched on).

It looks like doing a hot reload leaves one of the isolates dangling as each time I do a hot reload the no. of isolates grows by one.

It looks like the list in the bottom right hand corner of the widget inspector directly correlates to the number of isolates running in vs code because each time I do a hot reload the no. of isolates grows and the no. of entries in the list also grows.

[bsutton]

It definitely a matter of me just finding the correct isolate in the list on the inspector,clicking refresh and the tree shows.

So it definitely looks like an issue selecting the correct isolate.

[bsr203]

I too was struggling with the same issue. It works if I move the file (main_demo.dart) with main() to lib, but fails if I start the app from a file outside lib. In my case, I want to mock some of the data and API calls during development.

[MattisBrizard]

Hi @jacob314,

Is the HolidaysPage widget by any chance defined in a different package? Our logic to determine which widgets are defined in your local project and defined globally may be going wrong for this case.

I have a similar issue where I can not see deeper than a ConfiguredApp widget defined in a different package. This issue is annoying because this ConfiguredApp widget is one of the first widget of the App. This keeping us from seeing our others widgets.

Should I fill another issue for that ?

Thanks :)

[bogdanorzea]

@MattisBrizard I have the same issue with my multi-folder project. It affects both Android Studio and VS Code (tried Flutter stable and beta).

I have created an extremely simple project that shows this problem. Screenshots are available.

[MattisBrizard]

Hi @bogdanorzea, thanks for the com and the links. I didn't opened an issue because I didn't have any reproducible examples, so with yours we would be able to create an issue.(since this one isn't related to StatefulWidget)

Do you think you could create one ?

[bogdanorzea]

Sure, I can create a new issue. Thanks!

[elliette]

I believe this is now fixed by the option to set the pub root directories for your project in the Inspector settings dialog. If you are still having trouble after that, please open a new issue with repro steps. Thanks!