Hello Guys👋
I hope you find Setting Up Your Environment for Flutter Development helpful 😊. If you have followed that post till the end, you will end up having a simple counter app running in your emulator.
Let's get started with the article.
- Starting Your Emulator without starting Android Studio
- Hot Reload vs Hot Restart
- An analogy to understand Hot Reload, Hot Restart, their difference
Firstly,
Are you using VS Code as the editor and running your apps on virtual device? Have you ever felt unproductive in the process of starting your emulator? Don't want to start Android Studio to start the emulator 😣?
Here is one pro tip for you !!! You can start your emulator without starting Android Studio. Here is how to do this 👇!!
if (You know your emulator name) {
- Open your terminal and run the following command
flutter emulators --launch [your_emulator_name] - You will have your emulator running by now🥳, If so, you can skip the below part and directly go to Hot Reload vs Hot Restart ⏬
} else {
Open your command prompt and enter this command. This is your Sdk location.
cd %LOCALAPPDATA%/Android/Sdk/toolsTo get the list of emulators you have, use the following command and the list of your emulators will be displayed. Copy the name of emulator you want to run.
emulator -list-avds✏Note down the name of emulators for future reference✏
Run the below command replacing
<your_emulator_name>with your emulator name. Your emulator will start running 🥳!! If so, you can skip the below part and directly go to Hot Reload vs Hot Restart ⏬emulator.exe -avd <your_emulator_name>
}
If the above method doesn't start your emulator 🙄😫, May be you have upgraded your Android Studio, try this 👇
- Open your Command prompt and enter this command.
%LOCALAPPDATA%/Android/Sdk/emulator - Run the below command replacing
<your_emulator_name>with your emulator name. Your emulator will start running !!! 🥳emulator -avd <your_emulator_name>
By now you understood how to start your emulator without starting android studio. Now, lets see the two most important and most used features in flutter development and the difference between them.
Hot Reload vs Hot Restart (⚡vs🔁)
Both Hot Reload and Hot Restart helps to decrease the execution time of our app once we execute it. They can only be used if wehave executed our program once.
Hot Reload is the easiest and the fastest function which helps you to apply changes, fix bugs, creating UIs, and add features. It takes approximately one second to perform its functionality. In hot reload it does not destroy the preserved state.
Hot Restart has a slightly different functionality as compared to a hot reload. It destroys the preserved states of our app, and the code gets fully compiled again and starts from the default state. It takes more time as compared to hot reload but takes less time than the full restart function.
A simple analogy to understand this Clearly 🤯->😊
Enough of these technical details, here is an analogy that helps us understand this difference very clearly. I have read this in some article, and hope it will be useful.
I knew how stressful you feel having to pack anew every time you wish to travel🧳… (except if you love packing like 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, you recently decided to get a travel box and pack up some very basic things that you’d need anytime you was on a trip. In this bag, you stuffed your hairbrush, toothbrush, toothpaste, some face masks, a sanitizer, towel and nightwear. That’s a lot😜. But these are basic needs, and you wouldn’t wanna be uncomfortable far from home.
Now, you get a call from a friend inviting you to her wedding next week. The question is “Do you need to unpack all your bags to add a dress, or do you just add a dress and a pair of heels to your bag🤔🙄?”… I mean, it’s not a tech event, but the already-packed basics are still things that you will need. So, since you still need these basic things, all you have to do is just add a dress instead of emptying the entire box, right?
Now, lets relate this story to Hot Reload and Hot Restart 🤷♀️👉(🧳➿⚡)👈🤷♀️
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.
If you don't want to carry extra luggage in your bag, then you remove the unwanted things and add the needed things. This is similar to the functionality of 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⏳.
In the above case, removing all the things from the bag and start adding only the things you need is similar to what Full Restart does. It compiles everything from first and launches the application🌕.
Finally,
- (Fastest 🏃♂️💨💨) Hot reload loads code changes into the VM and re-builds the widget tree, preserving the app state; it doesn’t rerun main() or initState().
- (Slower then hot reload and Faster than full restart 🏃♂️💨) Hot restart loads code changes into the VM, and restarts the Flutter app, losing the app state.
- (Slowest 🏃♂️) Full restart restarts the iOS, Android, or web app. This takes longer because it also recompiles the Java / Kotlin / ObjC / Swift code.
What's Next?
Thank you for reading so far🙏. I hope you enjoyed following it and cleared all the confusions in your mind 😖🧹⏩😊 related to Hot Reload and Hot Restart and also got the trick to start your emulator without starting Android Studio.
In the next part, we will discuss Widgets (Basics of Flutter) in detail !! So Stay Tuned👀👀!!!!
Do share your valuable suggestions and your honest feedback, also Constructive Criticism. If you have any comments, questions, or concerns, Do comment them, I am more than happy to take them💬.
Happy Learning 😊👍!!