How to run flutter on chrome using visual code editor

Question

How to run flutter app on chrome. I have installed flutter kit and also run flutter channel beta flutter upgrade and also install extension on visual studio code.

do you have flutter version `1.12`? if so, follow https://flutter.dev/docs/get-started/web — pskink, Jan 11 '20 at 09:43

score 50 · Accepted Answer · answered Jan 11 '20 at 10:03

50

Just like with flutter mobile create flutter launch configuration, but add the following line: "args": [ "-d", "chrome" ]

{
  // launch.json
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Flutter for web",
      "type": "dart",
      "request": "launch",
      "program": "lib/main.dart",
      "args": [
        "-d",
        "chrome"
      ]
    }
  ]
}

answered Jan 11 '20 at 10:03

Spatz

18,640
7
62
66

4

It's weird, `flutter run -d chrome` works fine for me but with this launch config, chrome cannot reach the site :( – happy-san Nov 05 '20 at 17:00

score 11 · Answer 2 · edited Jul 20 '21 at 13:23

11

You can write on terminal:

flutter run -d chrome

edited Jul 20 '21 at 13:23

Saeed

3,294
5
35
52

answered Jan 13 '20 at 15:19

INDIAN GAMER

119
3

2

How do you run the widget selector here then? – Oliver Dixon Feb 11 '22 at 13:27
we can use widget selector from vscode itself ,I think its not a problem – INDIAN GAMER Dec 07 '22 at 04:09

mLstudent33 · Answer 3 · 2022-12-27T07:18:46.747

@Spatz is correct but I also had right below his answer configuration

{
            "name": "new_app",
            "request": "launch",
            "type": "dart"
        },
        {
            "name": "new_app (profile mode)",
            "request": "launch",
            "type": "dart",
            "flutterMode": "profile"
        },

I had to delete these from launch.json for VSCode to launch the app in debug mode (able to step through) in Chrome.
Otherwise pushing F5 would start the debug mode but on my device.

Muhammad Waqas · Answer 4 · 2022-12-27T14:02:42.673

1

It's pretty simple if you've installed chrome in your system.. for running in debug mode, run this command in terminal

flutter run -d chrome

For running in release mode

flutter run -d chrome --release

edited Dec 27 '22 at 14:02

answered Dec 27 '22 at 13:56

Muhammad Waqas

179
7

How to run flutter on chrome using visual code editor

4 Answers4

Linked