Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Print out widget tree in Flutter test

In Flutter, how can I print out the current widget tree in a widget unit test, in order to understand the current state of the UI for debugging?

(For example, in React/Ensyme, I could use debug(). Is there something comparable in Flutter?)

like image 344
Matt R Avatar asked Oct 27 '19 12:10

Matt R


People also ask

How do you find the widget tree Flutter?

Inspecting a widget To locate individual UI elements in the widget tree, click the Select Widget Mode button in the toolbar. This puts the app on the device into a “widget select” mode. Click any widget in the app's UI; this selects the widget on the app's screen, and scrolls the widget tree to the corresponding node.

What is findsOneWidget?

findsOneWidget top-level constant Null safety Matcher const findsOneWidget. Asserts that the Finder locates at exactly one widget in the widget tree.

What is widget tree in Flutter?

The widget tree is how you create your UI; you position widgets within each other to build simple and complex layouts. Since just about everything in the Flutter framework is a widget, and as you start nesting them, the code can become harder to follow.


1 Answers

You can use debugDumpApp

This will print the widget tree based on the Diagnosticable interface, which both Widget, RenderObject and Element implements.

Note that for custom made widgets, you'll have to implement a method for their content to display in that tree: debugFillProperties

like image 86
Rémi Rousselet Avatar answered Oct 08 '22 20:10

Rémi Rousselet