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.

Shimkus

do you have flutter version 1.12? if so, follow flutter.dev/docs/get-started/web – Baronetcy

Answer 1

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"
      ]
    }
  ]
}

Friede

It's weird, flutter run -d chrome works fine for me but with this launch config, chrome cannot reach the site :( – Compromise

This is what I'm looking for. Thank you – Dissimulation

Answer 2

You can write on terminal:

flutter run -d chrome

Ply

How do you run the widget selector here then? – Clustered

we can use widget selector from vscode itself ,I think its not a problem – Ply

Answer 3

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

Worriment

Answer 4

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

Autobus