Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App

Related Articles

Flutter – Using the Inspector

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

Flutter is based on Widgets and Widget Trees. If you are new to Flutter, imagine Widgets as structures of Data or Classes of Data. And to create a flutter application we nest these Widgets within one another.

Flutter Inspector Tool

Introduction to Flutter Inspector:

Just like in Native android we can view the blueprint of our app and its properties with the help of the .xml file, Flutter provides a tool called Flutter Inspector which can help you to visualize the blueprint and properties of different widgets in your Flutter Application. Along with visualization, the Inspector tool also helps in diagnosing Widget layout issues.

Note: The flutter inspector tool is currently available only on Android Studio IntelliJ IDEA.

Tools included in Flutter Inspector:

1. Select Widget Mode:


With the help of this button, you can select different widgets from your app and inspect them one at a time. 

After selecting any Widget from the Widget Tree you can view the blueprint of that Widget with the help of the Layout Explorer tab, or you can check different properties and nested widgets of the selected Widget with the help of the Details Tree tab.


Over here we’ve selected the Icon Widget

Layout Explorer Tab

Details Tree Tab

Note: You can also select different Widgets with the help of the search icon which 
      will appear on your device screen when you activate the Select Widget Mode.

2. Refresh Tree:


Whenever you make changes in your app, and you hot reload those changes are not immediately reflected in your Flutter Inspector tool. To visualize the changes you will have to click the Refresh Tree button.

3. Slow Animation:


Reduces the speed of animation between layouts.

4. Debug Paint:


When activated it creates a border around each widget currently present on your screen. In short, shows a blueprint of the whole layout.

Debug Paint Activated

5. Paint BaseLines:


It draws baselines for all the texts and icons currently present on the screen.

Paint BaseLines Activated

6. Repaint Rainbow:


When activated it creates a border around the widgets that are changing. So It’s a great tool to check/debug widgets that are changing.

For example, over here we have our homepage which is a stateful widget, so whenever there are changes inside this widget the whole widget will be repainted which is indicated by those rainbow-colored borders.

Repaint Rainbow Activated

7.Invert Oversized Image: 


This tool helps in identifying images of large size. Whenever developers create an application they want it to run as fast as possible, but when images with high Resolution and greater size are included in the app, the performance of the app is affected (to be more precise speed and size of the app is affected)


Over here we’ve added two images to the app.

  • Geeks for Geeks (size 200 KB)
  • Helicopter Image (size 7 MB)

When invert Oversized Image is activated the second image is inverted (colors as well as image) and the first image remains unaffected.

The Second Image gets inverted when INVERT OVERSIZED is activated

For more about Flutter: Flutter tutorial

My Personal Notes arrow_drop_up
Last Updated : 21 Apr, 2021
Like Article
Save Article
Similar Reads
Related Tutorials