Setup launch.json file for Flutter web using local Flutter version - flutter

I have installed Flutter in my mac inside my root folder: /[root]/flutter and I use it on project A.
Now I need to use a different version of Flutter for project B (flutter web), so I cloned Flutter inside project B's root directory.
I know that to run it, I have to launch ./flutter/bin/flutter run but how can I setup launch.json for VScode?
Here is my launch.json file:
{
"version": "0.2.0",
"configurations": [
{
"name": "Web",
"type": "dart",
"request": "launch",
"deviceId": "chrome",
"args": [
??
]
},
]
}
I think that if I use it, then it will use the standard Flutter in my mac root and not the Flutter inside the project folder.
How can I edit the launch in a way that if I click on the play button in VScode then it will run ./flutter/bin/flutter run?
I'm not interested to use tools like FVM

Open command palette, enter Preferences: Open User Settings.
Search Flutter Sdk Paths. Add additional flutter sdk from there.
Open flutter project. Do Flutter: Change SDK in the command palette.

Related

Flutter VsCode error: You don't have an extension for debugging YAML

I get this error each time I try to start my app in VsCode
You don't have an extension for debugging YAML. Should we find a YAML
extension in the Marketplace?
It was working before I add a font in pubspec.yaml, restarted my app and it didn't work anymore. I tried to restart VsCode, undo my changes, launch "flutter pub get" many times but nothing seems to work.
Click on "open a file", then navigate to the main.dart file and then click debug and run.
This mostly happens when you current file is the pubspec.yaml file. Just close or switch the main.dart or any .dart file. And it will work. Worked for me.
Just select main.dart file to start your app
Click debug and run.
The reason is that you are clicking on "Run and Debug" when you are at pubspec.yaml file. Just close it and go to main.dart and then Click on "Run and Debug".
Add .vscode/launch.json in your root folder
{
"version": "0.2.0",
"configurations": [
{
"name": "flutter_project", //<- Your Project Name
"request": "launch",
"type": "dart",
"program": "lib/main.dart"
},
{
"name": "Flutter",
"type": "dart",
"request": "launch",
"program": "lib/main.dart"
},
]
}
'For that go to RUN > ADD Configuration > Dart & Flutter'
This worked for me! Thanks Joris
It seems that Dart & Flutter run configuration has to be selected.
For that go to RUN > ADD Configuration > Dart & Flutter

vscode not select correct dart sdk

I have download different dart sdk and wish to switch sdk for different flutter project. In vscode I have add two downloaded dart sdk path into settings, and use Ctrl+Shift+P to change dart sdk location path, I selected Dart SDK 2.7.0 but vscode keep pointing back to the old dart sdk location (image below with Current setting)
Found a solution, inside root project folder create .vscode folder if don't have.
Next create settings.json if don't have. Paste the json below to overwrite current project sdk path. Remember to replace to your own sdk path
{
"dart.flutterSdkPath": "C:\\flutter_1.22.6",
"dart.sdkPath": "C:\\dart\\dart-sdk_2.7.0"
}
No need to change sdk path by using Ctrl+Shift+P each time.
Tip here, if facing any pub cache issue while building, just flutter clean and flutter pub get again
You can try this, and create a launch.json, by going to Run in VScode menu, then Add Configurations,
Add the following, mind you, your project's directories.
{
"configurations": [
{
"program": "lib/main.dart",
"name": "YOUR APP NAME",
"cwd": "/home/u/Projects/fireflutter/live-projects/YOUR_PROJECT_FOLDER/",
"type": "dart",
"request": "launch",
"flutterMode": "debug",
"args": [
// "--web-port",
// "8080",
// "--no-sound-null-safety",
// pass your arguments here, whatever you would type
//in the terminal when you would use i.e
//flutter run --no-sound-null-safety[I love null safety by the way,
//but this is a common problem for people who still want to opt out of it.
],
}
],
"dart.flutterSdkPath": "/home/u/Downloads/sdks/flutter",
"dart.sdkPath": "/home/u/Downloads/sdks/flutter/bin/dart",
}

Is it possible to specify the Flutter SDK path for the VSCODE extension?

I am having the setup that my flutter-sdk lives inside the projects root because I am using a version management system (FVM). When I run my programs from the console I run 'fvm flutter run' from the console but I also want to be able to start a debugging session with that SDK in the projects root ...
therefore my question is if it is possible to specify the SDK path for launching a Flutter App in debug mode and if how would i do it?
In vscode press ctrl+shift+p, search for 'set flutter sdk', and you can identify your Flutter installations and dart as well. You can edit this manually also in the settings.json.
You can try this, and create a launch.json, by going to Run in VScode menu, then Add Configurations,
add the following, mind you, your project's directories.
{
"configurations": [
{
"program": "lib/main.dart",
"name": "YOUR APP NAME",
"cwd": "/home/u/Projects/fireflutter/live-projects/YOUR_PROJECT_FOLDER/",
"type": "dart",
"request": "launch",
"flutterMode": "debug",
"args": [
// "--web-port",
// "8080",
// "--no-sound-null-safety",
// pass your arguments here, whatever you would type
//in the terminal when you would use i.e
//flutter run --no-sound-null-safety[I love null safety by the way,
//but this is a common problem for people who still want to opt out of it.
],
}
],
"dart.flutterSdkPath": "/home/u/Downloads/sdks/flutter",
"dart.sdkPath": "/home/u/Downloads/sdks/flutter/bin/dart",
}
If you get an error saying Error: spawn /bin/sh ENOENT, it means that your path is incorrect, and you have to fix either your program or cwd or name. Please update on the result of this.

flutter new web project not showing in Android emulator

I am new with Flutter, and I am trying to view my new project with Android Emulator. I've installed Dart, Flutter, and Android Studio correctly, but when I try to start the project in Visual Studio (without and with debugging mode), and choosing the correct emulator I get the following error:
Your launch config references a program that does not exist. If you
have problems launching, check the "program" field in your
".vscode/launch.json" file.
I have read in the documentation that it is possible to fix this by adding:
"program": "lib/main.dart",
instead of:
program : bin/main.dart
But still does not work.
First of all, your question says you are going to run Flutter web project in android emulator.
From this, I am guessing that you are using Flutter beta version. With that version, you can't run your project on android emulator.
Second, to run Flutter project on VSCode, you need to add launch.json file for some configuration like this.
{
"version": "0.2.0",
"configurations": [
{
"name": "Flutter - Current",
"request": "launch",
"type": "dart"
}
]
}

How to automate Flutter Integration testing command?

I've read and tried integration testing with flutter. I followed this guide here...
https://flutter.io/docs/cookbook/testing/integration
Now, to run the integration test I have to type in the following command:
flutter drive --target=test_driver/app.dart
My question is, is there a way to automate this inside android studio so I do not have to type in the command manually. I rather just click one button and run the integration test than type the command over and over again.
I'm new in flutter over all so any suggestion will be very much appreciated. Thanks in advance.
Not sure if you found answer for your question, but I am going to post solution here. Hope it helps.
In Android Studio, open the run/edit configuration dialog and select Edit Configurations as below:
Click on + button and select Dart Command Line App configuration.
Give a name for the configuration (ex: integration.dart) and select following:
Dart file: the path of the dart file which has integration test. (ex: app_test.dart)
Working directory: root path of your project.
Environment variables: click on folder icon at extreme right in this field and create new environment variable as below:
Note that, the http url will be different in your case. In order to find out that, run the flutter command in terminal and note the observatory url displayed in the console. In my case, it was below:
flutter: Observatory listening on http://127.0.0.1:51150/
Replace it with yours and click OK.
Once you complete above steps properly and run the integration.dart configuration, you should be able to run the command from Android Studio and see the results in IDE.
I am using Visual Studio and I have created a script file integration_test.sh.
flutter drive \
--driver=test_driver/integration_test.dart \
--target=integration_test/login_test.dart
flutter drive \
--driver=test_driver/integration_test.dart \
--target=integration_test/register_test.dart
..
To execute the test. I just run bash scripts/integration_test.sh
I am also trying to add on launch.json with task.json still could not figure it out. I will update the answer once everything is working.
Code for launch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "Flutter Dev",
"program": "lib/main_dev.dart",
"request": "launch",
"type": "dart"
},
...
{
"name": "Flutter Integration Test",
"preLaunchTask": "IntegrationTest",
}
]
}
Code for task.json
{
"version": "0.2.0",
"tasks":[
{
"taskName": "IntegrationTest",
"command": "scripts/integration_test.sh",
"isShellCommand": true
}
]
}
Setting up a Run Config with for flutter drive using "Dart Command Line App" requires a VM_SERVICE_URL Environment. If you'd like to let flutter drive create their own VM instance dynamically, you can configure the flutter drive command as an 'External Tool' in Android Studio, and configure created External Tool to run 'Before launch'. Note that the path set on 'Program' points to the Flutter SDK.
You can check this GitHub thread for more details.