Editing Code and Debugging

Start Editing:

• Once you start editing code and writing your own, the Flutter plugin will be there to help out.

• Flutter plugin allows Syntax Highlighting, Navigation to Type Declarations, Finding type usages, and much more.

• All issues during analysis will be shown in the Dart Analysis pane.

Dart Analysis Pane

Running and Debugging:

• Running and Debugging the app is controlled using the Main Toolbar provided in Android Studio.

• It allows you to select config, select device for Debugging and other tools like Run, Hot Restart, etc.

Main Toolbar

Adding Device/Emulator for Debugging:

• There are 2 main ways to debug your Flutter project, they are, Use an Emulator or Using an actual physical device.

• To Set up an actual device, ensure it is an Android device running Android 4.1 or higher. Enable Developer Options in the Device Settings, and then enable USB Debugging. On Windows, install Google USB Drivers (https://developer.android.com/studio/run/win-usb). Then, connect your device via a USB cable. Allow debugging permissions if asked for.

• To Set up and Emulator, in Android Studio, go to Tools >> Android >> AVD Manager and select Create Virtual Device. Go through the configuration to add an Emulation Device.

• After adding these devices, these can be selected from the main Toolbar.

Performance Analysis:

• While running your app in Debugging Mode, there are 2 main ways of analyzing your project's performance.

• To view the performance data, including the widget rebuild information, start the app in Debug mode, and then open the Performance tool window using View >> Tool Windows >> Flutter Performance.

Performance Pane

• The other Tool to be used during development is the aptly named DevTools. DevTools is a very comprehensive and elaborate debugging and analysis tool. You can further read about it here: https://flutter.dev/docs/development/tools/devtools

DevTools

• In DevTools, one of the most important tools is Flutter Inspector. Flutter Inspector is a tool which helps with visualizing and exploring Widget Trees in Flutter.

• Since, in Flutter everything is a widget, from the controls to the elements and even Layout builders like Rows, Columns, AspectRatio, etc, this helps visualize boundary lines and give a tree structure to your project. All Layout issues can be fixed using this tool.

Flutter Inspector: Details Tree

• The most important feature in the Inspector are: Select Widget Mode, Refresh Tree, Slow Animations, Debug Paint, Paint Baselines, and Debug Banner Toggle.

• You can browse widgets from the Tree Structure on the Left Pane, clicking on any widget, will reveal their details and properties.

• The Select Widget toggles allows to toggle a selection mode in the app's UI, where clicking on a widget in the UI will automatically pick it out from the tree in the Inspector.

• If you select Layout Explorer instead of Details Tree, you are allowed to visualize properties like Axis alignment and flex properties in the layout.

Layout Explorer

• Debug Paint, will add a layer of paint overlay in the UI to be able to visualize widgets which might not be in view, and view boundaries. For a clean experience and testing out elements near the Status Bar, one can disable the Debug Banner, using the Debug Banner Toggle.

• Inspector in DevTools can really make debugging of UI elements easier.

this video will teach you more about using Flutter Inspector https://www.youtube.com/watch?v=Rx8HhadjKcw

for more information about working with Flutter Inspector please visit the official Flutter documentation link https://flutter.dev/docs/development/tools/devtools/inspector