Flutter Widget Inspector

Inspecting the ousts….

How can I visualize a widget’s place in its complete widget tree? — Asked me to me..

All in one Flutter Resource: https://flatteredwithflutter.com/widget-inspection-in-flutter/

Flutter Widget Inspector…

Begin…

Introducing Flutter Widget Inspector..

As per the docs :

The Flutter widget inspector is powerful tool for visualizing and exploring Flutter widget trees.
The Flutter framework uses widgets as the core building block for anything from controls (text, buttons, toggles, etc.) to layout (centering, padding, rows, columns, etc.). The inspector is powerful tool for visualizing and exploring Flutter these widget trees.
Flutter Widget Inspector…

The inspector is currently available for

Android Studio and IntelliJ IDEA.

Flutter Widget Inspector….

How to use….

  1. Run the app from Android Studio (in this article)
  2. On the right hand side, there is a tab named Flutter Inspector. Click that.
Flutter Widget Inspector on the Right Hand Side.

Inspecting time…

  1. Select the widget you want to inspect by,
Selecting widget

Output:

Selecting widget

After, selecting you can see the properties of the widget in the lower half, while the upper half displays the entire widget tree (as shown in image above).

Remember : you can’t edit the properties on the fly.

Note: You may also select the widget using the icon (search icon) which you see in the above image (left hand side)

2. Refresh the widget tree by

Refresh Widget..

Suppose, you have made changes to the app and done hot reload, you will need to use this icon for visualizing the new changes.

Note: Flutter Widget Inspector does not updates with hot reload.

3. Performance overlay by

Performance Overlay

Visualize your app, as it changes frames every second. Use-Case: when you want to check whether your animations are in 60 fps.

Output :

Performance Overlay
Tip : You can also see the above graph in the performance tab.
Performance Graph…

4. Toggle the platform by

Toggle Platform Mode
Use-Case: Suppose you want to check out how your app looks in an Android Device (assuming your simulator is currently iOS), simply click on the above option.

Note : It does not open up any new simulator

Output :

App in Android Simulator

The title appeared on the left side, which is a default behavior for Android.

5. Toggle Debug Paint by

Toggle Debug Paint

It paints the widgets you have currently in your screen and shows their layouts.

Output :

Toggle Debug Paint

Powerful, right!!!!!!!!!!!!

In case of scrolling widgets, you see something like this :

Big Arrows for scrolling widgets.

6. Show Paint baselines (Available in Settings)

Show Paint Baselines

Displays the baselines of the text/ icons etc

Output :

Show Paint Baselines

See the thin lines : Green lines and yellow lines.

7. Enable Slow Animations (Available in Settings) (see point6)

Allows us to see the transitions or the animations in the app.
You can also see the navigation in slow manner, using this.

8. Hide Debug Mode Banner (Available in Settings)

As the name suggests.

Output :

Hide Debug Mode Banner…

9. Enable Repaint Rainbow :

Shows the entire canvas of the device or the emulator.

Note: Click on this option and then Hot-Restart, to see the effect.

Output :

Enable Repaint Rainbow…

See the yellow background!!!!!!!

10. Observatory (Dart) by

Dart Observatory

Clicking on any of these two, opens up localhost with the dart observatory and some stats related to your app..

11. Auto Horizontal Scroll

Use-Case : In case you want the widgets in a row to scroll by themselves.

Haven’t tried, :p

Phew….