Debugging

Domains: Flutter

What tools can I use to debug my app in Flutter?

Use the DevTools suite for debugging Flutter or Dart apps.

DevTools includes support for profiling, examining the heap, inspecting the widget tree, logging diagnostics, debugging, observing executed lines of code, debugging memory leaks and memory fragmentation. For more information, see the DevTools documentation.

If you’re using an IDE, you can debug your application using the IDE’s debugger.

How do I perform a hot reload?

Flutter’s Stateful Hot Reload feature helps you quickly and easily experiment, build UIs, add features, and fix bugs. Instead of recompiling your app every time you make a change, you can hot reload your app instantly. The app is updated to reflect your change, and the current state of the app is preserved.

In React Native, the shortcut is ⌘R for the iOS Simulator and tapping R twice on Android emulators.

In Flutter, If you are using IntelliJ IDE or Android Studio, you can select Save All (⌘s/ctrl-s), or you can click the Hot Reload button on the toolbar. If you are running the app at the command line using flutter run, type r in the Terminal window. You can also perform a full restart by typing R in the Terminal window.

How do I access the in-app developer menu?

In React Native, the developer menu can be accessed by shaking your device: ⌘D for the iOS Simulator or ⌘M for Android emulator.

In Flutter, if you are using an IDE, you can use the IDE tools. If you start your application using flutter run you can also access the menu by typing h in the terminal window, or type the following shortcuts:

Action Terminal Shortcut Debug functions and properties
Widget hierarchy of the app w debugDumpApp()
Rendering tree of the app t debugDumpRenderTree()
Layers L debugDumpLayerTree()
Accessibility S (traversal order) or
U (inverse hit test order)		 debugDumpSemantics()
To toggle the widget inspector i WidgetsApp. showWidgetInspectorOverride
To toggle the display of construction lines p debugPaintSizeEnabled
To simulate different operating systems o defaultTargetPlatform
To display the performance overlay P WidgetsApp. showPerformanceOverlay
To save a screenshot to flutter. png s  
To quit q  

Similar pages

Visual Studio Code

Android Studio and IntelliJ

Write your first app
Page structure
Concept map →
Terms

Flutter

It is an open-source UI software development kit created by Google. It is used to develop applications for Android, iOS, Windows, Mac, Linux, Google Fuchsia and the web.

Widget

have a different lifespan: they are immutable and only exist until they need to be changed. Are lightweight, in part due to their immutability. Describe what their view should look like given their current configuration and state.. When a widget’s state changes, the widget rebuilds its description, which the framework diffs against the previous description in order to determine the minimal changes needed in the underlying render tree to transition from one state to the next..

Debugging

Use the DevTools suite for debugging Flutter or Dart apps..

State

A widget’s state is stored in a State object, separating the widget’s state from its appearance. The state consists of values that can change, like a slider’s current value or whether a checkbox is checked. When the widget’s state changes, the state object calls setState(), telling the framework to redraw the widget..