Hot Reload in Flutter! How it works ?

What is Hot Reload ?

ot reload is one of the feature that Flutter have in its feature list and definitely the best one that helps developer for fast development.While you are developing on flutter you need to frequently change and view how it looks without compiling the full . Here is flutter hot reload comes into play , it reload the change quickly on the view as soon as you change code. According to the flutter.dev it defines

“Flutter’s hot reload helps you quickly and easily experiment, build UIs, add features, and fix bugs faster. Experience sub-second reload times without losing state on emulators, simulators, and hardware.”

Wow Great ! But how it works internally ?

😃 Curiosity question . Ok Lets dive into deeper to answer this.
Lets proceeds step by step by some questions & answers .

Q1. What is Flutter and how it compiles its code ?
Ans: The Flutter is a popular framework powered by the Dart platform. It uses dart to compile.

Q2. Dart platform ?
Ans : Yes Dart is a client-optimized language for developing fast apps on any platform. Dart language is type safe . It is developed by Google.
Visit Dart for further info about dart.

Q3. But we are about to know “Hot Reload” how Dart comes into play ?
Ans: Dart plays an important role on hot reload because dart forms the foundation of Flutter. So we need to understand the dart compile process first . Dart compiles code for both native and web platform.

1. Native platform: Targeting mobile and desktop devices. Here it uses Dart VM. Dart VM has two different compilation modes

  • Just-In-Time (JIT) : During Development it uses JIT with incremental recompilation. Notice the words incremental recompilation . This is the magic that trigger the stateful Hot Reload. I say the word stateful because it preserves the app state; it doesn’t rerun main() or initState() while reloading .
  • Ahead-of-time (AOT) : During Production deploy it uses AOT . So its per-compiled to native ARM or x64 machine code and launches with consistent, short startup time.

2. Web platform : Targeting the web, Here it uses dartdevc for development time compiler and dart2js for production time compiler . Both compilers translate Dart into JavaScript.

Dart Compilation Process on Development and Production

Let me guess your next question ?

Q4. Incremental Compiler ! 😲?
Ans: I would like to answer this question with wiki reference first

An incremental compiler is a kind of incremental computation applied to the field of compilation. Quite naturally, whereas ordinary compilers make so called clean build, that is, (re)build all program modules, incremental compiler recompiles only those portions of a program that have been modified.(wikipedia)

In short Incremental-Compiler is a compiler that compiles only those portion of source code that have been modified and updates any corresponding output.

That is how Hot reload shows the changes as soon as we hit Save(ctrl+s).

Performing hot reload...
Reloaded 1 of 548 libraries in 371ms.

Hope it helps , Thank you! 😃

Technical Consultant & Tech enthusiast https://www.linkedin.com/in/faisalrony/