148

I'd like to use Visual Studio Code as my editor for Flutter development, but I don't know how to get the emulator going. I've installed Visual Studio Code on Ubuntu 17.10 (Artful Aardvark).

I followed the first half of instructions as outlined on the Flutter: Get Started page (Create new app). Then I ran into trouble in the second half:

Run the app

  1. Make sure a target device is selected in the lower, right-hand corner of VS Code
  2. Press the F5 button on the keyboard, or invoke Debug>Start Debugging
  3. Wait for the app to launch
  4. If everything works, after the app has been built, you should see your starter app on your device or simulator:

The problem is that in that bottom right-hand corner is "No Devices."

How do I connect a device? I can't seem to find instructions anywhere.

Improve this question
5
  • I think you need something like stackoverflow.com/a/12846620/217408 Android Studio and IntelliJ have GUI for that, I doubt VSCode has (I have never used VSCode myself therefore not sure about that at all) Commented Mar 14, 2018 at 16:05
  • 5
    You can also take a look at Genymotion, it's a GUI to handle Android virtual devices, free for personal use: genymotion.com/fun-zone Commented Mar 14, 2018 at 17:18
  • @LeoCavalcante or android-x86 Commented Mar 14, 2018 at 18:11
  • Hi thanks guys, but you can indeed have a GUI (emulator) for vs code.This is what I was trying to, um, emulate: youtube.com/watch?v=hhP1tE-IHos Commented Mar 16, 2018 at 21:22
  • Here are instructions for macOS stackoverflow.com/a/61869002/315168 if anyone needs Commented May 18, 2020 at 11:55

21 Answers 21

Reset to default
152

From version 2.13.0 of Dart Code, emulators can be launched directly from within Visual Studio Code, but this feature relies on support from the Flutter tools which means it will only show emulators when using a very recent Flutter SDK. Flutter’s master channel already has this change, but it may take a little longer to filter through to the development and beta channels.

I tested this feature, and it worked very well on Flutter version 0.5.6-pre.61 (master channel).

Enter image description here

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Dennis, I'm going to do as you ask as your reputation is several times higher than mine and I respect your experience, but personally, in my ignorance, I'm not sure I'm keen on a best answer that means having to use near bleeding edge software.
Flutter is beta which means it will be bleeding edge software for a while. If the above answer helps others, let's live with it.
@CharlesThomasIngles sorry I just saw your comment, I guess turns out this really was indeed the suitable answer :p. Thanks for your listening though :)
thanks. I think visual studio code is the way to develop dart code. I set up my x86 emulator in android studio on the iMac. From visual studio code using the bash terminal I can the x86 emulators setup with the command "/Users/your_user/Library/android/sdk/emulator/emulator -list-avds" and manually launch the emulator using "emulator -avd the_device_name". setting the path in etc/paths will allow you to find the emulator
Press Ctrl+P, then type '>'
36

Do Ctrl + Shift + P

Then type Flutter:launch emulator

or

run this command in your Visual Studio Code terminal flutter emulators then see the result if you have installed any emulator it will show you. Then to run one of them, use flutter emulators --launch your_emulator_id in my case flutter emulators --launch Nexus 6 API 28

But if you haven't installed any emulator you can install one with flutter emulators --create [--name xyz], and then run your project flutter run inside the root directory of the project.

Improve this answer

1 Comment

But how do you create a tablet emulator?
35

You can see the bottom menu in VScode, click on this button and you will able to see all the available devices.

VScode

Improve this answer

1 Comment

this is cool, currently vscode doesnt show it for me
30

You do not need Android Studio to create or run a virtual device. Just use sdkmanager and avdmanager from the Android SDK tools.

Use the sdkmanager to download a system image of Android for x86 system.
E.g., sdkmanager "system-images;android-21;default;x86_64"

Then create a new virtual device using avdmanager.
e.g., avdmanager create avd --name AndroidDevice01 --package "system-images;android-21;default;x86_64"

Then run the new virtual device using emulator. If you don't have it just install it using the sdkmanager.
E.g., emulator -avd AndroidDevice01

If you restart Visual Studio Code and load your Flutter project. The new device should show up at the bottom right of the footer.

Improve this answer

1 Comment

@VijayBalkawade Run it from the android sdk install folder.
18

For those people using a Mac you can go to your terminal and type 

$ open -a Simulator.app

and this command will open the simulator.

After that, just go to the Debug option and tap on "Start Debugging"

enter image description here

If you want to test with an Android Emulator:

What I did was to go first to Android Studio and open a virtual Device with AVD Manager. After that you'll see another devices in your Visual Studio Code

enter image description here

In the bottom right you'll see now that you have 2 devices connected. Now, you can test with any of this devices.

Improve this answer

1 Comment

there is no device name available in my vscode, while i have added device. How can we enable this feature to display attached device name / list at bottom right position of VSCode. any suggestion. Thanks.
15

You can connect an Android phone via a USB cable and then it will show the device in the bottom bar. (Please note ADB must be installed. Click here for more.)

Or you can completely install Android Studio and set up the emulator from there and run the emulator. Then Visual Studio Code will recognise the emulator and show it at the bottom bar.

Improve this answer

3 Comments

Hi @aawaz, I think this is what I need to do. I must admit that I did see the instructions to install A/S, but I knew I didn't want that as my primary editor and so I literally turned the page assuming it was ok to skip that part. But now it looks like it was necessary to install if I want the emulator bits. I will try it this weekend and let you know how it goes. Also, thanks a lot for the itp re the phone and usb cable!
It took me waay longer than I think it should have, but I re-installed A/S and, after a fair bit of error/exit code research, I got the emulator running. It's super slow, but it at least shows up. One bug at a time. Now to see if VS Code will recognize it all.
This helped me look at the bottom bar!!! I didn't know where to find the connected devices. Cheers
11

Do Ctrl + Shift + P

Type- Flutter:launch emulator

Improve this answer

Comments

10

Visual Studio Code needs to know where Android SDK is installed on your system. On Windows, set the "ANDROID_SDK_ROOT" environment variable to the Android SDK root folder.

Plus: Always check the "OUTPUT" and "DEBUG CONSOLE" tabs for errors and information.

Improve this answer

Comments

5

You can use the 'Android iOS Emulator' plugin and add the Android Studio emulator script to your settings in Visual Studio Code:

Mac: emulator.emulatorPath": "~/Library/Android/sdk/tools/emulator

Windows: emulator.emulatorPath": "<your android home>\\Sdk\\emulator\\emulator.exe

Linux: emulator.emulatorPath": "~/Documents/SDK/tools

Your Visual Studio Code settings are found here: Menu File → Preferences → Setting → User Setting → Extensions → Emulator Configuration. Open command palette, Cmd + Shift + P → type "Emulator"

Improve this answer

Comments

4

First, you have to install Android Studio and Xcode to create a phone emulator.

In Visual Studio Code you can use the Android iOS Emulator plugin to set the path of emulator to run.

Improve this answer

Comments

4

The following steps were done:

  1. installed Genymotion
  2. configured a device and ran it
  3. in Visual Studio Code, lower right corner, the device shows
Improve this answer

1 Comment

The genymotion emulator does not show in my VS Code, do you happen to know why? The emulator is working fine though
3

Alternatively, if you enable developer mode and (ADB) is still needed, you can use connect to the device.

To enable developer mode, you go to Phone Settings → About Phone → tap buildnumber seven times.

Once you have it enabled and have the device connected, you can start seeing the device in Visual Studio Code.

Improve this answer

2 Comments

I have to admit that at first I thought that whole tap 7x thing was some sort of weird joke. But it's true, that's how it's supposed to be done! I have enabled developer mode now, but I have to install VS Code (I did a complete fresh re-install of linux) and see how it goes.
If developer options + USB debugging was already enabled and the device did not show up, then disable and re-enable USB debugging. This should lead to the authorization prompt on your phone, authorize that and then the device should appear in the dropdown. This solved it for me.
3

Set "ANDROID_SDK_ROOT" in environment variables. This solved my problem.

Improve this answer

Comments

3

For me, when I was running the "flutter doctor" command from the Ubuntu command line - it showed me the below error.

[✗] Android toolchain - develop for Android devices ✗ Unable to locate Android SDK.

From this error, it is obvious that "flutter doctor" was not able to find the "Android SDK" and the reason for that was my Android SDK was downloaded in a custom location on my Ubuntu machine.

So we must need to tell "flutter doctor" about this custom Android location, using the below command,

flutter config --android-sdk /home/myhome/Downloads/softwares/android-sdk/

You need to replace /home/myhome/Downloads/softwares/android-sdk/ with the path to your custom location/place where the Android SDK is available.

Once this is done, rerun "flutter doctor" and now it has detected the Android SDK location and hence I could run avd/emulator by typing "flutter run".

Improve this answer

Comments

3

Press ctrl+shift+p and choose flutter: Launch emulator.

Improve this answer

Comments

3

For Mac, press cmd + shift + p and type select device and press Enter:

enter image description here

Improve this answer

Comments

2

To select a device you must first start both, Android Studio and your virtual device. Then Visual Studio Code will display that virtual device as an option.

Improve this answer

Comments

2

You do not need to create a virtual device using Android Studio. You can use your Android device running on Android 8.1 (Oreo) or higher. All you have to do is to activate developer settings, then enable USB DEBUGGING in the developer settings.

Your device will show at the bottom right side of Visual Studio Code. Without enabling the USB debugging, the device may not show.

Enter image description here

Improve this answer

Comments

1

Genymotion settings -> Select ADB Tab -> Select

Use custom Android SDK tools -> Add Android SDK Path (Ex: C:\Users\randika\AppData\Local\Android\sdk)

Genymotion Settings View

Improve this answer

Comments

1

Recently I switched from Windows 10 home to Elementary OS. Visual Studio Code didn't start from Ctrl + Shift + P.

Launch the emulator instead of that. I just clicked the bottom in the right corner no device → Start emulator. It worked fine.

Improve this answer

Comments

-2

Running the following command on the terminal solved the issue for me:

flutter create .

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.