Flutter Hot restart and Hot reload

Overview

Hot Reload and Hot Restart are Flutter's development features that speed up development by quickly applying code changes without restarting the entire app.

Hot Reload

Definition: Injects updated source code files into the running Dart VM (Virtual Machine) and rebuilds the widget tree while preserving app state.

How It Works

1. You make a code change
2. Press
   textCopy

   r

   in terminal or click ⚡ in IDE
3. Flutter injects changed code into running VM
4. Widget tree rebuilds
5. App state is preserved (variables, navigation stack, etc.)

Example

dartCopy
class CounterPage extends StatefulWidget {
  @override
  _CounterPageState createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int _counter = 0;

  void _increment() => setState(() => _counter++);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Counter')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Count: $_counter', style: TextStyle(fontSize: 48)),
            // Change this text color from blue to red
            Text('Tap + to increment', style: TextStyle(color: Colors.blue)),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _increment,
        child: Icon(Icons.add),
      ),
    );
  }
}

Scenario:

1. Run app, tap + button 5 times →
   textCopy

   _counter = 5

2. Change
   textCopy

   Colors.blue

   to
   textCopy

   Colors.red

   in code
3. Press
   textCopy

   r

   (hot reload)
4. Result: Text color changes to red, BUT
   textCopy

   _counter

   still shows 5 (state preserved)

When Hot Reload Works

✅ Works for:

• Changing UI (colors, text, layouts)
• Modifying
  textCopy

  build()

  methods
• Adding/removing widgets
• Updating business logic
• Changing styles and themes

dartCopy
// Before
Text('Hello', style: TextStyle(color: Colors.blue))

// After (Hot Reload ✅)
Text('Hello World!', style: TextStyle(color: Colors.red, fontSize: 20))

When Hot Reload Doesn't Work

❌ Doesn't work for:

• Changing app entry point (
  textCopy

  main()

  )
• Changing global variables/constants
• Modifying class fields (non-final)
• Adding/removing class fields
• Changing enums
• Changing generic type parameters
• Native code changes (Android/iOS)
• Asset changes (images, fonts)

dartCopy
// Before
class User {
  String name;
  User(this.name);
}

// After (Hot Reload ❌ - need Hot Restart)
class User {
  String name;
  int age; // New field added
  User(this.name, this.age);
}

Hot Restart

Definition: Restarts the entire app from scratch without restarting the underlying process. All app state is lost.

How It Works

1. Destroys current widget tree
2. Resets all variables to initial values
3. Re-runs
   textCopy

   main()

   function
4. Rebuilds app from scratch
5. Does NOT restart native platform code

Example

dartCopy
void main() {
  print('App started at ${DateTime.now()}'); // This prints again on Hot Restart
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: CounterPage());
  }
}

Scenario:

1. Run app, tap + button 5 times →
   textCopy

   _counter = 5

2. Press
   textCopy

   R

   (hot restart)
3. Result: App restarts,
   textCopy

   _counter

   resets to 0,
   textCopy

   main()

   runs again

When to Use Hot Restart

Use when:

• Hot Reload doesn't apply changes
• You changed
  textCopy

  main()

  or global state
• You modified class structure
• App is in a broken state
• You want to test from initial state

Full Restart (Cold Restart)

Definition: Completely kills and restarts the app AND the underlying platform process.

When Required

• Native code changes (Android/iOS)
• Gradle/CocoaPods dependency changes
• Asset changes (pubspec.yaml)
• Changing app permissions

How to Full Restart

bashCopy
# Stop app
flutter run --release  # or Ctrl+C

# Then restart
flutter run

Comparison Table

r

R

Detailed Behavior Examples

Hot Reload - State Preservation

dartCopy
class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final _emailController = TextEditingController();
  final _passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(controller: _emailController),
        TextField(controller: _passwordController),
        // Change button color
        ElevatedButton(
          style: ElevatedButton.styleFrom(backgroundColor: Colors.blue), // Change to red
          onPressed: () {},
          child: Text('Login'),
        ),
      ],
    );
  }
}

Steps:

1. Type "test@example.com" in email field
2. Type "password123" in password field
3. Change
   textCopy

   Colors.blue

   to
   textCopy

   Colors.red

4. Hot Reload (
   textCopy

   r

   )
5. Result: Button color changes BUT text fields still contain the typed values

Hot Restart - State Loss

Same code, but after Hot Restart:

1. Type "test@example.com" in email field
2. Type "password123" in password field
3. Hot Restart (
   textCopy

   R

   )
4. Result: Text fields are cleared (state lost)

Keyboard Shortcuts

VS Code

Ctrl + F5

Cmd + F5

Ctrl + Shift + F5

Cmd + Shift + F5

Android Studio / IntelliJ

Ctrl + \

Cmd + \

Ctrl + Shift + \

Cmd + Shift + \

Terminal

bashCopy
r  # Hot Reload
R  # Hot Restart
q  # Quit
h  # Help

Common Issues & Solutions

Issue: "Hot Reload Not Working"

Causes:

• Code change requires Hot Restart
• Syntax error in code
• App is in broken state

Solution:

1. Check for syntax errors
2. Try Hot Restart (
   textCopy

   R

   )
3. If still failing, do Full Restart

Issue: "Changes Not Visible After Hot Reload"

Cause: Hot Reload doesn't work for certain changes (enums, global variables, etc.)

Solution: Use Hot Restart instead

Issue: "App Crashes After Hot Reload"

Cause: State inconsistency

Solution: Hot Restart to reset state

Best Practices

r

Performance Comparison

textCopy
Hot Reload:     ~300ms - 1 second   ⚡ Fastest
Hot Restart:    ~1-3 seconds        🔄 Fast
Full Restart:   ~5-30 seconds       🐢 Slow

Key Takeaways

Hot Reload: Fast UI changes, state preserved, use for most development.

Hot Restart: Resets app, state lost, use when Hot Reload doesn't work.

Full Restart: Complete rebuild, use for native/asset changes.

Resources

• Hot Reload Documentation
• Flutter Development Workflow
• Debugging Flutter Apps