Flutter Widget Inspector

Inspecting the ousts….

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

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.

The inspector is currently available for 

Android Studio and IntelliJ IDEA.

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.

Inspecting time…

1. Select the widget you want to inspect by , 

Output:

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 

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

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

Output :

Tip : You can also see the above graph in the performance tab.

4. Toggle the platform by

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 :

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

5. Toggle Debug Paint by

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

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

6. Show Paint baselines (Available in Settings)

Displays the baselines of the text/ icons etc

Output :

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 :

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 :

See the yellow background!!!!!!!

10. Observatory (Dart) by

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