VSCode hot reload for Flutter does not work

Question

I'm on VSCode right now working on my flutter application when hot reload just stops working, right in the middle of my development. I have absolutely no idea why this happens, I had no issue with this before at all in the past. If it helps anyone, I'm working on the second page of my app, which you get to via a route on the first page. Is this why hot reload isn't working? If it isn't can someone tell me why it doesn't work? This is really annoying and hindering progress on my app. Thanks!

Restarting my computer, and restarting the debugging. I'm on a Macbook Pro 2015 running macOS Mojave Version 10.14.2 if that helps.

There isn't really any code to show, it's not code related. It's VSCode or Flutter.

I expect the hot reload to work, but it doesn't.

Answer 1

I have noticed that hot reload is not working if you in runApp directly pass in MaterialApp. If separate core widget is created than everything works properly.

Working example:

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Hot reload works!!')),
      ),
    );
  }
}

Not working:

void main() => runApp(MaterialApp(
  home: Scaffold(
    appBar: AppBar(title: Text('Hot reload not working')),
  ),
));

Also don't forget to enable hot reload on save: https://stackoverflow.com/a/67132314/4990406

Answer 2

The hot reload doesn't work if you launch your app using f5 or select start debugging from the dropdown of debug .

But if you launch your app using Ctrl+f5 or select start without debugging from the dropdown of debug .

To solve the issue first close the running debugging session using Shift+f5.

Then click debug from the menu bar. Click Start without debugging.

Now The Hot reload works perfectly fine.

You can do the hot reload also using terminal. Just type: flutter run in the terminal and the app will be launched.

just press r in the terminal and hot reload will be initialized.

Answer 3

if you are still facing this issue

open VS code then go to:

• File > Preferences > Settings
• in the search field type "Hot Reload"
• you will see "Flutter Hot Reload On Save" and options are there
• the default is "manual" so change it to "all" or "allIfDirty"

Update - 12/Jun/2022 : instead of "always" the option now is = "All"

Answer 4

For VS Code Go to File>Autosave Make sure you have "check" Autosave.

Answer 5

Quoting here the answer of sidnas

I have noticed that hot reload is not working if you in runApp directly pass in MaterialApp. If separate core widget is created than everything works properly.

Working example:

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Hot reload works!!')),
      ),
    );
  }
}

Not working:

void main() => runApp(MaterialApp(
  home: Scaffold(
    appBar: AppBar(title: Text('Hot reload not working')),
  ),
));

The reason why the second snippet prevents the hot reload from working is because the "main" only runs once and the hot reload doesn't run the main. So to make it work, you have to separate the MaterialApp to a different widget.

Answer 6

For me on the latest VS studio, pressing CRTL+s does the hot reload nicely for me. kinda a habbit from other IDE's.

Answer 7

I found a way to force the hot reload in VS Code, which is very useful for those stuck in this situation: after the application is running, simply click on the debug option at the bottom of the VS Code editor whem the button is already named "Flutter" and, after choosing "flutter" again at the "Debug Configuraion" top floating window, you will be notified that the application is already being debugged, but the hot reload will occur.

Answer 8

If you're implementing your MaterialApp in main.dart will cause this issue, the best practice is to separate out another dart file, then refer from main.dart.

Answer 9

This appears to be a vscode issue in version 1.32.1 - see https://github.com/flutter/flutter/issues/29275 and https://github.com/Dart-Code/Dart-Code/issues/1518

In the meantime, you could revert to 1.31, wait for a fix in the next version, install the insiders version (which includes a fix), or could use 'flutter run' from the vscode terminal.

Answer 10

Here are the official documented cases where hot reload wont work:

1. Data regarding the sate of the app is changed (since Flutter tries to maintain the state of your app between hot reloads)
2. Change in global variables or static field since Flutter regards them as state
3. Changes to anything that are not in the build path (eg. initState()) and also the app's main itself
4. You've got compilation errors, check debug console to be sure
5. App is killed either by user or by OS because of inactivity
6. When Enumerated types are changed to to regular classes or vise versa
7. Font is changed
8. When Generic type decorations are modified
9. When included native code (Java, Kotlin or Swift) is modified
10. CupertinoTabView builder widget

reference: Hot Reload

Answer 11

first save your project then hot reload it.

Answer 12

For those who are using MAC.

I am using mac, and I handled this through by quitting first the emulator and VS Code and then restarting the computer.

It should be kept in mind that when you use stateless or stateful widget then you can get the feature of hot reload.

By pressing command+s it will save the file and will perform hot reload automatically.

Answer 13

Work for me:

1. Go to the flutter directory on your pc.
2. Write to the console: git checkout tags/2.0.5 (2.0.5 is latest version in stable tree for now, you can choose any others.)
3. Write to the console in your project: flutter --version And hot reload should work. I don't know why, but after command: flutter upgrade, my hot reload don't work

Answer 14

Try the following things

1. Make sure auto-save is checked under file
2. Go to settings and make sure that flutter auto load isn't manual. Change it to all if it

Answer 15

I had the same problem. Currently I am using VSCode version 1.39.2.

For the hot reload to work you need to start debugging in VSCode.

As it says in the docs: "Only Flutter apps in debug mode can be hot reloaded." https://flutter.dev/docs/development/tools/hot-reload

You can find that option on the VSCode's top navigation inside Debug or with the shortcut F5.

You don't need to do flutter run on your terminal, nor even on VSCode, is just start debugging and it will launch lib/main.dart in debug mode.

If that doesn't solve the problem, try downgrading to the last version of VSCode.

Answer 16

with VS Code(v1.44.1), Android Studio(v3.6.2), Flutter v1.12.13+hotfix.9 on Linux

Android studio > at Startup window > configure > AVD manager > run one virtual device > confirm VS Code(v1.44.1) has your running virtual device shown in lower right corner

VS Code > Run(at top, next to Help) > Start debugging(F5) or Start without debugging(Ctrl + F5)

Save your Flutter code in VS Code Then the emulator should be triggered for hot reload

Answer 17

May be you have changed the Keyboard shortcuts for hot reloading , kindly check if it is...

Answer 18

Solution is :

1. Click on File > Preferences > Settings

2. Search for "Hot Reload"

3. Click on Flutter Hot Reload On Save and choose always

4. after that Click on File and Click on Autosave.

Answer 19

try killing dart from terminal by typing killall -9 dart

then: 1- close vscode

2- re-open vscode (it may crash in the first run so reopen it again)

3- run flutter clean

4- run flutter pub get

5- run flutter run

this will fix the issue

Answer 20

In VS Code: File > Auto Save Auto save can solve this problem. When I used Ctrl+F5, I saw in vs code that it works, but nothings changed on the screen of emulator. I click on the File and then Auto save. After that my problem was solved. I tried the other solutions that other people wrote, but they didn't work for me. Only one person said it. Thanks him.

Answer 21

Open your Visual Studio Code then go to:

File > Preferences > Settings > In Search type Hot Reload > In Flutter Hot Reload > Change default-Manual to > Always or All.

Answer 22

For flutter hot reload problems that may be happening with your project,

It is a problem with your device, and not flutter or Android Studio

This happens when your logcat hangs up.

You might want to increase your buffer size.

To do this, go into your device or emulator:

Settings > Developer options (Ensure they are turned on),

Change the buffer size to a higher number.

Then run flutter run -v again

Answer 23

I had the same problem in VS code. Here is how I solved it :

1. I was using style property for Text from an external file. I found that change in external file doesn't reflect in hot reload.

             Text(
               AppStrings.giveFeedbackPageText,
               style: AppStyles.bodyText,
               textAlign: TextAlign.center,
               overflow: TextOverflow.ellipsis,
             ),
   

   So I had to use TextStyle from that file instead of an external file, and it works! Dont know the reason. Probably the external style needs to be inside a widget.

2. Another solution could be - separating home from MaterialApp into a separate widget.

Answer 24

Make sure you don't have this type of imports I was going crazy and deleting them fixed the hot reload, check all your files, I found this answer in github: https://github.com/flutter/flutter/issues/49744

import file:///C:/Users/.../.../< App Name >/lib/filename.dart

Answer 25

try Ctrl + S , when I press Ctrl + S it's automatically doing hot reload