Flutter Hot Reload and DevTools

Flutter gives developers two powerful helpers: hot reload for instant visual feedback, and DevTools for finding problems. Hot reload works like a painter who touches up one corner of a canvas without repainting the whole picture. DevTools works like a doctor's toolkit that shows what happens inside a running app.

Hot Reload

Hot reload injects your updated code into the running app in about a second. The app keeps its current screen and its current data. Change a color, save the file, and the new color appears while you stay on the same page.

How to Trigger It

• VS Code: save the file, or press the lightning icon in the debug toolbar.
• Android Studio: press the lightning bolt button or use Ctrl+S.
• Terminal: press r while flutter run is active.

Hot Restart

Hot restart reloads all code and resets the app to its starting state. Every variable returns to its initial value. Use it when hot reload cannot apply a change, such as an edit to a global variable or the main() function. Press R (capital) in the terminal to trigger it.

Full Restart

Stop the app and run it again after you change native files, add a new package, or edit permissions. Hot reload and hot restart cannot update native code.

Comparing the Three Actions

Action	Speed	Keeps App State	Use When
Hot reload	About 1 second	Yes	Changing UI, text, colors
Hot restart	A few seconds	No	Changing state setup or main()
Full restart	Longest	No	Changing native code or packages

  Edit code
     │
     ▼
  UI change only? ──── yes ──→ Hot Reload
     │ no
     ▼
  Dart logic or state change? ── yes ──→ Hot Restart
     │ no
     ▼
  Native files or packages ──→ Full Restart

When Hot Reload Seems Broken

Hot reload rebuilds widgets, but it skips initState() for widgets that already exist. A change inside initState() shows no effect until you restart. The same rule applies to values stored in a static variable.

Flutter DevTools

DevTools is a set of browser-based tools that connect to your running app. Start it from the VS Code command palette with "Open DevTools", or run dart devtools in the terminal.

Widget Inspector

The inspector shows the widget tree and highlights the widget under your finger. Select a widget and read its size, padding, and properties. This tool solves most layout puzzles in minutes.

Performance View

This view records frame times. A smooth app draws each frame in under 16 milliseconds. Red bars in the chart mark frames that took too long and caused visible stutter.

Memory View

The memory view charts how much memory the app uses over time. A line that climbs and never falls often signals a leak, such as a listener that never gets removed.

Network View

Every HTTP request appears here with its status code, timing, and response body. Check this view when an API call returns unexpected data.

Logging View

Messages from print() and debugPrint() appear in this view with timestamps and filters.

Printing Debug Messages

import 'package:flutter/foundation.dart';

void loadScore() {
  int score = 42;
  debugPrint('Score loaded: $score');
}

The debugPrint function handles long messages without losing text. Remove noisy messages before you publish the app.

Debug Mode and Release Mode

Debug mode runs slowly because it carries extra checks. The red "DEBUG" banner in the corner marks this mode. Judge speed only in profile mode (flutter run --profile) or release mode (flutter run --release) on a real device.

Productive Habits

• Save often to see each change at once.
• Keep the Widget Inspector open while you build layouts.
• Read the red error screen carefully: it names the file and line number.
• Test performance on a physical phone, never only on the emulator.