Enrich the Flutter Inspector with Diagnosticable properties

In this article we’ll see how to add Diagnosticable properties that can show up on the Details Tree view in the Flutter inspector.

Flutter DevTools come with a handy Details Tree view. It shows useful information about a Widget, Render Object, and State. Here’s an example of what the view looks like for a Center widget:

This is great for debugging.

Let’s take the simple example of the Flutter counter app which is created when you run flutter create <app_name>. Notice the difference between state object for _MyHomePageState vs ScaffoldState.

For our widget we only get the object hash. While Scaffold state shows more information. To do the same we need to use the Diagnosticable mixin and provide properties we want by overriding its debugFillProperties function.

State objects already implement the Diagnosticable mixin so we just need to override the function to show the counter state in the Details Tree:

In this case we’re using IntProperty, there are more such properties available for different types like ColorProperty, check them in the documentation.

Result

Diagnosticable for Custom Classes

Let’s create a new class called ColorSheme with Diagnosticable mixin and add it as a state to the _MyHomePageState:

You’ll see the following output where myColorScheme starts showing up but it doesn’t show its internal properties like the Material widget below.

To do so, you need to explicitly call the debugFillProerties for MyColorScheme from the MyHomePageState#debugFillProperties.

Result

Bonus

When you override debugFillProperties you don’t need to override toString explicitly. The mixin will add some nice formatting for you.

Here’s a sample output of toString for the ColorScheme object we created above:

MyColorScheme#606ef(textColor: Color(0xff000000), backgroundColor: Color(0xffffffff))

Tip

If you’re using Intellij simply press Option/Alt + Enter on any public property of a class.
Then select Add a debug reference to this property. It will automatically override the debugFillProperties method and add an entry for this property.

Additionally, if you set diagnostic_describe_all_properties rule, you’ll get an extra option Add missing debug property references everywhere in file . This will add diagnostic properties to all classes in a file.

Note

Be cautious of what you add to the Diagnosticable properties and do not clutter it with unnecessary information. Make sure you only add information which will be useful for debugging.

I’ve found this particularly useful when creating packages which expose widgets.

Complete code sample can be accessed here.