Hot Reload in Flutter is one of the top feature provided by Google for its mobile and web application developer. Its one of the Flutter’s awesomely powerful feature know as Hot Reload. So let’s decode Hot Reload in Flutter.
But sometimes it may not works that way you want it to be, even though your IDE is properly connected to the device.
What is Hot Reload?
Hot Reload is a feature provided in Android Studio in which you can load the changes made in your code to the emulator without re-running the code again from the beginning. In simple words, you are not required to re-build the complete code.
It’s similar to web development where you can see the changes instantly without the compilation of code. Here code is compiled but it’s done at the same rate as Javascript web development takes.
It works by updating the source code in the running Dart. Then starting with the widget at the root of the tree, every widget’s build method is re-run until the entire tree is rebuilt and the new frame is rendered.
For Example, You want to change the title of your application bar, a great hot reload will work for you. Swapping out your widget column for a row, great that will work too.
Where Hot Reload in Flutter Fails?
When you are trying to change the root of the widget you are currently using in the frame. Even though Flutter will try to reload and run the build method that used to be root to check if hot reload is working but most of the time it may not work.
It doesn’t re-run the main or runs the app. And so for that, you will have to restart the application again. If any of your changes are outside of a build method and it’s safe to bet that a full restart will be required in order to get rid of any bad rendered frame with lots of error.
How to Perform a Hot Reload?
To Hot reload a flutter app all you need to do is follow below steps:
- Run the application completely from an Android Studio or Visual Studio Code with an emulator running in the background already or you can run the emulator later as well.
- Note that you can only hot reload flutter apps that are in debug mode.
- Now try to modify any widget you want to make changes in it and then select the hot reload button or simply save your code.
- If you are running the flutter app in command prompt then run the command flutter run, enter r in the terminal window.
What is the difference between hot restart, hot reload and full restart?
- Hot Restart: This loads the changes made in the code in VM and restarts your flutter application. As it restarts the app you will lose the application state after a restart.
- Hot Reload: This loads the changes in the code instantly into the VM and only rebuilds the required widgets tree and it preserves the application state. So basically hot reload will never re-run the main() function or init() function of your application.
- Full Restart: Restarts the iOS, Android, and Web applications. This takes longer as it re-builds the entire application and initializes the Gradle, recompiles JAVA, Kotlin, Swift, and Objective C codes. On the web, it also restarts the Dart Development Compiler. You need to press the stop button android studio or the editor you are using and then select play again.
How to Perform Hot Reload in Case of Compilation Errors?
If you application ran into compilation error then you will see compilation error on your terminal, and hence if you are already running the application then you will see the hot reload message as well for the compilation error.
For example: Error will start as “Hot reload was Rejected”.
In this situation, simply all you need to do is fix the compilation error on the specified lines of Dart code to keep using hot reload.
That’s all for decoding hot reload in Flutter. Hot Reload is very intuitive feature in Flutter application development and it is very awesome feature which still requires more features and upgrades but yet if you are developer you should use it at any cost.
If you liked the post then please follow us on Facebook and Twitter. Let us know the questions and answer you want to cover in this blog. Please feel free to read more articles related to Flutter, also subscribe to our newsletter to never miss an update related to flutter.
