62

I've just started playing with Flutter in VSCode. I also installed the Dart Plugin. Running the demo app I read in the terminal enter image description here

Is this the only way to hot-reload the app? I mean I should always keep the terminal open and focus on it to type "r" in order to reload my views? Isn't there a shortcut directly from VSCode?

Improve this question
2
  • 1
    I had hot reloading working with Save on Windows 10 (Ctrl-S) in the 32-bit version of VSCode (1.31.1), but when I uninstalled the 32-bit version (retaining extensions and settings) and installed the 64-bit version (1.32.1) I lost this ability. All of the settings are correct, and even after restarting the OS and application and uninstalling and re-installing the extensions, 64-bit VSCode does not hot reload on Save. It does hot reload on Restart however (the green counter-clockwise arrow or Ctrl-Shift-F5). This appears to be a fairly new issue specific to the 1.32.1 release: github.c
    – Mark A Durham
    Commented Mar 10, 2019 at 12:57
  • 2
    If you run the code in Debugging mode then you don't have to press r for it to trigger hot reload.
    – praveena_kd
    Commented Jul 10, 2019 at 7:03

20 Answers 20

Reset to default
63

For 2024, this solution worked.

Steps

  1. Open Settings.
  2. Paste this text > dart.flutterHotReloadOnSave on the settings search box.
  3. And change value from "Manual" to "All"

screenshot

Note: Make sure the app is running on debug mode. Hot-Reload not worked on release mode.

Improve this answer
3
  • 7
    This works, just make sure you run/debug the app using VSCode's built-in debugger, rather than just executing flutter run in the integrated terminal.
    – Kollin Murphy
    Commented May 12, 2023 at 22:09
  • That worked for me, one thing is, the pop up keeps on coming at the bottom whenever I do ctrl+s regarding the hot reload, could it be made hidden?
    – Chandra Shekhar
    Commented Aug 19, 2023 at 20:03
  • In my case i don't want the HR when save, the option for me is Never
    – RDR_Dev
    Commented Aug 25, 2023 at 21:59
46

There's an extension for that. Called Dart Code and another one named Flutter Code

They will detect that your project is a Dart/Flutter project. And allows you to debug it + hot reload using f5.

Improve this answer
7
  • that works for the r functionality...anyone knows how to do a complete reload (R) from vs code?
    – oliver
    Commented May 3, 2018 at 5:33
  • 1
    oh...just found it (github.com/Dart-Code/Dart-Code/issues/411). there is a command that you can use (Flutter: full restart)
    – oliver
    Commented May 3, 2018 at 5:46
  • 7
    You can also use Ctrl+F5 for a full restart during debugging :-)
    – Danny Tuppeny
    Commented May 9, 2018 at 18:21
  • 7
    There is a setting dart.flutterHotReloadOnSave to enable hot reload on save for Flutter apps in Visual Studio Code. You need to start the app in debug mode for this to work, Debug -> Start Debugging.
    – apaatsio
    Commented Sep 21, 2018 at 11:20
  • @apaatsio There is no setting like that.
    – atilkan
    Commented May 11, 2019 at 17:46
17

If you like to hot reload your app with a keybinding better than Ctrl+Shift+F5, just change the Debug: Restart to Ctrl+S, so whenever you trigger the the Ctrl+S the app will first save your changes according to the workbench.action.files.save and afterwards restart the app (=hot reload, it is the green circle you see in the debugbar).

Keybindings for VS Code:

Screenshot of keybindings for vs code

Improve this answer
9

VSCode debug -> start debuging, make a change and try, That's what you want.

Improve this answer
6

No idea why F5 does not hot reload for me :(

But, you can map the -

Flutter: Hot Reload

command to whatever key combo floats your boat via -

Preferences > Keyboard ShortCuts

as in this screenshot -

enter image description here

Improve this answer
1
  • The default Shortcut for "Hot Reload" in VS Code is Ctrl + F5 for me.
    – Lim
    Commented Dec 4, 2020 at 9:16
5

open the Debug sidebar from VSCode and use it

enter image description here

then when you save, it will hot reload and apply the changes you make that is what working with me

Improve this answer
1
  • I noticed this today (And working great). I'm new to Flutter and some programming in general, but was wondering if there are any drawbacks from developing via the debugger verses running the app from something like "flutter run"? Is it common practice to develop entirely via running the debugger? I know its running from a launch.json file; so was wondering if there would be any side effects when trying to deploy the app or something?...
    – Colper
    Commented Nov 6, 2019 at 19:06
3

on Mac select

Run without Debugging or Shift+f5

you will see this at top select the electric icon for Hot Reload.

Hot Reload Bar

After doing some changes save it. It will auto reflect changes.

Improve this answer
3

You need to run Flutter app from VS Code's built-in debugger not VS Code's terminal.

Improve this answer
2

use the green reload button to hot reload the app in VS Code

Improve this answer
2
  • 1
    What to do to if those buttons don't appear anywhere in VS Code? I'm trying to find that whole panel of buttons, but it's nowhere to be found.
    – Jayasurya
    Commented Apr 27, 2019 at 10:02
  • take a look at the official doc for support [link]flutter.dev/docs/development/tools/vs-code
    – Divyanshu Kumar
    Commented May 30, 2019 at 12:52
2

===== Aug 2022 UPDATE =====

v3.42 and above: You can enable hot reload on autosave in the latest version by setting Flutter Hot Reload On Save to allIfDirty in your VSCode settings.

===== Old Versions (Early 2022 and below) =====

v3.41 and below: You can enable hot reload on autosave in the latest version by setting Flutter Hot Reload On Save to always in your VSCode settings.

v3.19 only: They disabled hot reload on autosave completely.

v3.18 and below: The extension hot reloads automatically when auto saving.

Improve this answer
2

Setting

if flutter and dart extensions already installed on vscode

Set from manual to All

Improve this answer
1
  • in IntelliJ IDEA exist this option?
    – Nikolay Baranenko
    Commented May 6, 2023 at 19:11
1

yes Here is the plugin Dart Code for VS CODE

https://marketplace.visualstudio.com/items?itemName=Dart-Code.dart-code

here is official doc for VsCode flutter

https://flutter.io/get-started/editor/#vscode

Improve this answer
1

In VS once installed Dart + Flutter extension, 2 options to hot reload 1) Use combo keys Command + Shift + F5. 2) Save the file by use combo keys Command + S

Improve this answer
1
  • 3
    What key do you mean by "Command" ? Not everyone is using an Apple keyboard.
    – Gabriel Devillers
    Commented Jul 14, 2018 at 10:25
1

I have both extensions and VSCode is set to Hot Reload once a document is saved. The only time I can reload my app is by stopping and restarting my debugger

Improve this answer
1

i dont know why but my vscode hot reloading not work if you have this problem you can use ctrl + f5 to refresh app. hope to work for developers that hot reloading not work for them.

Improve this answer
1

Run Hot Reload picture

Select ▷ then "Run without Debugging" -> You can now use ⌘S on Mac to ⚡ Hot Reload ⚡

Improve this answer
1

If you run your flutter project from the terminal you will have to manually press r to do a hot reload.

Therefore use the Run and Debug option in the VS Code to test your project.

Improve this answer
0

You may encounter problems with Hot Reload due to VS Code issues like this, which is relevant while writing this answer.

The most convincing way I see to do it without downgrading, updating to Insiders builds and/or loosing dev speed is to use the green restart/reload button in the VS Code run widget or Ctrl+Shift+F5 shortcut, but this option may be inacceptable for projects with trickier navigation and few different views.

Improve this answer
0

If you want enabled hot reload in flutter project you need to enable auto save in file>autosave in vscod IDE

Improve this answer
0

Use these settings and same settings add User tap bar

Hot Reload Issue Fix follower This settings

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.