How do I configure VS Code to launch a Flutter Web app with query parameters in the URL?

Question

I have been looking for hours online and have had no luck. I'm trying to have VS Code launch a web application using a URL with parameters for debugging purposes. My launch.json file looks like this:

[

Despite how I configure this file, the web application always launches with the same URL:

What I need is the URL to look like this:

http://localhost:5000/#/gs?surveyId=123456

and a separate configuration that will launch with a URL that looks like this:

http://localhost:5000/#/p?xr5efG6HU9

Does anyone know how this can be configured using VS Code and the launch.json file? NOTE: I'm running VS Code on a Mac if that makes any difference.

To be clear, I know how to add new configurations, but the thrust of this question is how to get the parameters in the URL upon launch. I'm happy if the parameters are static and are simply copied from the launch.json file.

Many thanks for any help that can be offered!

Impassive

Answer 1

TL;DR;

flutter run -d Chrome --web-port=44444 --web-launch-url 'http://localhost:44444/?param1=value1&param2=value2&param3=value3'

Complete Answer

I'm not using VSCode, but I can help you with the command line options to perform this task and take it from there.

In general, you can launch your flutter web project using the terminal with

flutter run -d Chrome

by adding the following argument (--web-launch-url), you can specify the complete url provided to the browser. Make sure to adjust the port additionally (--web-port), to make it work.

So to provide url query parameters to your web app from the beginning, you can use the following command:

flutter run -d Chrome --web-port=44444 --web-launch-url 'http://localhost:44444/?param1=value1&param2=value2&param3=value3'

I hope this helps.

To complete your question for VSCode (guess work), I'd complete your example from above by adding the --web-launch-url to your args at the bottom of your json. Make sure to have the correct port for both args.

Archi

Answer 2

There is a command line flutter run --route '/route' but currently doesn't work on Web or iOS - Support/Feature Request Here

Only thing I could suggest is using something like Fluro and explicitly defining your parameters on your route, but then copying and pasting your parameters would be more efficient.

When testing URLs with parameters, I just use a clipboard manager to paste the parameters in using a hotkey.

Cele

OK, thanks for the tip! I also tried the --route option but no luck. It seems like a very simple (and logical) extension to the launch.json file. I'll look at the feature request you provided in the link above and upvote it if there's an option. Cheers! – Impassive