CODEWITHSUNDEEP
visual-studio-codeflutter
r4id4
r4id4

Reputation: 6087

VSCode hot reload for flutter

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?

Upvotes: 63

Views: 106895

Answers (21)

Taher Salah
Taher Salah

Reputation: 437

You can do this steps

Open Settings.

Paste this text > dart.flutterHotReloadOnSave on the settings search box.

And change value from "Manual" to "All"

Upvotes: 0

dilshan
dilshan

Reputation: 2542

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.

Upvotes: 69

md somad
md somad

Reputation: 11

Use these settings and same settings add User tap bar

Hot Reload Issue Fix follower This settings

Upvotes: 0

brisam
brisam

Reputation: 21

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

Upvotes: 0

Achintha Isuru
Achintha Isuru

Reputation: 3347

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.

Upvotes: 1

Ishmael Mavor Raines
Ishmael Mavor Raines

Reputation: 330

Setting

if flutter and dart extensions already installed on vscode

Set from manual to All

Upvotes: 3

CoderUni
CoderUni

Reputation: 6174

===== 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.

Upvotes: 2

Aristidios
Aristidios

Reputation: 2331

Run Hot Reload picture

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

Upvotes: 1

hayashi-ay
hayashi-ay

Reputation: 299

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

Upvotes: 3

Faisal Naseer
Faisal Naseer

Reputation: 4258

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.

Upvotes: 3

zhulinpinyu
zhulinpinyu

Reputation: 629

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

Upvotes: 10

Rémi Rousselet
Rémi Rousselet

Reputation: 277717

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.

Upvotes: 47

Omar
Omar

Reputation: 643

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

Upvotes: 5

steph
steph

Reputation: 303

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

Upvotes: 18

kkaun
kkaun

Reputation: 603

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.

Upvotes: 0

Hamidreza Ghanbari
Hamidreza Ghanbari

Reputation: 307

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.

Upvotes: 1

J. Grant 615
J. Grant 615

Reputation: 11

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

Upvotes: 1

Divyanshu Kumar
Divyanshu Kumar

Reputation: 1461

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

Upvotes: 2

WickedW
WickedW

Reputation: 2601

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

Upvotes: 6

Paul Loke Kuo Khang
Paul Loke Kuo Khang

Reputation: 11

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

Upvotes: 1

SABDAR SHAIK
SABDAR SHAIK

Reputation: 671

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

Upvotes: 1

Related Questions