Login/Register
How to set this command "flutter run -d chrome --web-renderer html" to run as default on VSCode?
Asked Answered
Solved windowsfluttervisual-studio-codeflutter-webshortcut
S

3

7

When I choose Chrome to run my Flutter app, the resizing page doesn't work correctly and by searching through the internet I found this command to solve the problem:

flutter run -d chrome --web-renderer html

But I am wondering to know if there is a way to set it as a default command on VSCode to make it easier to run by just clicking on play button/run menu/ctrl+f5.

Steel answered 12/8, 2022 at 17:2 Comment(1)
Does this answer your question? Add a custom command in Visual Studio Code Command Palette – Substantialize
E
10

In VSCode you can add the launch.json file to the .vscode folder of your project. Then just fill the file with the following content. Afterwards you can select the debug options you just setup in the dropdown of your VSCode debugger and run them.

.vscode/launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "debug_option_1",
            "request": "launch",
            "type": "dart",
            "flutterMode": "debug",
            "args": [
                "-d",
                "chrome",
                "--web-renderer",
                "html",
            ]
        },
        {
            "name": "debug_option_2 (release mode)",
            "request": "launch",
            "type": "dart",
            "flutterMode": "release",
            "args": [
                "-d",
                "chrome",
                "--web-renderer",
                "html",
            ]
        },
    ]
}

enter image description here

Electrocute answered 14/8, 2022 at 17:15 Comment(2)
It didn't add such a menu you showed in the pic but worked as a default running app behavior. – Steel
I think I could find them! – Steel
S
1

See the below link: Add a custom command in Visual Studio Code Command Palette

You could also make an alias for your terminal (tell the computer than whenever you type chromeRun or whatever you want, run 'flutter run -d chrome --web-renderer html' instead).

Substantialize answered 12/8, 2022 at 17:32 Comment(2)
I don't know how exactly add the new command there? – Steel
It really depends on your OS. If you are using mac or linux, you can follow this quick explainer on how to make the alias jonsuh.com/blog/bash-command-line-shortcuts. I've never done it on Windows but I think this post should explain how to accomplish it on the Windows OS #20531496. – Substantialize
H
1

You can go to the index.html in the web folder and paste this right at the top inside the body tag

<body>  
  <script>
    window.flutterWebRenderer="html";
  </script>
...the remained part of file
Humiliate answered 9/10, 2023 at 6:55 Comment(1)
Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Acting

© 2022 - 2024 — McMap. All rights reserved.