Hot reload and hot restart in Flutter

Introduction

Hot reload and hot restart help you see changes in your app instantly without losing your work. They make app development faster and easier.

You want to quickly try a new color or text in your app.

You fixed a small bug and want to see the result immediately.

You changed the UI layout and want to check how it looks.

You want to keep the app state while testing small code changes.

You want to restart the app completely after big changes.

Syntax

Flutter

Hot reload: Press 'r' in terminal or click the lightning bolt in IDE.
Hot restart: Press 'R' in terminal or click the restart button in IDE.

Hot reload updates the code and keeps the app state.

Hot restart restarts the app and resets the state.

Examples

This is hot reload. It is fast and keeps what you typed or selected in the app.

Flutter

// After changing a button color
// Press 'r' in terminal or click lightning bolt
// The app updates color without restarting

This is hot restart. It reloads everything from the start.

Flutter

// After adding a new variable or changing main()
// Press 'R' in terminal or click restart button
// The app restarts fresh with new code

Sample App

This app shows a counter and a button. When you press the button, the number increases.

If you change the text style or button color and use hot reload, the app updates instantly without losing the counter value.

If you use hot restart, the app restarts and the counter resets to zero.

Flutter

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int counter = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Hot Reload Demo')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Counter: $counter', style: const TextStyle(fontSize: 24)),
              const SizedBox(height: 20),
              ElevatedButton(
                onPressed: () => setState(() => counter++),
                child: const Text('Increment'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Important Notes

Hot reload works best for UI and logic changes inside widgets.

Hot restart is needed if you change global variables or main() function.

Using hot reload saves time because you don't lose app state like form inputs or navigation.

Summary

Hot reload updates code quickly and keeps app state.

Hot restart restarts app and resets state.

Use hot reload for small changes and hot restart for big changes.