Understanding Flutter hot reload and hot restart the simplest way

Hey there!🙋🏿‍♀️🙋🏿‍♀️ How’s your flutter journey coming? I hope the smiles are coming alive with every new thing you learn!😊

Flutter Hot Reload feature

From docs and most of the other videos/tutorials that can be found on the internet, you will always find this explanation or something close: “Flutter’s hot reload feature helps you quickly and easily experiment, build UIs, add features, and fix bugs. Hot reload works by injecting updated source code files into the running Dart Virtual Machine (VM). After the VM updates classes with the new versions of fields and functions, the Flutter framework automatically rebuilds the widget tree, allowing you to quickly view the effects of your changes”.

Trust me, for someone new to programming and tech vocabulary, it’s difficult to process those lines.

Hot restart

Hot restart takes more time than hot reload, and it destroys or rebuilds the state value and rebuilds it to the default. The app widget tree is completely rebuilt with a newly typed code. This takes about 23-30 seconds compared with the default app restart time.

That’s too much English, right…? I know😁. Now, let’s get to the fun part of understanding the concept more.

I had lots of issues understanding how hot reload and hot restart work. But then, somehow, I figured out a simple way to understand it. So, I thought I’d share. This was inspired by a course by Angela Yu.

Real-world scenario

Ever wondered how stressful it is for a nomad like myself to pack up my travel bag every weekend and travel to some new place for a conference, a seminar, or just to see a friend?

I bet you can understand how I feel having to pack anew every time I wish to travel… trust me, it requires time to pack because, if you don’t, you end up forgetting lots of important things, and we can’t have that, right?

So, I recently decided to get a travel box and pack up some very basic things that I’d need anytime I was on a trip. In this bag,​ I stuffed my Polo’s (Customized techie Polo’s of course), hairbrush, toothbrush, toothpaste, an eye mask, a sponge, towel, shorts, and nightwear. Oh my!!! That’s a lot😜. But these are basic needs, and I wouldn’t wanna be uncomfortable far from home.

Now, I get a call from a friend inviting me to her wedding next week. The ​question is “Do I need to unpack all my bags to add a dress, or do I just add a dress and a pair of heels to my bag?”… I mean, it’s not a tech event, but the already-packed basics are still things that I will need. So, since I still need these basic things, all I have to do is just add a dress instead of emptying the entire box, right?

How it relates

Hot reload

The function of hot reload is quite similar to just adding the dress. Hot reload implements the change in your UI in a couple of seconds, without reloading the whole app or messing with inputs and variables.

Hot restart

Hot restart, on the other hand, saves time by just implementing the functionality based on the closest build class in less than $10secs$ without restarting the whole app. Restarting the whole app would’ve done the same thing, but it would’ve done it in 40 seconds. Therefore, Hot restart saves developers time.

Now, I will be traveling in two days, and all I have to do is reload a dress into my box. If there’s a need to add a pair of heels, all I need do is open my box and put them in without rearranging the whole box.

Posts on this topic are usually very technical, but I found it difficult to understand many concepts by just reading the documentation, so, since I got a better hang of it, why not share?🤷🏿‍♀️🤷🏿‍♀️

If you still find it a bit confusing, do reach out to me on Twitter.

Happy coding!!!💙💙💙