Hot Reloading

Hot reloading is the ability to change your code and see updates in your application, in real time. Flutter contains Hot Reloading out of the box, no plugins or any configuration is necessary.

UI Changes

Here, I am changing the theme of my Flutter app, while it is still loaded. I press save (ctrl+s | cmd+s) and you will see the console:

Performing hot reload...

Reloaded 1 of 385 libraries in 566ms.

Code Changes

Changing the UI is one thing, but what about if I am in the middle of my app, and I want to change how the code works. Hot reloading supports this too. Here, I am changing what the onPressed does. It keeps the entire apps state, and now when you press the add button, the new code is run.

Global Variables and Static Fields

Global variables or static fields are loaded when the app starts, and are considered part of the state. If you change any of these, the hot reload will not affect your running app state. You will have to restart your app to see these changes.

Errors

If you have a build error, it will display a message saying that Reload not performed. You can then correct your issues, and save again. Your app will still be running.

What if you have an exception? If I tried to run this code:

int test = 0;
_counter = (1 ~/ test).toInt();

Then pressed the add button, I would get an exception.

Performing hot reload...
Reloaded 1 of 385 libraries in 467ms.
I/flutter ( 3872): ══╡ EXCEPTION CAUGHT BY GESTURE ╞═══════════════════════════════════════════════════════════════════
I/flutter ( 3872): The following IntegerDivisionByZeroException was thrown while handling a gesture:
I/flutter ( 3872): IntegerDivisionByZeroException
I/flutter ( 3872): 
I/flutter ( 3872): When the exception was thrown, this was the stack:
I/flutter ( 3872): #0 int.~/ (dart:core/runtime/libintegers.dart:35:7)
I/flutter ( 3872): #1 _MyHomePageState._incrementCounter.<anonymous closure> (file:///C:/Users/Adam/AndroidStudioProjects/flutter_app2/lib/main.dart:60:21)
I/flutter ( 3872): #2 State.setState (package:flutter/src/widgets/framework.dart:1108:30)
....

I can now correct my error and hot reload again. The app will have maintained it current state, and you will continue on, from the last state.

Limitations

There are currently two documented limitations.

  1. If you change generic code. e.g. class Widget<T> to class Widget<T,V>
  2. If you change an existing enum to a class.

Mobile Developer, Microsoft & Xamarin MVP

Share on
© 2018 Adam Pedley