Flutter Hot Reload and Hot Restart: Speed Up Your App Development

❖ Welcome to Param Classes!

Welcome to Param Classes! In our previous tutorial, we learned how to run a Flutter application on an Android emulator and a real Android mobile device.

When developing an application, developers frequently change code, update designs, fix errors and test new features. Rebuilding and restarting the entire application after every small change can slow down development.

Flutter provides two useful features to make this process faster: Hot Reload and Hot Restart.

In this tutorial, we will understand both features, learn how to use them in Android Studio and VS Code, explore their differences and practise with a simple Flutter application.

✦ 1. What Is Flutter Hot Reload?

Hot Reload is a Flutter feature that allows developers to apply many code changes to a running application without restarting the entire app.

It helps developers see UI changes quickly while working on a Flutter project.

For example, suppose your application displays:

const Text("Hello Flutter")

Now you want to change the message to:

const Text("Welcome to Param Classes")

Instead of stopping and running the application again, you can save the code and perform Hot Reload.

Flutter updates the application with the new code while preserving the existing application state in supported situations.

Benefits of Hot Reload:

• Quickly preview UI changes.

• Save development time.

• Improve the design workflow.

• Test different colors and text styles.

• Make small code changes without a full restart.

✦ 2. What Is Flutter Hot Restart?

Hot Restart is another Flutter development feature.

It restarts the Flutter application and starts executing the Dart code again from the beginning.

Unlike Hot Reload, Hot Restart resets the in-memory application state.

For example, if your application has a counter value of 5, Hot Restart will recreate the application state. The counter will return to its initial value if it starts at zero.

Benefits of Hot Restart:

• Restart the application after certain code changes.

• Reinitialize application state.

• Test the app from its initial screen.

• Check startup behavior.

• Apply changes that Hot Reload cannot handle properly.

✦ 3. Difference Between Hot Reload and Hot Restart

Both features help developers update a running application, but they work differently.

Feature	Hot Reload	Hot Restart
Main purpose	Apply code changes	Restart the application
Full app restart	No	Yes, Flutter app restarts
In-memory state	Generally preserved	Reset
Execution	Updates supported code changes	Starts Dart code again
Development use	Frequent UI changes	Reinitialize app state

Simple Example:

Imagine you are developing a shopping application.

• You change the button color: Hot Reload is usually sufficient.

• You change the initial counter value or need to reset the app state: Hot Restart may be appropriate.

Remember that some changes require a full stop and fresh run rather than either Hot Reload or Hot Restart.

✦ 4. How to Use Hot Reload in Android Studio

Now let's use Hot Reload in a practical Flutter project.

Step 1: Open Android Studio

Open your Flutter project in Android Studio.

Step 2: Start an Emulator

Open Device Manager and start your Android emulator.

You can also connect a real Android device.

Step 3: Run Your Flutter Application

Open lib/main.dart and click the Run button.

Wait until your application appears on the emulator or mobile.

Step 4: Change Your Code

Find the text displayed on your screen.

For example:

const Text("Hello Flutter")

Change it to:

const Text("Welcome to Param Classes")

Step 5: Save Your File

Save the file using:

Ctrl + S

Step 6: Perform Hot Reload

Click the Hot Reload icon in the Flutter toolbar.

Android Studio will apply the supported code changes to your running application.

You should now see the updated message.

✦ 5. How to Use Hot Restart in Android Studio

Hot Restart is also available from the Flutter toolbar.

Follow these steps:

1. Open your running Flutter project.

2. Make a code change that requires a restart.

3. Find the Hot Restart option in the Flutter toolbar.

4. Click Hot Restart.

5. Wait for the application to restart.

Your application will start again and its in-memory state will be reinitialized.

You can also stop the application and run it again when you need a completely fresh launch.

✦ 6. Hot Reload and Hot Restart Using Terminal

Flutter also supports these features through the terminal.

First, open the terminal inside your Flutter project directory.

Run your application:

flutter run

After the application starts, the terminal displays available commands.

Hot Reload:

Press:

r

This performs Hot Reload during an active Flutter terminal session.

Hot Restart:

Press:

R

This performs Hot Restart during an active Flutter terminal session.

Quit the running application:

Press:

q

These commands are useful when you prefer working directly from the terminal.

✦ 7. Practical Example: Counter App Using Hot Reload

Let's create a simple counter application and understand how Hot Reload works.

Open lib/main.dart and paste this complete code:

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const CounterScreen(),
    );
  }
}

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

  @override
  State<CounterScreen> createState() => _CounterScreenState();
}

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

  void incrementCounter() {
    setState(() {
      counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Flutter Counter App"),
        backgroundColor: Colors.blue,
        foregroundColor: Colors.white,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              "You clicked the button:",
              style: TextStyle(fontSize: 20),
            ),
            const SizedBox(height: 15),
            Text(
              "$counter",
              style: const TextStyle(
                fontSize: 40,
                fontWeight: FontWeight.bold,
              ),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: incrementCounter,
              child: const Text("Increase Counter"),
            ),
          ],
        ),
      ),
    );
  }
}

❖ Understand the Application

• main() starts the Flutter application.

• MyApp is the root widget.

• CounterScreen is a StatefulWidget.

• counter stores the current counter value.

• incrementCounter() increases the counter.

• setState() tells Flutter to rebuild the widget with the updated state.

• ElevatedButton provides a button for increasing the counter.

❖ Test Hot Reload

1. Run the application.

2. Click Increase Counter several times.

3. Note the current counter value.

4. Change the AppBar title from Flutter Counter App to My Counter Application.

5. Save the file.

6. Perform Hot Reload.

The title should update while the counter value remains unchanged.

❖ Test Hot Restart

Now perform Hot Restart.

The application starts again, and the counter returns to zero because the in-memory state has been recreated.

This simple experiment demonstrates the difference between Hot Reload and Hot Restart.

✦ 8. Can Hot Reload Apply Every Code Change?

No. Hot Reload works for many common Dart code changes, but it does not support every kind of modification.

Some changes may require Hot Restart or a full application restart.

Examples include:

• Changes to certain global or static initializations.

• Changes to some generic type declarations.

• Changes that affect native Android or iOS code.

• Certain changes to the application's initialization logic.

If Hot Reload does not produce the expected result, try Hot Restart.

If the change involves native platform configuration or native code, stop and run the application again. You may need to rebuild the native application.

✦ 9. Common Hot Reload Problems and Solutions

❖ Problem 1: Hot Reload Is Not Updating the Screen

Possible reason: The change may not be supported by Hot Reload, or the updated widget is not being displayed.

Solution:

• Save the Dart file.

• Check the code for errors.

• Try Hot Restart.

• Check whether the modified widget is part of the visible widget tree.

❖ Problem 2: Counter Value Is Not Resetting

Reason: Hot Reload preserves the existing in-memory state.

Solution: Use Hot Restart when you want to recreate the application's state.

❖ Problem 3: Hot Reload Button Is Not Available

Possible reason: The application may not be running in a Flutter debug session.

Solution:

• Check that the Flutter application is running.

• Verify the selected device.

• Start the app using Android Studio's Run button or flutter run.

❖ Problem 4: Application Shows an Error After Hot Reload

Possible reason: Your code may contain a syntax error or another runtime problem.

Solution:

• Read the error message in the Run or Debug console.

• Correct the code.

• Save the file.

• Try Hot Reload again.

✦ 10. Useful Tips for Faster Flutter Development

Follow these practices while developing Flutter applications:

1. Use Hot Reload for frequent UI changes.

2. Use Hot Restart when you need to reset application state.

3. Keep your code organized into separate Dart files.

4. Check errors in the Debug console.

5. Use meaningful widget and variable names.

6. Test your application on an emulator and a real device.

7. Use a full restart after native platform configuration changes.

8. Practise changing text, colors, layouts and widget properties.

These habits help you develop applications more efficiently.

✦ 11. Practice Tasks for Beginners

Try these exercises in your own Flutter project:

1. Create a simple counter application.

2. Change the AppBar title using Hot Reload.

3. Change the background color using Hot Reload.

4. Increase the counter to 10.

5. Perform Hot Restart and check the counter value.

6. Add a new Text widget and perform Hot Reload.

7. Change the initial counter value and test the result.

8. Run the same application on an Android emulator and a real phone.

❖ Conclusion

Hot Reload and Hot Restart are two important features that make Flutter development faster and easier.

In this tutorial, we learned how Hot Reload applies supported code changes while preserving the existing application state, and how Hot Restart restarts the Flutter application and resets its in-memory state.

We also practised both features using a counter application and learned how to troubleshoot common issues.

At Param Classes, we encourage beginners to learn Flutter through practical examples. Keep experimenting with your application and use Hot Reload and Hot Restart regularly during development.

Keep Learning with Param Classes — Learn Today, Grow Tomorrow!