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.
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.
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))
If you’re using Intellij simply press
Option/Alt + Enter on any public property of a class.
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.
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.