In Mobile App Development
Debug properties | Decoding Flutter - read the full article about Flutter, Mobile App Development and Native and cross-platform solutions from Flutter on Qualified.One
Youtube Blogger
♪ [music] ♪ One of the trickiest things about the UI programming is identifying whats wrong when the layout you see isnt what you anticipated.
With non-UI code, debugging is normally a lot easier.
If youre at a break point, step trough 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 Firefox called Firebug.
The concept is now ubiquitous in browsers and an indispensable tool in the developers belt.
You can click around and view all the CSS rules, see why things are as big as they are, and tons of other useful things.
So whats Flutter story here? The short answer is that Flutter can do all of this.
In the Developer Tools, amongst the inspector, profiler and logger you will find the Layout Explorer which demystifies layout sizing.
And right next to it, the Widget Details Tree.
This should balance off explanatory information.
Here Im inspecting a custom FocusableListStyle widget of my own creation.
You can see its sub-tree and lots of property on the various descendant widgets, but oddly the FocusableListStyle says almost nothing and quickly passes the buck right to its descendants.
I dont know about you, but my brain doesnt think of my custom widget in relation to their descendant GestureDetector, Listener and Focus widgets.
It thinks of them as a combination of their rule and their constructor parameters that I pass them.
Thats what I want to see here.
All hope is not lost, stateful widgets at least show information about their backing state object.
You can take down that _widget tool tip, and see all the property on the widget and thats really helpful.
But, gosh! Its a lot of clicks.
Is there any way this could be better? First of all, know that all of this is strictly optional and for the stateful widget, that state tool tips pointed back to the widget is enough for keep us from worrying about this until you need it.
But when youre debuging something broken, using these tool tips would not be a quality of developer experience Flutter aims for.
Lets see if we can do it better? Stateless widget, stateful widget and a State class all have a method which is used to add information to this debug tree: debugFillProperties.
Almost every material widget implements this so that your app can be inspected without you having to do anything.
But its obvious that our custom widget doesnt come with a lot.
To get started, override the debugFillProperties method, and add new properties to the builder list.
Which type you add 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 a sub-class of the DiagnosticsProperties class, which you could also sub-class yourself.
In my case, to store an integer property named index I added an IntProperty value with the debug label index.
And the actual index itself as opositional parameter.
Hard reload your app, click on the widget 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 sub-team dedicated to it.
But this trick often gets overlooked.
And earlier I mentioned that all of this was strictly optional, but that statement was mostly intended for the app developers.
Package authors who created widgets that others will use can really improve their package developer experience by implementing debugFillProperties because its awfully tedious to do so later in the real apps.
With any luck, next time youre seeing something unexpected in your Flutter layout you wont need to debug it by perfectly visualizing in your head what each widget is doing.
You can just open the Widget Details Tree, add any custom debug properties that will speed you up and get back on track.
For more info on Flutter head to flutter.dev ♪ [music] ♪
Flutter: Debug properties | Decoding Flutter - Mobile App Development