Do you want to know, how to use hot reload and hot restart provided by Flutter SDK. Today we will learn about this awesome features available in Flutter.
Before starting, lets learn what is Hot Reload and hot Start? Also, why its important for Mobile Apps Developer?
Hot Reload and Hot Start
When building mobile apps, it’s crucial to be able to view effects of code changes efficiently, especially when building the UI. This enables us to quickly see the actual UI and update code iteratively.
It’s also very important to keep the app’s current state when updating the app. Otherwise, it’ll be very painful to manually reset the app to the previous state and continue testing.
Suppose that the component you are developing is only accessible to registered users, to actually test the component, you may need to log in every time you made a code change, if the state is not preserved between app updates.
Hot reload provided by Flutter SDK is a killer feature that can significantly increase developer’s productivity. With hot reload, the state is perverse between app updates, so you can see the UI updates instantly and continue the development and testing from the last execution point where you made the changes.
Use Hot Reload in Flutter
Depending on how a Flutter app is started, there are different ways to trigger hot reload. Only Flutter apps in debug mode can be hot reloaded:
- When the app is started by the command flutter run, enter r in the terminal window to trigger hot reload.
- When the app is started by Android Studio, saving the files automatically triggers hot reload. You can also click the Flutter Hot Reload button to manually trigger it.
- When the app is started by VS Code, saving the files automatically triggers hot reload. You can also run the command Flutter: Hot Reload with the keyboard shortcut Control-F5 to manually trigger it.
If the app is hot reloaded successfully, you can see output in the console with details of the hot reload.
Bellows schreenshot shows the console output when a hot reload is triggered by saving files in Android Studio.
Why Hot Reload in Flutter not working
Hot reload is so useful that you may want it to be available for all code changes you made. Unfortunately, there are still some cases that hot reload may not work.
Your code change introduces compilation errors. You need to fix these compilation errors before hot reload can continue.
Hot reload preserves the app state, and it tries to rebuild the widgets tree using the preserved state to reflect new changes. If your code change modifies the state, then the change to widgets may not be able to work with the old preserved state. Suppose that we have a widget that is designed to display a user’s profile information. In the previous version, the state for a user only contains the username and name. In the new version, the state is updated to include a new property email, and the widget is updated to display the new property. After hot reload, the widget still uses the old state and doesn’t see the new property. A hot restart is required in this case to pick up the state change.
Changes to initializers of global variables and static fields can only be reflected after a hot restart.
Changes to the app’s main() method may only be reflected after a hot restart.
Hot reload is not supported when an enumerated type is changed to a regular class or a regular class is changed to an enumerated type.
Hot reload is not supported when changing the generic declarations of types.
Use Hot Restart in Flutter
If hot reload doesn’t work, you can still use hot restart, which restarts the app from scratch. You can be sure that hot restart will reflect all changes you made.
Depending on how a Flutter app is started, there are different ways to trigger hot restart:
- When the app is started by flutter run, enter R in the terminal window to trigger hot restart.
- When the app is started by Android Studio, click the Flutter Hot Restart button to trigger hot restart.
- When the app is started by VS Code, click the Restart button, or run the command Flutter: Hot Restart from command palette to trigger hot restart.
Posts on Hot Reload and Hot Restart in Flutter are usually very technical, but I found it difficult to understand many concepts by just reading the Flutter official documentation, so, since I got a better hang of it, why not share on my blog?
If you still find it a bit confusing, do reach out to me on Twitter or add your comment in the comment box below.
Happy coding.