docs: add tutorial on Flutter Hot Reload

New doc covers hot reload overview, benefits, and usage.

Author: mahatmamahardhikach

tutorial/mobile/flutter/hot_reload_in_flutter.md

@@ -0,0 +1,92 @@
+---
+title: Hot Reload in Flutter
+layout: default
+parent: Mobile Development
+grand_parent: Tutorial
+description: "Hot Reload in Flutter"
+---
+
+# Hot Reload in Flutter
+
+## Table of Contents
+
+- [Introduction](#introduction)
+- [What is Hot Reload?](#what-is-hot-reload)
+- [How Hot Reload Works](#how-hot-reload-works)
+- [Benefits of Hot Reload](#benefits-of-hot-reload)
+- [Hot Reload vs Hot Restart](#hot-reload-vs-hot-restart)
+- [Common Scenarios for Hot Reload](#common-scenarios-for-hot-reload)
+- [How to Use Hot Reload](#how-to-use-hot-reload)
+- [Conclusion](#conclusion)
+
+## Introduction
+
+Flutter’s **Hot Reload** feature is a game-changer for developers. It allows real-time updates to the app during
+development without losing the application state, making the process faster and more efficient. This article explores
+how Hot Reload works, its advantages, and how to use it effectively.
+
+## What is Hot Reload?
+
+Hot Reload is a feature in Flutter that enables developers to see the immediate effect of code changes in their
+application. It updates the UI without restarting the entire application, preserving the current state and allowing for
+rapid iterations.
+
+## How Hot Reload Works
+
+Hot Reload works by injecting updated source code into the running Dart Virtual Machine (VM). When code changes are
+made:
+
+1. The updated Dart files are compiled into a new version of the code.
+2. The Flutter framework reconstructs the widget tree to reflect the changes.
+3. The app’s state is maintained, ensuring a seamless transition.
+
+This process happens almost instantly, providing immediate visual feedback to developers.
+
+## Benefits of Hot Reload
+
+- **Faster Development**: Quickly see the results of your code changes.
+- **State Preservation**: Avoid losing progress or navigation state during updates.
+- **Efficient Debugging**: Test and fix UI issues in real time.
+- **Increased Productivity**: Focus on building and refining features without frequent restarts.
+
+## Hot Reload vs Hot Restart
+
+While Hot Reload and Hot Restart are both Flutter features, they serve different purposes:
+
+- **Hot Reload**: Injects updated code into the running app while preserving the app’s state. Ideal for small changes,
+  like UI tweaks or bug fixes.
+- **Hot Restart**: Restarts the app entirely, rebuilding the widget tree from scratch. Necessary for changes to global
+  variables, main methods, or state initialization.
+
+## Common Scenarios for Hot Reload
+
+Hot Reload is particularly useful for:
+
+- Adjusting UI layouts and styles.
+- Testing widgets and animations.
+- Fixing minor logic errors.
+- Debugging local features without restarting the app.
+
+Hot Restart, on the other hand, is better suited for:
+
+- Changes to the app’s main function.
+- Initialization of state variables.
+- Structural changes affecting the entire widget tree.
+
+## How to Use Hot Reload
+
+Using Hot Reload is straightforward:
+
+- **In IDEs**: Save your file while the app is running. IDEs like Android Studio and VS Code trigger Hot Reload
+  automatically.
+- **From the Terminal**: Press `r` in the terminal when running the app with `flutter run`.
+
+Ensure the Flutter project is correctly configured to support Hot Reload by setting up the appropriate IDE extensions or
+command-line tools.
+
+## Conclusion
+
+Hot Reload is a powerful feature in Flutter that transforms the development experience. By enabling real-time updates
+with state preservation, it accelerates the process of building, testing, and refining applications. Understanding how
+to use it effectively can significantly boost productivity and streamline app development.
+