CodeBlanks Logo Icon CodeBlanks
Login Register

Hot reload

Learn what hot reload does and why it is essential.

Hot reload

Hot reload updates the app within seconds when you edit and save code, without restarting it. State is preserved; form data, scroll position and counters do not disappear. It is the most used feature during development.

# while flutter run is active, press 'r'
$ flutter run
# For hot reload: r
# For hot restart: R

Hot restart and DevTools

Hot restart (with R), unlike hot reload, resets all state and restarts the app from scratch; the widget tree is re-instantiated. Flutter DevTools offers advanced debugging tools such as performance profiling, widget tree inspection and network request monitoring.

# flutter run interactive keys:
# r = hot reload (state preserved)
# R = hot restart (state reset)
# q = quit

# Open DevTools in the browser:
$ flutter pub global run devtools

Practice Print reload info

In main, print two lines with print: reload state korur and restart state sifirlar.

Starter code

main.dart
void main() {
  // iki satır yazdır:
  // reload state korur
  // restart state sifirlar

}

Sample solution

main.dart
void main() {
  print('reload state korur');
  print('restart state sifirlar');
}

Expected output

reload state korur
restart state sifirlar

Questions and answers

Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.

1 What state does hot reload preserve?

  • Buffer memory
  • App state Correct answer
  • Build output
  • Network packets

Explanation: Hot reload preserves app state while applying changes; restart resets it.

2 Hot reload key

Question 
# hot reload: ____
# hot restart: R
Answer 
# hot reload: r
# hot restart: R

Explanation: In flutter run interactive mode, 'r' does hot reload, 'R' does hot restart.

3 Hot reload and restart

Term Meaning
Hot reload Applies changes while preserving state
Hot restart Resets state and restarts
r tuşu Triggers hot reload
DevTools Profiling and debugging tools

All lessons in Beginner

1 Intro to Flutter

  1. What is Flutter?
  2. Dart and Flutter
  3. SDK and setup
  4. flutter doctor
  5. Summary - Flutter setup

2 First app

  1. flutter create
  2. Project structure
  3. main and runApp
  4. Hot reload
  5. Summary - First app

3 Widget basics

  1. What is a widget?
  2. Widget tree
  3. BuildContext
  4. Material and Cupertino
  5. Summary - Widget basics

4 StatelessWidget

  1. What is StatelessWidget?
  2. The build method
  3. Passing parameters
  4. const constructor
  5. Summary - StatelessWidget

5 StatefulWidget

  1. What is StatefulWidget?
  2. createState and State
  3. The setState method
  4. initState and dispose
  5. Summary - StatefulWidget

6 Text and Container

  1. The Text widget
  2. TextStyle
  3. Container
  4. BoxDecoration
  5. Summary - Text and Container

7 Column and Row

  1. Column
  2. Row
  3. MainAxisAlignment
  4. CrossAxisAlignment
  5. Summary - Column and Row

8 Padding and margin

  1. The Padding widget
  2. EdgeInsets
  3. Container margin
  4. Spacing strategy
  5. Summary - Padding and margin

9 SizedBox and Center

  1. SizedBox
  2. The Center widget
  3. SizedBox.expand
  4. The Align widget
  5. Summary - SizedBox and Center

10 ListView

  1. What is ListView?
  2. ListView.builder
  3. ListTile
  4. Separator
  5. Summary - ListView

11 GestureDetector

  1. What is GestureDetector?
  2. onTap and onDoubleTap
  3. onLongPress
  4. onHorizontalDragUpdate
  5. Summary - GestureDetector

12 InkWell

  1. What is InkWell?
  2. InkWell vs GestureDetector
  3. Material parent
  4. onTap callback
  5. Summary - InkWell

13 ElevatedButton

  1. What is ElevatedButton?
  2. onPressed and child
  3. TextButton and OutlinedButton
  4. Button style
  5. Summary - ElevatedButton

14 TextFormField

  1. What is TextFormField?
  2. TextEditingController
  3. decoration and label
  4. obscureText
  5. Summary - TextFormField

15 Todo app

  1. Project skeleton
  2. Add screen
  3. List and onTap
  4. Delete and divider
  5. Summary - Todo app

16 Images

  1. AssetImage
  2. Image.network
  3. Image.file
  4. fit and size
  5. Summary - Images

17 Scaffold and AppBar

  1. What is Scaffold?
  2. AppBar
  3. FloatingActionButton
  4. Drawer
  5. Summary - Scaffold and AppBar

18 Navigator

  1. What is Navigator?
  2. Navigator.push
  3. MaterialPageRoute
  4. Navigator.pop
  5. Summary - Navigator

19 Counter app

  1. Project skeleton
  2. State and counter
  3. Increment button
  4. Decrement button
  5. Summary - Counter app

20 Beginner final

  1. Challenge 1
  2. Challenge 2
  3. Challenge 3
  4. Challenge 4