RENUKA KELKAR: One of the biggest thing about the UI
programming is identifying what's
wrong when the layout you see isn't what you anticipated.
With non-UI code, debugging is normally a lot easier.
You add a breakpoint, step through the program,
and eventually, one of the statements
does something unexpected.
And there is your problem.
But UI code is different, because the amount
of instruction between what you write and what actually renders
is more than any single person can comprehend.
Browsers pioneer a solution to this problem
with their innovative developer panels and element inspectors.
Originally released in 2005 as an extension to the Firefox
called Firebug, the concept is now
ubiquitous in browsers, an indispensable tool
in the developer's belt.
You can click around and view all the CSS
rules, see why things are big as they are,
and tons of other useful things.
So what's the story here?
The short answer is that Flutter can do all of this.
In the Developer Tools amongst the Inspector Profiler
and loggers, you will find the Layout Explorer,
which demystifies layout sizing, and right next to it,
the Widget Detail Tree.
This shows tons of explanatory information.
Here I'm inspecting a custom focusable list style
widget of my own creation.
You can see its sub tree and lots of property
on the various descending widgets.
But oddly, the focusable list type says almost nothing
and quickly passes the bug right to its descendants.
I don't know about you, but my brain
doesn't think of my custom widgets
in relation to their descendant gesture detector, listener,
and focus widgets.
It thinks of them as a combination
of their role and their constructor parameters
that I pass them.
That's what I want to see here.
All hope is not lost.
Stateful Widget actually show information about their backing
state object.
You can [? click ?] down that underscore widget tooltip
and see all the property on the widget.
And that's really helpful, but gosh, it's a lot of clicks.
Is there any way this could be better?
First of all, know that all of these are strictly optional.
And for the Stateful widgets, that state tooltips pointer
back to the widget is enough to keep us
from worrying about this until you need it.
But when you are debugging something broken,
using these tooltips would not be a quality of developer
experience Flutter aims for.
Let's see if we can do it better.
Stateless Widget, Stateful Widget, and the state class all
have a method which is used to add information to this debug
tree, debug fill properties.
Almost every material widget implements this
so that your app can be inspected without you
having to do anything.
But it's obvious that our custom widgets don't come with a lot.
To get started, override the debugFillProperties method
and add new properties to the builder list.
Which type you are depends on the type of your instance
variable, and you can always find the right one
by looking up the variable of the same type in Material
widget.
At heart, they are all subclass of diagnostic properties class,
which you could also subclass yourself.
In my case, to store integer property named index,
I added an in-property value with the debug label
index and the actual index itself
as a positional parameter.
Hot reload your app.
Click on the widgets you have been doctoring up,
and there it is, visible at a glance.
No extra series of clicks was necessary.
The Flutter team has never stopped
working hard on improving the debugging
experience in Flutter.
There is an entire subteam dedicated to it,
but these tricks often get overlooked.
And earlier, I mentioned that all of this
was strictly optional.
But that statement was mostly intended
for the app developers.
Package author who created widget that other will use
can really improve their package developer experience
by implementing debug fill properties,
because it's awfully tedious to do so later in real apps.
With any luck, next time you are seeing something unexpected
in your Flutter layouts, you won't
need to debug it by perfectly visualizing in your head what
each widget is doing.
You can just open the widget detail tree,
add any custom debug properties that would speed you up
and get back on track.
For more info on Flutter, head to Flutter.dev.