Hot reload and hot restart in Flutter - UI Render Trace

Component - Hot reload and hot restart

This UI shows a simple Flutter app with a counter and a button. It helps explain how hot reload and hot restart update the app during development without losing or resetting state.

Widget Tree

Scaffold
├── AppBar
│   └── Text("Hot Reload Demo")
└── Center
    └── Column
        ├── Text("You have pressed the button this many times:")
        ├── Text(counter value)
        └── ElevatedButton
            └── Text("Increment")

The Scaffold provides the basic app layout with a top bar (AppBar) showing the title. The main content is centered and arranged vertically (Column). It shows a label text, the current counter number, and a button to increase the counter.

Render Trace - 5 Steps

Step 1: Scaffold

Step 2: Center

Step 3: Column

Step 4: Text (counter)

Step 5: ElevatedButton

State Change - Re-render

Trigger:User taps the 'Increment' button

Before

counter = 0

→

After

counter = 1

Re-renders:Entire StatefulWidget subtree containing the counter Text and button

UI Quiz - 3 Questions

What happens to the counter value when you use hot reload after changing the button label text?

A The counter resets to zero and the button label updates

B The app restarts completely and loses all state

C The counter value stays the same and the button label updates immediately

D Nothing changes on screen

Key Insight

Hot reload lets developers see UI changes instantly without losing app state, speeding up design and testing. Hot restart fully resets the app state, useful when state changes need a fresh start. Understanding which parts rebuild helps optimize app performance.