Flutter - Using the Inspector
Last Updated :
21 Apr, 2021
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:
Icon
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.
Example:
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:
Icon
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:
Icon
Reduces the speed of animation between layouts.
4. Debug Paint:
Icon
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:
Icon
It draws baselines for all the texts and icons currently present on the screen.
Paint BaseLines Activated
6. Repaint Rainbow:
Icon
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:
Icon
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)
Example:
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
Similar Reads
Tab Page Selector Widget in Flutter This article will teach about Tab Page Selector Widget in a flutter. What is Tab Page Selector Widget?TabPageSelector displays a row of small circular indicators, one per tab. Tabpageselector is a crucial part of the TabBar, which functions distinctly.   It plays a major role in increasing the user
4 min read
Flutter - Using the Debugger Flutter is an open-source User Interface SDK that is Software Development Kit. Flutter is an open-source project, and it is maintained by Google. This is used to develop apps for Android apps, iOS apps, and operating systems like Linux software, Mac app and software, Windows app, Google Fuchsia, and
5 min read
Flutter - ListTile Widget The ListTile widget is used to populate a ListView in Flutter. It contains a title as well as leading or trailing icons. Let's understand this with the help of an example.Constructor of the ListTile classListTile ListTile({ Key? key, Widget? leading, Widget? title, Widget? subtitle, Widget? trailing
5 min read
Flutter - initState() There are two types of widgets provided in Flutter. The Stateless WidgetThe Stateful Widget As the name suggests Stateful Widgets are made up of some 'States'. The initState() is a method that is called when an object for your stateful widget is created and inserted inside the widget tree. It is bas
4 min read
Flutter - Stepper Widget In this article, we will learn about the Stepper widget in Flutter. A stepper widget displays progress through a sequence of steps. A stepper is generally used in filling out forms online.For example, remember filling out an online form for applying to any university or passport, or driving license.
6 min read