Flutter Lesson 5 : Hot Reload, Debugging & DevTools

This article was translated specially for the channel FlutterPulseYou'll find lots of interesting things related to Flutter on this channel. Don't hesitate to subscribe!🚀

Building confidently: learning to fix, test, and fine-tune your app in real time.

In the last lesson, we explored stateless and stateful widgets, and saw Flutter's magic in action, how it rebuilds only what changes, making apps feel instantly responsive. Now, let's go one step deeper and look at the tools that make that magic visible to us as developers.

In this lesson, we'll learn how to use Hot Reload to see changes instantly, how to debug common errors, and how to explore the powerful Flutter DevTools to inspect your widget tree, performance, and memory usage.

These are the tools that turn coding into experimentation, helping you fix, fine tune, and perfect your app in real time without constantly restarting. Let's learn how to make Flutter development faster, smoother, and a lot more fun.

Hot Reload vs Hot Restart vs Full Restart

One of the most loved things about Flutter is how it lets you see your code changes almost instantly without waiting for a full rebuild every time. This is made possible by Flutter's real-time development feature: Hot Reload.

But Flutter actually offers three types of restarts, and each works a little differently:

• Hot Reload (updates code instantly while keeping the app state)
• Hot Restart (restarts the app but keeps your latest code)
• Full Restart (rebuilds the entire app from scratch)

Let's understand all three using a simple example.

The ColorChanger Widget

We'll build a small app where tapping a button changes the background color randomly. This is perfect to demonstrate how Hot Reload preserves the app's state and how Hot Restart resets it.

import 'package:flutter/material.dart';
import 'dart:math'; // for generating random colors

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: ColorChanger(),
    );
  }
}

class ColorChanger extends StatefulWidget {
  @override
  _ColorChangerState createState() => _ColorChangerState();
}

class _ColorChangerState extends State<ColorChanger> {
  Color bgColor = Colors.blue; // starting background color

  // Function to change the background color randomly
  void changeColor() {
    setState(() {
      bgColor = Color((Random().nextDouble() * 0xFFFFFF).toInt()).withOpacity(1.0);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: bgColor,
      appBar: AppBar(title: Text('Hot Reload Demo')),
      body: Center(
        child: ElevatedButton(
          onPressed: changeColor,
          child: Text(
            'Change Color',
            style: TextStyle(fontSize: 20),
          ),
        ),
      ),
    );
  }
}

Now, run the app and let's experiment.

1. Hot Reload

• Tap the button a few times, the color changes each time.
• Now, without stopping the app, change the text inside the button to:

child: Text('Tap Me to Change Color')

• Hit Hot Reload (the lightning bolt ⚡ icon or press r in terminal).

You'll instantly see the text update without losing the current color on screen. That's because Hot Reload injects your new code into the running Dart Virtual Machine, it updates the UI while keeping the app's current state intact.

So if your app was blue before reloading, it stays blue even after the text changes. Use Hot Reload for small UI tweaks, layout adjustments, or code changes that don't alter the app's structure.

2. Hot Restart

Now press Hot Restart (the circular arrow icon or R in terminal). You'll notice the app restarts, the background goes back to blue again.

Hot Restart restarts the entire Flutter app but keeps your latest code changes. It clears any variables stored in memory (like bgColor) and runs the main() function again from the beginning.

Use Hot Restart when you modify global variables, app state, or something that affects initialization.

3. Full Restart

Finally, imagine you close the app completely and re-run flutter run.
That's a Full Restart, Flutter rebuilds everything from scratch, reloading resources, dependencies, and plugins.

Use Full Restart when you change native files, dependencies in pubspec.yaml, or platform level settings like Android/iOS code.

Debug Console & Common Errors

Now that you've seen how Hot Reload keeps your workflow fast, let's talk about what happens when things don't go as planned, the debug console.

When you run a Flutter app, the console acts like your app's diary. It tells you what's happening under the hood — successful builds, warnings, errors, and rebuild messages. The more you read it, the faster you'll catch problems.

One common sight for beginners is Flutter's famous "Red Screen of Death", a bright red error screen that appears when something breaks in the widget tree. Don't panic! It's Flutter's way of helping you.

Here are a few common errors you might see early on:

• setState() called after dispose(): You're trying to update a widget that's no longer on screen.
• Null check operator used on a null value: You accessed data that doesn't exist yet often a missing ? or !.
• RenderFlex overflow: A layout issue, usually a widget is too big for the screen.

When you see an error, scroll to the bottom of the console, that's where Flutter usually prints the real reason for the crash. You can also tap the error message on screen to highlight the related line in your code.

Learning to read the console is like learning to listen to your app, it's the first step toward becoming a confident Flutter developer.

Flutter DevTools Overview

As your apps grow, you'll want more than just console messages, you'll want to see how your widget tree is built, how many times your widgets rebuild, and how your app performs. That's where Flutter DevTools comes in.

DevTools opens in your browser and gives you a live, visual look into your app. The most useful parts for beginners are:

• Widget Inspector : shows the entire widget tree and lets you select any widget on screen to see its properties. This is perfect for understanding layout, padding, alignment, and why something isn't appearing where you expect.
• Performance Tab : helps you spot unnecessary rebuilds or slow frames (very helpful when stateful widgets rebuild too often).
• Memory Tab : shows how your app uses memory, though you'll use this more as your apps get bigger.

To open DevTools in VS Code, simply start your app and click "Open DevTools" from the debug toolbar. You can also run:

flutter pub global activate devtools
flutter devtools

With DevTools, debugging becomes visual instead of guesswork, you can inspect, zoom in, highlight widgets, and truly understand how Flutter is laying out your UI. It's like having X-ray vision into your app.

Basic Debugging Practices

Before closing this lesson, here are a few simple and up-to-date, debugging habits that will make your development process smoother, especially as your interfaces get more complex:

• Use print() for quick tracing:
  It's simple but effective. Add prints inside setState(), inside functions, or at key parts of your logic to understand what's being triggered and when.
• Use breakpoints in VS Code/Android Studio:
  Click next to a line number to pause the app at that exact spot. You can check variable values, follow the flow step-by-step, and understand why your logic behaves a certain way.
• Use Flutter DevTools for layout debugging: Instead of old debug flags, DevTools now provides the recommended visual debugging tools:

Open Widget Inspector

Enable "Show Layout Bounds", This outlines padding, margins, constraints, and widget boundaries visually on the screen.

• Use the console wisely: The terminal quickly tells you when widgets rebuild, when errors occur, or when something unexpected happens. Watching the console while interacting with your app teaches you how Flutter behaves.
• Check rebuild patterns:
  In DevTools → Performance, you can see which widgets rebuild and how often. This is extremely useful for understanding state management and performance.

These practices aren't just for fixing problems, they help you understand Flutter's behavior more deeply and build apps with confidence.

Save this lecture and read full Flutter list of chapters here: