How to specify a port number while running flutter web

Question

Is there any way to start Flutter web, with a Headless-Server target, always on the same specified port number ?

Today, running the web application with:

flutter run -d headless-server

Provides a random port number.

Solution 1

I found the answer inside the flutter_tools source code:

flutter run -d headless-server --web-port=1234

Solution 2

To do this for Android Studio, just add the additional parameters to the run configuration. So in the Additional arguments, add --web-port=49430

Solution 3

The above solution works fine if you are like using command line. But if you you are using VsCode by CTRL+F5 that won't work. So to make vscode CTRL+F5 run in chrome or web-server go to your project root directory create .vscode directory and inside that folder add launch.json file.

Now if you want to run in web server add this lines in you launch.json

{
 "version": "0.2.0",
 "configurations": [{
        "name": "Flutter",
        "request": "launch",
        "type": "dart",
        "args": ["-d", "web-server","--web-port", "8000"],
    }
]}

And if you want to launch in chrome device change argument web-server to chome i.e.

{   
 "version": "0.2.0",
 "configurations": [{
        "name": "Flutter",
        "request": "launch",
        "type": "dart",
        "args": ["-d", "chrome","--web-port", "8000"],
    }
]}

Now run CTRL+F5

Solution 4

As of September 2020

You can run flutter web on any chromium based browser

Chrome     |    Edge     

Use any one to launch flutter web application with custom port

flutter run -d chrome --web-port 5555

flutter run -d edge --web-port 5555

flutter run -d web-server --web-port 5555

---

EDIT

UNRELATED TO THE MAIN Question, but Helpful if you face the below-mentioned issue.

Recently faced an issue with a flutter web application, it was not running and no logs/ errors were visible.

How I fixed it.

Run flutter build web this should print out the errors, fix those errors and then try running your application by above mentioned commands

Solution 5

This works well too -

flutter run -d web-server --web-port 8080

View more solutions

Comments

[Slick Slime]

Can you share how to do the same for Android Studio?

[Boy]

@SlickSlime check my response here: stackoverflow.com/a/63808434/969016

[gregthegeek]

Maybe its just a macOS thing? Seems like I need "web" not "web-server", it doesn't launch the same but does start: flutter -v run -d web --web-port=28080 Still, --web-port is the trick here. :)

[guenis]

strange this is still not listed when you do "flutter run -h"

[RumbleFish]

see here for detail on the vscode config settings used by @eli dartcode.org/docs/launch-configuration

[Mamrezo]

or flutter run -d chrome --web-port=1234

[Zujaj Misbah Khan]

Just what I was looking for.

[giorgio79]

Where is this in Android Studio?

[Boy]

@giorgio79 open de dropdown voor run configurations (next to the device selection dropdown) and select Edit Configurations

[Giulio]

Did not work until I added also "program": "lib/main.dart",

[WDR]

Where should I put this launch.json file? I tried to create launch.json file beside pubspec.yaml but didn't work!

[eli]

@WDR Read my instruction above. So to make vscode CTRL+F5 run in chrome or web-server go to your project root directory create .vscode directory and inside that folder add launch.json file.

[WDR]

How to do it on VSCODE?