Detect user created widgets in flutter widget tree

Question

I've been working on a problem today to detect certain widgets in the widget tree so I've been playing around with context.visitChildElements and element. visitChildren. I can see all the widgets in the tree, but there's just too many. I looked at the way the flutter widget inspector does it and they have some internal expectations that won't exist within other users code bases. The example, I have a scaffold with a body Center and a child Material button. Passing the context to my function below prints out about 200+ widgets with those three scattered in between. I would like to only print out those three, or at least elliminate all widgets created by Flutter automatically and not created by the code the user supplied.

List getElements(BuildContext context) {
 var widgetsOfInterest = [];
 widgetsOfInterest.clear();

 int indentation = 0;

 void visitor(Element element) {
  indentation++;

  Key? key = element.widget.key;
  String className = element.widget.runtimeType.toString();

  while (element.findRenderObject() is! RenderBox) {}
  RenderBox box = element.findRenderObject() as RenderBox;
  var offset = box.getTransformTo(null).getTranslation();

  final indent = ' ' * indentation;
  // Here I want to check if this is a widget we created and print its name and offset
  if (debugIsLocalCreationLocation(element)) print('$className $offset');

    if ((MaterialButton).toString() == className) {
     widgetsOfInterest.add(WidgetInfo(
       indentation: indentation,
       size: box.size,
       paintBounds: box.paintBounds.shift(
         Offset(offset.x, offset.y),
       ),
       key: key,
       className: className,
      ));
    }

     element.visitChildren(visitor);
   }

 context.visitChildElements(visitor);

 return widgetsOfInterest;
}

If anyone have any insights or experience with the Flutter widget tree that could point me in the right direction I would appreciate that.

user_9849562 · Answer

it's obviously seems not the best solution here(and will increase unnecessary code) but this might work.

you can create a custom widget key that have some prefix inside of it and use it in every component you want it to be detected

for example

//1
Appbar(key: FSKey())
//2
Center(key:FSKey("awesome_widget"))

internally if you have access to those key while you iterate through elements you can detect those widgets using the prefix you set.

actuall key values

//1
"fskey_1273zj72ek628"
//2
"fskey_awesome_widget"

again this might not be a very optimal solution but iit gives you some control of what parts of the tree you want it to be detected and eventually if there is no other way.. this will work.

Detect user created widgets in flutter widget tree

1 Answers