Get Visible Widgets list like the Widget Tree logic?

[danielrrys]

My objective is to know a little the logic that has the Widget Tree in Devtools, I would like to show the widgets that contains a screen, however I have several problems and I wanted to know if there are methods or variables that allow to identify the visible Widgets and not.

I know it is not an issue but I don't know who else or where to ask, since in Stackoverflow nobody answered.

I have this code :

   WidgetsBinding.instance.addPostFrameCallback((_) {
      final root = WidgetsBinding.instance.rootElement;

      if (root == null) return;

      root.visitChildren((child) {
        _inspectWidget(child);
      });
  });

  void _inspectWidget(Element element) {
    final widget = element.widget;
    final render = element.renderObject;
    final prefix = '  ';

    if (render is RenderBox && render.hasSize) {
      final offset = render.localToGlobal(Offset.zero);
      final size = render.size;

      print('$prefix📦 ${widget.runtimeType}  '
          'at (${offset.dx.toStringAsFixed(1)}, ${offset.dy.toStringAsFixed(1)})  '
          'size: (${size.width.toStringAsFixed(1)}, ${size.height.toStringAsFixed(1)})');
    } else {
      print('$prefix🔲 ${widget.runtimeType}');
    }

    element.visitChildren((child) {
      _inspectWidget(child);
    });
  }

I/flutter (29765):   🔲 View
I/flutter (29765):   🔲 RawView
I/flutter (29765):   🔲 _RawViewInternal
I/flutter (29765):   📦 _ViewScope  at (0.0, 0.0)  size: (360.0, 748.0)
I/flutter (29765):   📦 _PipelineOwnerScope  at (0.0, 0.0)  size: (360.0, 748.0)
I/flutter (29765):   📦 _MediaQueryFromView  at (0.0, 0.0)  size: (360.0, 748.0)
I/flutter (29765):   📦 MediaQuery  at (0.0, 0.0)  size: (360.0, 748.0)
I/flutter (29765):   📦 FocusTraversalGroup  at (0.0, 0.0)  size: (360.0, 748.0)
I/flutter (29765):   📦 Focus  at (0.0, 0.0)  size: (360.0, 748.0)
I/flutter (29765):   📦 _FocusInheritedScope  at (0.0, 0.0)  size: (360.0, 748.0)
I/flutter (29765):   📦 _FocusScopeWithExternalFocusNode  at (0.0, 0.0)  size: (360.0, 748.0)
I/flutter (29765):   📦 _FocusInheritedScope  at (0.0, 0.0)  size: (360.0, 748.0)
I/flutter (29765):   📦 App (0.0, 0.0)  size: (360.0, 748.0)

But at the end it shows logical containers and not visual, and I would not like to filter one by one the ones that should be shown. Because, at the end I want to show this :

📦 Scaffold at (0.0, 0.0) size: (360.0, 748.0)
  📦 AppBar at (0.0, 0.0) size: (360.0, 56.0)
  📦 Padding at (16.0, 80.0) size: (328.0, 20.0)
    📦 Text at (16.0, 80.0) size: (200.0, 20.0)
  📦 TextButton at (16.0, 120.0) size: (328.0, 48.0)

Or at least, like DevTools :

So I have searched a lot in the open source code that Flutter has about that in :

https://github.com/flutter/devtools/tree/master/packages/devtools_app/lib

But it is still complicated to find it, someone has a clearer idea that can help me ?

Sorry again if it's not an issue.

[elliette]

This sort of question is best asked on Discord, please follow the guidelines at the Flutter contributing guide. Thank you!