← Back to Articles

Flutter Hot Reload vs Hot Restart: Understanding Development Workflows

Published on January 09, 2026
Flutter Hot Reload vs Hot Restart: Understanding Development Workflows

Flutter Hot Reload vs Hot Restart: Understanding Development Workflows

If you've spent any time developing Flutter apps, you've likely noticed two magical buttons in your IDE: Hot Reload and Hot Restart. These features are what make Flutter development incredibly fast and enjoyable, but understanding when to use each one can save you time and frustration. Let's dive into what makes these features tick and how to use them effectively.

What is Hot Reload?

Hot Reload is Flutter's superpower for rapid development. When you press that lightning bolt icon (or use the keyboard shortcut), Flutter updates your running app with code changes in under a second, preserving the current state of your app. This means if you're testing a form and have typed some text, that text stays there after a Hot Reload.

Here's how it works under the hood:

  • Flutter keeps track of your widget tree and state
  • When you change code, Flutter identifies what changed
  • It updates only the affected widgets while preserving state
  • Your app continues running with the new code

Let's see a simple example:


import 'package:flutter/material.dart';

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

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

class CounterScreen extends StatefulWidget {
  @override
  _CounterScreenState createState() => _CounterScreenState();
}

class _CounterScreenState extends State<CounterScreen> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Counter App'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_count',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _count++;
          });
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

If you run this app, increment the counter to 5, then change the text "You have pushed the button this many times:" to "Total count:" and Hot Reload, you'll see the counter still shows 5. The state is preserved!

What is Hot Restart?

Hot Restart is like giving your app a fresh start while keeping it running. When you trigger a Hot Restart, Flutter:

  • Completely rebuilds your widget tree from scratch
  • Resets all state to initial values
  • Re-runs your main() function
  • Takes a bit longer than Hot Reload (usually 1-3 seconds)

Think of Hot Reload as updating a single page in a book, while Hot Restart is like starting the book from page one again.

When to Use Hot Reload

Hot Reload is perfect for most day-to-day development tasks:

  • UI Changes: Modifying colors, text, padding, or layout
  • Widget Structure: Adding or removing widgets in your build method
  • Styling Updates: Changing themes, fonts, or visual properties
  • State Logic: Modifying how state is updated (as long as you're not changing state initialization)

For example, if you're tweaking the appearance of a button:


ElevatedButton(
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.blue, // Change this to Colors.green and Hot Reload
    padding: EdgeInsets.symmetric(horizontal: 20, vertical: 12),
  ),
  child: Text('Click Me'),
)

Hot Reload will instantly show your color change without losing any app state.

When to Use Hot Restart

There are specific scenarios where Hot Reload won't work, and you'll need Hot Restart:

  • Initialization Changes: Modifying code in initState(), constructors, or global variables
  • State Initialization: Changing how state variables are initialized
  • Static Variables: Updating static fields or constants
  • Main Function: Changing anything in your main() function
  • Package Changes: After adding or removing dependencies in pubspec.yaml

Here's an example where Hot Restart is necessary:


class _MyWidgetState extends State<MyWidget> {
  // Changing this initial value requires Hot Restart
  int _initialValue = 0; // Try changing to 10
  
  @override
  void initState() {
    super.initState();
    // Any changes here require Hot Restart
    _initialValue = 5;
  }
  
  @override
  Widget build(BuildContext context) {
    return Text('Value: $_initialValue');
  }
}

If you change the initial value of _initialValue or modify initState(), Hot Reload won't pick up those changes because they happen during widget initialization, which only occurs once.

Understanding the Limitations

While Hot Reload is incredibly powerful, it has some limitations:

1. State Preservation Can Be Tricky

Sometimes preserving state isn't what you want. If you're debugging state-related issues, you might prefer Hot Restart to start fresh:


class _FormState extends State<FormScreen> {
  final _formKey = GlobalKey<FormState>();
  String _email = '';
  String _password = '';
  
  // If you're debugging form validation, Hot Restart helps
  // reset the form to a clean state
}

2. Performance Considerations

Hot Reload is fast, but if you've made many changes or the app is in a complex state, sometimes a Hot Restart can be cleaner and help avoid unexpected behavior.

3. Native Code Changes

If you modify native code (Android/iOS), neither Hot Reload nor Hot Restart will help. You'll need to stop and rebuild the app completely.

Best Practices for Development

Here are some tips to make the most of these features:

Use Hot Reload Frequently

Get in the habit of using Hot Reload for quick iterations. It's your fastest feedback loop. Make a small change, save, and see it instantly.

Know Your Keyboard Shortcuts

  • VS Code: Ctrl+F5 (Hot Reload), Ctrl+Shift+F5 (Hot Restart)
  • Android Studio: Ctrl+\ (Hot Reload), Ctrl+Shift+\ (Hot Restart)
  • Command Line: Press 'r' for Hot Reload, 'R' for Hot Restart

When in Doubt, Hot Restart

If Hot Reload isn't working as expected or you're seeing strange behavior, don't hesitate to use Hot Restart. It's still much faster than a full rebuild.

Structure Your Code for Hot Reload

You can make your code more Hot Reload-friendly by keeping initialization logic separate from UI logic:


class _ProductListState extends State<ProductList> {
  List<Product> _products = [];
  bool _isLoading = false;
  
  // Keep initialization in initState
  @override
  void initState() {
    super.initState();
    _loadProducts();
  }
  
  // Keep UI logic in build method - changes here work with Hot Reload
  @override
  Widget build(BuildContext context) {
    if (_isLoading) {
      return CircularProgressIndicator();
    }
    
    return ListView.builder(
      itemCount: _products.length,
      itemBuilder: (context, index) {
        return ProductTile(product: _products[index]);
      },
    );
  }
  
  Future<void> _loadProducts() async {
    setState(() => _isLoading = true);
    _products = await ProductService.fetchProducts();
    setState(() => _isLoading = false);
  }
}

Debugging Tips

Sometimes you'll encounter situations where neither Hot Reload nor Hot Restart seems to work correctly:

  • Stale State: If you see old values persisting, try Hot Restart
  • Build Errors: Fix syntax errors first - Hot Reload won't work with compilation errors
  • Package Issues: After pub get, always do a Hot Restart or full rebuild
  • Platform Channels: Changes to method channels require a full rebuild

Visual Comparison

Here's a visual representation of how Hot Reload and Hot Restart differ:

Hot Reload vs Hot Restart Workflow Code Change Hot Reload Widget Tree Updated State Preserved Hot Restart Full Rebuild State Reset

Conclusion

Hot Reload and Hot Restart are essential tools in every Flutter developer's toolkit. Understanding when to use each one will make your development workflow smoother and more efficient. Remember: Hot Reload for quick UI iterations and state-preserving updates, Hot Restart for initialization changes and fresh starts. With practice, choosing between them becomes second nature, and you'll appreciate how much time these features save you compared to traditional development workflows.

Happy coding, and enjoy that rapid feedback loop that makes Flutter development such a joy!