How to find the top-most visible screen in Flutter using the render tree?

Help
, , ,
1

I’m building a tool that inspects the Flutter render tree directly, and I need to extract the top-most visible screen’s render tree from the entire app — but with the following constraints:

:white_check_mark: Requirements:

  • I do not have access to a BuildContext at the time of extraction.
  • The solution must not rely on specific widget types, like Scaffold, Page, MaterialApp, etc.
  • It must work with apps using custom navigation solutions, such as:
    • go_router
    • auto_route
    • beamer
    • or even fully custom RouterDelegate/RouteInformationParser implementations.
  • It should also work with:
    • Nested navigators
    • Overlay routes
    • Apps using only WidgetsApp or no framework widgets at all

:magnifying_glass_tilted_left: What I’ve Tried:

  • Traversing the render tree via RendererBinding.instance.renderView and walking down to collect RenderBoxes with non-zero size.
  • From visible leaves, walking up to find parent render objects that might represent the screen root.
  • Using internal Flutter classes like _Theater and _RenderTheaterMarker with skipCount: 0. However, this approach isn’t reliable across all navigation setups, especially with custom or nested routers.

:red_question_mark: What I Need:

I’m looking for a universal, robust way to identify the currently visible screen(s) (especially the top-most one) from the render tree — without relying on:

  • BuildContext
  • Known widget class types
  • Internal Flutter implementation details that could change

Essentially: how can I determine which part of the render tree is currently “the screen” that the user sees, even if that screen is built by custom logic?

:folded_hands: Any ideas, best practices, or example implementations would be greatly appreciated!