Hot Reload & Hot Restart

⚡ What is Hot Reload?

Hot Reload instantly updates your app when you save code changes without losing the current state. It's Flutter's superpower for rapid development, making coding faster and more productive.


// Change this code and press 'r' or save
Text('Hello World')  // Before
Text('Hello Flutter!') // After - Updates instantly!

Result:

✅ Changes appear in less than 1 second!

Key Features

⚡

Hot Reload

Update UI instantly, keep state

Press 'r' in terminal
or Save file (Ctrl+S)

🔄

Hot Restart

Restart app, reset state

Press 'R' in terminal
or Shift+Ctrl+F5

💾

State Preserved

Keep your app's current data

int counter = 5;
// Stays 5 after reload!

🚀

Fast Development

See changes in milliseconds

< 1 second
update time

🔹 Hot Reload in Action

Watch how Hot Reload preserves state:

import 'package:flutter/material.dart';

class CounterApp extends StatefulWidget {
  @override
  _CounterAppState createState() => _CounterAppState();
}

class _CounterAppState extends State {
  int counter = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hot Reload Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // Try changing this text and save!
            Text('You clicked:', style: TextStyle(fontSize: 20)),
            Text('$counter', style: TextStyle(fontSize: 48)),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() => counter++),
        child: Icon(Icons.add),
      ),
    );
  }
}

// 1. Run the app
// 2. Click the button 5 times (counter = 5)
// 3. Change "You clicked:" to "Button pressed:"
// 4. Save the file
// 5. Counter still shows 5! State preserved! ✅

🔹 Hot Reload vs Hot Restart

Understanding the difference:

🔥 Hot Reload (r)

Speed: Very fast (< 1 second)
State: Preserved
Use when: Changing UI, widgets, styling
Shortcut: Press 'r' or Ctrl+S (save)

🔄 Hot Restart (R)

Speed: Fast (few seconds)
State: Reset to initial
Use when: Changing main(), global variables, enums
Shortcut: Press 'R' or Shift+Ctrl+F5

🔹 When to Use Hot Reload

Hot Reload works great for these changes:

// ✅ UI Changes
Text('Old Text')  →  Text('New Text')

// ✅ Styling Changes
fontSize: 16  →  fontSize: 24

// ✅ Widget Structure
Column(children: [...])  →  Row(children: [...])

// ✅ Adding Widgets
Container(child: Text('Hi'))  →  
Container(
  child: Column(
    children: [
      Text('Hi'),
      Text('New widget!'),
    ],
  ),
)

// ✅ Color Changes
Colors.blue  →  Colors.red

🔹 When to Use Hot Restart

Hot Restart is needed for these changes:

// ❌ Changing main() function
void main() {
  runApp(MyApp());  // Need Hot Restart
}

// ❌ Changing global variables
final String appName = 'Old Name';  // Need Hot Restart

// ❌ Changing enums
enum Status { active, inactive }  // Need Hot Restart

// ❌ Changing static fields
class Config {
  static String apiUrl = 'https://api.com';  // Need Hot Restart
}

// ❌ Modifying initState()
@override
void initState() {
  super.initState();
  // Changes here need Hot Restart
}

🔹 Keyboard Shortcuts

Quick commands for development:

VS Code:

Hot Reload: Ctrl+S (save file) or Ctrl+F5
Hot Restart: Shift+Ctrl+F5
Stop App: Shift+F5

Android Studio:

Hot Reload: Ctrl+\ or ⚡ icon
Hot Restart: Ctrl+Shift+\ or 🔄 icon
Stop App: Ctrl+F2

Terminal:

Hot Reload: Press 'r'
Hot Restart: Press 'R'
Quit: Press 'q'

🔹 Practical Example

Try this workflow:

// Step 1: Run this app
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hot Reload Test'),
          backgroundColor: Colors.blue, // Try changing to Colors.green
        ),
        body: Center(
          child: Text(
            'Hello World!', // Try changing this text
            style: TextStyle(
              fontSize: 24, // Try changing to 32
              color: Colors.black, // Try changing to Colors.red
            ),
          ),
        ),
      ),
    );
  }
}

// Step 2: Make changes to the comments above
// Step 3: Save the file (Ctrl+S)
// Step 4: See instant updates! ⚡